Form Login UI Flutter with VCS

 Form Login UI Flutter with VCS


import 'package:flutter/material.dart';


class Login extends StatefulWidget {

  const Login({Key? key}) : super(key: key);


  @override

  State<Login> createState() => _LoginState();

}


class _LoginState extends State<Login> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      // appBar: AppBar(

      //   title: Text("Selamat Datang"),

      // ),

      body: Container(

        child: Column(

          children: [

            SizedBox(

              height: 40,

            ),

            Image.asset("assets/icon.jpg"),

            Container(

              padding: EdgeInsets.fromLTRB(10, 25, 10, 5),

              alignment: Alignment.center,

              child: Column(

                children: [

                  Text(

                    "Welcome in E-Library",

                    style: TextStyle(fontSize: 18),

                  ),

                  SizedBox(

                    height: 10,

                  ),

                  Text(

                    "Login ",

                    style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold),

                  ),

                ],

              ),

            ),

            Container(

                padding: EdgeInsets.fromLTRB(15, 25, 15, 5),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: [

                    SizedBox(

                      height: 10,

                    ),

                    Text(

                      "Email ",

                      style: TextStyle(fontSize: 18),

                    ),

                    SizedBox(

                      height: 10,

                    ),

                    Container(

                      decoration: BoxDecoration(

                          color: Colors.white,

                          borderRadius: BorderRadius.circular(15),

                          boxShadow: [

                            BoxShadow(

                              blurRadius: 10,

                              color: Colors.black,

                              offset: Offset(0, 5),

                            )

                          ]),

                      child: TextFormField(

                        decoration: InputDecoration(

                          border: InputBorder.none,

                          contentPadding: EdgeInsets.only(top: 14.0),

                          prefixIcon: Icon(

                            Icons.email,

                            color: Colors.black,

                          ),

                          hintText: 'Enter your Email',

                        ),

                      ),

                    ),

                    SizedBox(

                      height: 20,

                    ),

                    Text(

                      "Password ",

                      style: TextStyle(fontSize: 18),

                    ),

                    SizedBox(

                      height: 10,

                    ),

                    Container(

                      decoration: BoxDecoration(

                          color: Colors.white,

                          borderRadius: BorderRadius.circular(15),

                          boxShadow: [

                            BoxShadow(

                              blurRadius: 10,

                              color: Colors.black,

                              offset: Offset(0, 5),

                            )

                          ]),

                      child: TextFormField(

                        decoration: InputDecoration(

                          border: InputBorder.none,

                          contentPadding: EdgeInsets.only(top: 14.0),

                          prefixIcon: Icon(

                            Icons.email,

                            color: Colors.black,

                          ),

                          hintText: 'Enter your Password',

                        ),

                      ),

                    ),

                    SizedBox(

                      height: 15,

                    ),

                    Container(

                        padding: EdgeInsets.fromLTRB(0, 0, 10, 0),

                        alignment: Alignment.bottomRight,

                        child: Column(

                          crossAxisAlignment: CrossAxisAlignment.end,

                          children: [

                            Text("Forgot Password ?"),

                            MaterialButton(

                                onPressed: () {},

                                color: Colors.blue,

                                shape: RoundedRectangleBorder(

                                  borderRadius: BorderRadius.circular(10),

                                ),

                                child: Text("Login",

                                    style: TextStyle(color: Colors.white)))

                          ],

                        )),

                    Container(

                        padding: EdgeInsets.fromLTRB(0, 60, 0, 0),

                        child: Column(

                          children: [

                            Text("Or Login with"),

                            SizedBox(

                              height: 10,

                            ),

                            Row(

                                mainAxisAlignment: MainAxisAlignment.center,

                                children: [

                                  Image.asset("assets/google.png", width: 30),

                                  SizedBox(width: 20),

                                  Image.asset("assets/facebook.png", width: 30),

                                  SizedBox(width: 20),

                                  Image.asset("assets/twitter.png", width: 30),

                                ]),

                          ],

                        ))

                  ],

                ))

          ],

        ),

      ),

    );

  }

}


Komentar

Postingan populer dari blog ini

Prinsip Antar Muka menurut Deborah

Macam - Macam Manipulasi pada IMK

Kebergunaan ( IMK )