Flutter Basic Form | Flutter Basic Widget


Hi, In this Flutter tutorial we are going to learn how to make simple form in flutter by TextWidget, TextFieldRaisedButton, FlatButton.



import 'package:flutter/material.dart';


void main() {

  runApp(new MaterialApp(home: new Login()));

}

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}


class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "LoginPage",
      theme: ThemeData(
        primarySwatch: Colors.lightBlue
        ), 

      home: Scaffold(
        backgroundColor: Colors.lightBlueAccent,
        resizeToAvoidBottomPadding: false,
        appBar: AppBar(
          title: Text(
            "LoginPage"),
        ),

        body: Center(
         child: Column(
            children: <Widget>[

                Container(
                  child: Text("Welcom to Flutter",
                  style: new TextStyle(
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                  ),
                  ),
                  margin: EdgeInsets.only(top: 10.0),
                ),

                Container(
                  margin: EdgeInsets.only(top: 5.0,right: 25.0 ),
                  child: FlutterLogo(
                    size: 100,
                  )),

                Container(  
                  margin: EdgeInsets.only(top: 20.0,right: 90.0),
                  child: Text(
                    "Log in to your account",
                    style: new TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 15.0,
                    ),
                    ),
                ),

                Container(
                  height: 40.0,
                  width: 250.0,
                  margin: EdgeInsets.only(top: 10.0),
                  child: TextField(               
                    decoration: InputDecoration(
                      labelText: "User Name",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),



                Container(
                  height: 40.0,
                  width: 250.0,
                  margin: EdgeInsets.only(top: 10.0),
                  child: TextField(               
                    decoration: InputDecoration(
                      labelText: "Password",
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),


                Container(
                   height: 40.0,
                  width: 250.0,
                  margin: EdgeInsets.only(top: 40.0,),
                  child: RaisedButton(
                    shape: OutlineInputBorder(),
                    color: Colors.blue,
                    onPressed: (){},
                    child: Text("Login"),
                    ),
                ),



                Container(
                  child: Text("______________________or______________________",
                  style: new TextStyle(
                  ),
                  ),
                  margin: EdgeInsets.only(top: 10.0),
                ),



                Container(
                  height: 30.0,
                  margin: EdgeInsets.only(top: 10.0),
                  child: RaisedButton(onPressed: (){},
                  color: Colors.green,
                  child: Text("Create New Account"),
                  ),
                ),


                Container(
                  child: FlatButton(onPressed: (){},
                  child: Text("Forgotton Password?"),
                  ),
                ),
            ],
          ),
        ),
      ),   
    );
  }
}

Comments

Popular posts from this blog

Auto slide image with indicator in flutter

Flutter Architecture | Flutter - Architecture Application

Automatic Scrolling Image in flutter