Login Sign Up and Forgot Screen With Validation | Flutter UI

This tutorial is a step-by-step guide to building a Flutter app that integrates login and registration and forgot password features.

Login Sign Up and Forgot Screen With Validation | Flutter UI

Flutter Login Sign Up and Forgot password Design

In this tutorial, you will learn how to create a login and a register and forgot password ui for a flutter project.

Step 1: Add the Dependency to pubspec.yaml file as shown below:

dev_dependencies:

google_fonts: ^2.1.0

Step 2: Import the library

Now in your Dart code, you can use:

import ‘package:google_fonts/google_fonts.dart’;

A main.dart file is a file in the Flutter framework that contains the logic for your app. It is the entry point for the application and is where you can define any variables you need to use in your code.

btn.dart

import 'package:flutter/material.dart';

class ButtonWidget extends StatelessWidget {
  final String text;
  final List<Color> backColor;

  final List<Color> textColor;
  final GestureTapCallback onPressed;

  const ButtonWidget({
    Key? key,
    required this.text,
    required this.backColor,
    required this.textColor,
    required this.onPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Shader textGradient = LinearGradient(
      colors: <Color>[textColor[0], textColor[1]],
    ).createShader(
      const Rect.fromLTWH(
        0.0,
        0.0,
        200.0,
        70.0,
      ),
    );
    var size = MediaQuery.of(context).size;
    return SizedBox(
      height: size.height * 0.07,
      width: size.width * 0.9,
      child: InkWell(
        onTap: onPressed,
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            gradient: LinearGradient(
              stops: const [0.4, 2],
              begin: Alignment.centerRight,
              end: Alignment.centerLeft,
              colors: backColor,
            ),
          ),
          child: Align(
            child: Text(
              text,
              style: TextStyle(
                foreground: Paint()..shader = textGradient,
                fontWeight: FontWeight.bold,
                fontSize: size.height * 0.02,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Source Code :- https://codeswithsunny.blogspot.com/2022/04/login-sign-up-and-forgot-screen-with.html