Phone Number login screen ui flutter

This is a login UI created in Flutter. Inside which a text field has been taken and a button has been created below it. Your sim is you. To create a Flutter, first of all create a project of your own and after creating the project paste the code given by us. Run the code and see your output.

LoginsScreen.dart

  
  import 'package:flutter/material.dart';
import 'package:stocks/register.dart';
import 'package:stocks/util/bluecolor.dart';

import 'otp.dart';



void main() {
  runApp(LoginsScreen());
}

class LoginsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffFCFCFC),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(height: 80),
            Align(
              alignment: Alignment.topRight,

            ),
            SizedBox(height: 50),
            Text("Welcome,", style: TextStyle(fontSize: 30, fontFamily: "Roboto Flex", fontWeight: FontWeight.w600)),
            Row(
              children: [
                Text("Sign in", style: TextStyle(color: MyColors.blue,  fontSize: 30, fontFamily: "Roboto Flex", fontWeight: FontWeight.w600)),
                SizedBox(width: 5,),
                Text("to your account", style: TextStyle(fontSize: 30, fontFamily: "Roboto Flex", fontWeight: FontWeight.w600)),
              ]

            ),



            SizedBox(height: 5),
            Text("Please enter your mobile number, we’ll send a verification code to verify that it’s you.", style: TextStyle(fontWeight : FontWeight.w400, fontSize: 16, fontFamily: "Roboto Flex", color: Color(0xff000000))),
            SizedBox(height: 20),
            SizedBox(height: 20),
            Text("Phone Number",style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),


            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.grey, width: 0.3),// Background color
                borderRadius: BorderRadius.circular(8), // Rounded corners
                boxShadow: [

                ],
              ),
              child: TextField(

                decoration: InputDecoration(

                  hintText: " Enter phone number",
                  hintStyle: TextStyle(color: Colors.grey),
                  prefixIcon: Icon(Icons.phone_outlined),
                  border: InputBorder.none, // Removes border
                  contentPadding: EdgeInsets.symmetric(vertical: 15, horizontal: 10), // Adjusts padding
                ),
              ),
            ),
            SizedBox(height: 20),
            Center(
              child: ElevatedButton(
                onPressed: () {

                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => OtpScreen()),
                  );

                },
                child: Text("Login",style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Color(0xff356DFA),
                  foregroundColor: Colors.white,
                  minimumSize: Size(double.infinity, 50),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(child: Divider()),
                Text(" Don't have an account ? " ,style: TextStyle(color: Color(0xff9C9A9A)),),
                Expanded(child: Divider()),
              ],
            ),
            SizedBox(height: 10),
            Center(
              child: GestureDetector(
                onTap: () {

                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => RegistersScreen()),
                  );
                },
                child: Text(
                  "Create an account",
                  style: TextStyle(
                    color: Color(0xff356DFA),
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),

            SizedBox(height: 10,),
            Row(
              children: [
                Text(
                  "By signing up, you agree to out",
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: 10,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                SizedBox(width: 1,),

                Text(
                  "Terms & Conditions",
                  style: TextStyle(
                    color: MyColors.blue,
                    fontSize: 10,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                SizedBox(width: 1,),
                Text(
                  "and",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 10,
                    fontWeight: FontWeight.w300,
                  ),
                ),
                SizedBox(width: 1,),
                Text(
                  "Terms & Conditions",
                  style: TextStyle(
                    color: MyColors.blue,
                    fontSize: 10,
                    fontWeight: FontWeight.w300,
                  ),
                ),

              ],

            ),


          ],
        ),
      ),
    );
  }
}

Code Explanation

• A class named LoginScreen has been created.
• Scaffold ke andar single ChildScrollView liya gaya hai. aur uske andar text liya gaya hai aur text mein welcome ka text Diya gaya hai.
• A container has been taken in the scaffold and the decoration of that container has been done and a text field has been taken inside that container in which input is being taken from the user.
• An elevated button has been placed just below the field through which the login process proceeds.

Output