<h3>Flutter Login/Sign Up UI create easily Sample code included</h3>

I have created it easiest as possible we have used a list of container and inside every container we have entered the content as container is flexible and we can give style very easily using container

1. run $flutter create your project name in terminal
2. delete widget folder and delete all content of main.dart inside lib folder

3.create login.dart file inside lib folder
4.create register.dart file inside lib folder

place this code inside main.dart

Place this code inside of your login.dart file
i have also defined onpressed property for forgot pass and login button you can create manual page or we will talk about this on next post

import 'package:flutter/material.dart';

class MyLogin extends StatefulWidget {
  const MyLogin({Key? key}) : super(key: key);

@override
  _MyLoginState createState() => _MyLoginState();
}

class _MyLoginState extends State<MyLogin> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration:BoxDecoration(
          image: DecorationImage(image: AssetImage('assets/image/login.png'),fit: BoxFit.cover),
        ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Stack(
          children: [
            Container(
              padding: EdgeInsets.only(left: 35, top: 130),
              
              child: Text(
               
                "Sign In",
                
                style: TextStyle(color: Colors.lightBlueAccent.shade700, fontSize: 25,fontWeight:FontWeight.bold),  
              ),
            ),

Container(
              padding: EdgeInsets.only(left: 70, top: 25),
              child: Text("Niranjan Portal", style: TextStyle(color: Colors.black87, fontSize: 28,fontWeight:FontWeight.w700),),
            ),

SingleChildScrollView(
              child: Container(
                padding: EdgeInsets.only(top: 365, left: 30, right: 30),
                child: Column(
                  children: [
                    TextField(
                      decoration: InputDecoration(
                          fillColor: Colors.grey.shade100,
                          filled: true,
                          hintText: "Email adress or username",
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8))),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    TextField(
                      obscureText: true,

///hidden password

decoration: InputDecoration(
                          fillColor: Colors.grey.shade100,
                          filled: true,
                          hintText: "Password",
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8))),
                    ),

TextButton(onPressed: (){
                      Navigator.pushNamed(context, 'forgot');
                    }, child: Text("Forgot Password",style: TextStyle(fontSize: 16,decoration: TextDecoration.underline))),
                    SizedBox(height: 20,),
                    Container( 
                      height: 45,
                      width: 120,
                      
                      child: 
                        ElevatedButton(
                        
                          onPressed: (){
                            Navigator.pushNamed(context, 'logined');
                          }, child: Text("Login",style: TextStyle(fontSize: 20,color: Colors.black,),))
                    
                    ),
                
Container(
  padding: EdgeInsets.all(10.0),
  child: Row(
                 children: [
                        Text("Doen't have an account",style: TextStyle(fontSize: 15,),),
                        TextButton(onPressed: (){
                          Navigator.pushNamed(context, 'register');
                        }, child: Text("Register Now",style: TextStyle(fontSize: 18,decoration: TextDecoration.underline,),)),
                      ],

),
  
) 
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

place the following codes on your register.dart file
I have also defined onpressed button property for register button erase that or you can make your own page of same routes name

import 'package:flutter/material.dart';

class Register extends StatefulWidget {
  const Register({Key? key}) : super(key: key);

@override
  _RegisterState createState() => _RegisterState();
}

class _RegisterState extends State<Register> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Niranjan Portal",
      home: Scaffold(
        backgroundColor: Colors.transparent,
        body: Container(
          padding: EdgeInsets.all(1),
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/image/register.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: ListView(
            children: <Widget>[
              //1st container
              Container(
                padding: EdgeInsets.only(left: 75, top: 40),
                child: Text(
                  "Niranjan Portal",
                  style: TextStyle(
                      color: Colors.black87,
                      fontSize: 28,
                      fontWeight: FontWeight.w700),
                ),
              ),
              SizedBox(
                height: 120,
              ),
              //2nd container
              Container(
                padding: EdgeInsets.only(
                  left: 80,
                ),
                child: Text(
                  'Create New Account',
                  style: TextStyle(
                    color: Colors.lightBlueAccent.shade700,
                    fontWeight: FontWeight.bold,
                    fontSize: 20,
                  ),
                ),
              ),
//3rd container

Container(
  padding: EdgeInsets.only(left: 30,right: 30,top: 30,),
  child:       TextField(
                      decoration: InputDecoration(
                          fillColor: Colors.grey.shade100,
                          filled: true,
                          hintText: "Email adress or username",
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(8))),
                    ),
),

//4th container
Container(
  padding: EdgeInsets.only(left:30, right: 30, top: 20 ),
  child: TextField(
    decoration: InputDecoration(
      fillColor: Colors.grey.shade100,
      filled: true,
      hintText: 'Email adress',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8)
      )
    ),
  ),
),

//5th container

Container(
  padding: EdgeInsets.only(left:30, right: 30, top: 20 ),
  child: TextField(
    decoration: InputDecoration(
      fillColor: Colors.grey.shade100,
      filled: true,
      hintText: 'Create a Password',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8)
      )
    ),
  ),
),

//6th container

Container(
  padding: EdgeInsets.only(left:30, right: 30, top: 20 ),
  child: TextField(
    obscureText: true,
    decoration: InputDecoration(
      fillColor: Colors.grey.shade100,
      filled: true,
      hintText: 'confirm your password',
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8)
      )
    ),
  ),
),

//7th container
Container(
  height: 60,
  width: 50,
  padding: EdgeInsets.only(left:30, right: 30, top: 20 ),
  child: ElevatedButton(onPressed: (){
    Navigator.pushNamed(context, 'registered');
  }, child: Text(
    "Register",
  )),

Container(
  padding: EdgeInsets.only(left: 75,top: 10,),
  child: Row(
                 children: [
                        Text("Already have an account ?",style: TextStyle(fontSize: 15,),),
                        TextButton(onPressed: (){
                          Navigator.pushNamed(context, 'login');
                        }, child: Text("LOGIN",style: TextStyle(fontSize: 18,decoration: TextDecoration.underline),)),
                      ],

),
  
)

]

),
        ),
      ),
    );
  }
}

boom you are done and consider supporting us on YouTube
clicking YouTube icon on top of this page or at bottom in the footer section it would help a lot

Flutter Login/Sign Up UI create easily Sample code included

boom you are done and consider supporting us on YouTube
clicking YouTube icon on top of this page or at bottom in the footer section it would help a lot

Comments

Labels

Popular Posts

Creating Responsive Simple Login Page With credentials Validation Using PHP backend

Flutter Login/Sign Up UI create easily Sample code included

Creating Facebook Clone Site Using Html CSS PHP HTML CSS PHP TUTORIAL

About Me

Translate

search blog monthly

Contact Form

Flutter Login/Sign Up UI create easily Sample code included

boom you are done and consider supporting us on YouTube clicking YouTube icon on top of this page or at bottom in the footer section it would help a lot

Comments

Labels

Popular Posts

Creating Responsive Simple Login Page With credentials Validation Using PHP backend

Flutter Login/Sign Up UI create easily Sample code included

Creating Facebook Clone Site Using Html CSS PHP HTML CSS PHP TUTORIAL

About Me

Translate

search blog monthly

Contact Form

boom you are done and consider supporting us on YouTube
clicking YouTube icon on top of this page or at bottom in the footer section it would help a lot