Minimal Login Screen in Flutter

import 'package:dating_app/constants/app_colors.dart';
import 'package:dating_app/constants/assets_constants.dart';
import 'package:dating_app/utils/flutter_svg.util.dart';
import 'package:dating_app/utils/spacing.utils.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.w),
          child: Column(
            children: [
              SpacingUtil.verticalSpacing(48.h),
              Text(
                "Dating App",
                style: TextStyle(fontSize: 24.sp, fontWeight: FontWeight.bold),
              ),
              SpacingUtil.verticalSpacing(4.h),
              Text(
                "Let's get you in",
                style: TextStyle(
                  fontSize: 16.sp,
                  color: AppColors.secondaryTextColor,
                ),
              ),

              SpacingUtil.verticalSpacing(48.h),

              FlutterSvgUtil.svgIcon(
                AssetsConstants.loginScreenIllustration,
                height: 300.h,
                width: 300.w,
              ),
              SpacingUtil.verticalSpacing(48.h),
              Container(
                decoration: BoxDecoration(
                  color: AppColors.secondaryButtonColor,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                height: 56.h,
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    FlutterSvgUtil.svgIcon(AssetsConstants.googleIcon),
                    SpacingUtil.horizontalSpacing(8.w),
                    Text(
                      "Login with Google",
                      style: TextStyle(
                        color: AppColors.primaryTextColor,
                        fontSize: 16.sp,
                      ),
                    ),
                  ],
                ),
              ),
              SpacingUtil.verticalSpacing(20.h),

              Container(
                decoration: BoxDecoration(
                  color: AppColors.secondaryButtonColor,
                  borderRadius: BorderRadius.circular(8.r),
                ),
                height: 56.h,
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    FlutterSvgUtil.svgIcon(AssetsConstants.facebookIcon),
                    SpacingUtil.horizontalSpacing(8.w),
                    Text(
                      "Login with Facebook",
                      style: TextStyle(
                        color: AppColors.primaryTextColor,
                        fontSize: 16.sp,
                      ),
                    ),
                  ],
                ),
              ),

              SpacingUtil.verticalSpacing(20.h),
              RichText(
                text: TextSpan(
                  text: 'By signing up, you agree to our ',
                  style: TextStyle(
                    fontSize: 12.sp,
                    color: AppColors.secondaryTextColor,
                  ),
                  children: [
                    TextSpan(
                      text: 'Terms of Service ',
                      recognizer:
                          TapGestureRecognizer()
                            ..onTap = () {
                              print('Terms of Service');
                            },
                      style: TextStyle(
                        color: AppColors.primaryTextColor,
                        decoration: TextDecoration.underline,
                        fontStyle: FontStyle.italic,
                      ),
                    ),
                    TextSpan(text: 'and also comply with our '),
                    TextSpan(
                      text: 'Privacy Policy',
                      recognizer:
                          TapGestureRecognizer()
                            ..onTap = () {
                              print('Privacy Policy');
                            },
                      style: TextStyle(
                        color: AppColors.primaryTextColor,
                        decoration: TextDecoration.underline,
                        fontStyle: FontStyle.italic,
                      ),
                    ),
                    TextSpan(text: ' and '),

                    TextSpan(
                      text: 'Terms and Conditions',
                      recognizer:
                          TapGestureRecognizer()
                            ..onTap = () {
                              print('Terms and Conditions');
                            },
                      style: TextStyle(
                        color: AppColors.primaryTextColor,
                        decoration: TextDecoration.underline,
                        fontStyle: FontStyle.italic,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Updated on