Want to Watch Full Video?





Step 1:

Create new dart file and give name as registration page.

import 'package:flutter/material.dart';
import 'package:fab_circular_menu/fab_circular_menu.dart';

//i am going to call this myapp1 class in main file

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Registration Screen",
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
  String name,email,pass;
  @override
  Widget build(BuildContext context) {
    double height=MediaQuery.of(context).size.height;
    double width=MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text("Registration Page"),
        backgroundColor: Colors.black,
      ),
      body: Container(
        decoration: new BoxDecoration(
          color: Colors.black,
          image: new DecorationImage(
            fit: BoxFit.cover,
            colorFilter: new ColorFilter.mode(Colors.grey.withOpacity(.5),BlendMode.dstATop),
            image: new AssetImage(
              "asset/bg0.jpg"
            ),
          ),
        ),
        height: height,
        width: width,
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Join Us Now",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  fontFamily: "DancingScript",
                  fontWeight: FontWeight.bold,
                ),
              ),
              TextField(

                onChanged: (val){
                  name=val;
                },
                cursorColor: Colors.black,
                style: TextStyle(
                  height: 1
                ),
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Colors.grey[500],
                  prefixIcon: Icon(Icons.edit,color: Colors.red[700],),
                  hintStyle: TextStyle(
                    color:Colors.black,
                  ),
                  hintText: "Enter your Name",
                ),
              ),
              SizedBox(
                height: 10,
              ),
              TextField(
                onChanged: (val){
                  email=val;
                },
                cursorColor: Colors.black,
                style: TextStyle(
                  height: 1,
                ),
                decoration: InputDecoration(
                  fillColor: Colors.grey,
                  filled: true,
                  prefixIcon: Icon(Icons.email,color: Colors.red[700],
                  ),
                  hintText: "Enter Your Email",
                  hintStyle: TextStyle(
                    color: Colors.black,
                  ),
                ),
              ),
              SizedBox(
                height: 10,
              ),
              TextField(
                onChanged: (val){
                  pass=val;
                },
                cursorColor: Colors.black,
                obscureText: true,
                style: TextStyle(
                  height: 1,
                ),
                decoration: InputDecoration(
                  filled: true,
                  fillColor: Colors.grey[500],
                  prefixIcon: Icon(Icons.https,color: Colors.red[700],),
                  hintStyle: TextStyle(
                    color: Colors.black,
                  ),
                  hintText: "Enter Your Password",
                )
              ),
              SizedBox(
                height: 10,
              ),
              ButtonTheme(
                height: 50,
                minWidth: width-10,
                child: RaisedButton.icon(
                    onPressed: (){
                    },
                    icon: Icon(Icons.save_alt,color: Colors.red,),
                    label: Text("Register"),
                  color: Colors.black,
                  textColor: Colors.white,
                  splashColor: Colors.red[700],
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FabCircularMenu(
        fabColor: Colors.red[700],
        fabSize: 50,
        ringColor: Colors.black12,
        ringDiameter: 300,
        ringWidth: 90,
        fabOpenColor: Colors.white,
        children: [
          IconButton(
            icon: Icon(Icons.search,
              color: Colors.white,
            ),
            onPressed: (){

            },
          ),
          IconButton(
            onPressed: (){},
            icon: Icon(Icons.category,
              color: Colors.white,
            ),
          ),
          IconButton(
            //do something on button Press ????? Do it on this onpress
            onPressed: (){},
            icon: Icon(Icons.headset,color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}

Step 2:

Paste code to main.dart.

import 'package:flutter/material.dart';

import 'package:sqlite_database_tutorial/RegistrationPage.dart';

void main() {}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      //press alt+enter to import library

      home: MyApp1()

    );

  }

}

OUTPUT:

Related Articles

Saving Money Without Sacrificing Qual…
The Ultimate Guide to Cloud Gaming: D…
دليلك لإتقان فن الكل…