Recent Post

6/recent/ticker-posts

How to design login and Signup or Register Page in flutter Android || Programmer hubs just for programmer||Programmer Rohit Sharma

 Today I'm discuss about the a very important topic for Android development that topic is :-

How to design login and Signup or Register Page in flutter Android || Programmer hubs just for programmer||Programmer Rohit Sharma

Let’s start open the vscode and create a Project

1.    Add some dependency pubsec.yaml

google_fonts^1.0.0

  http^0.12.2

 

Now open main.dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';]
import 'package:my_coaching/widget.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: appBar(context),
          elevation: 0.0,
          brightness: Brightness.light,
          backgroundColor: Colors.white10,
        ),
        body: SafeArea(
          child: HomePage(),
        ),
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool signin = true;
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Column(
          children: <Widget>[
            Icon(
              Icons.account_circle,
              size: 50.0,
              color: Colors.lightBlue,
            ),
            boxUi(),
           ],
        ),
      ),
    );
  }
//that method for changing state for float button activity
  void changeState() {
    if (signin) {
      setState(() {
        signin = false;
      });
    } else {
      setState(() {
        signin = true;
      });
    }
  }

  Widget boxUi() {
    return Card(
      elevation: 10.0,
      margin: EdgeInsets.all(10.0),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              FlatButton(
                onPressed: () => changeState(),
                child: Text(
                  'SIGN IN',
                  style: GoogleFonts.varela(
                      color: signin == true ? Colors.blue : Colors.grey,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
              FlatButton(
                onPressed: () => changeState(),
                child: Text(
                  'SIGN UP',
                  style: GoogleFonts.varela(
                      color: signin != true ? Colors.blue : Colors.grey,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
            ],
          ),
          signin == true ? signinUI() : singupUI(),//segment check for condition
        ],
      ),
    );
  }

  Widget signinUI() {
    return Column(
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.account_box),
            hintText: 'Enter Email',
            labelText: 'E-mail',
          ),
        ),
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.account_box),
            hintText: 'Enter Pass',
            labelText: 'Password',
          ),
          keyboardType: TextInputType.visiblePassword,
        ),
        FlatButton(
          onPressed: () {},
          child: Text(
            'SIGN IN',
            style: GoogleFonts.varelaRound(
                color: Colors.green, fontWeight: FontWeight.bold),
          ),
        ),
        Divider(
          thickness: 1.2,
          color: Colors.grey,
        ),
        FlatButton(
          onPressed: () {},
          child: Text(
            'CANCEL',
            style: GoogleFonts.varelaRound(
                color: Colors.red, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    );
  }

  Widget singupUI() {
    return Column(
      mainAxisSize: MainAxisSize.max,
      verticalDirection: VerticalDirection.down,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.text_fields),
            hintText: 'Enter Name',
            labelText: 'Name',
          ),
        ),
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.account_box),
            hintText: 'Enter Email',
            labelText: 'E-mail',
          ),
        ),
        TextField(
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.lock),
            hintText: 'Enter Pass',
            labelText: 'Password',
          ),
        ),
        FlatButton(
          onPressed: () {},
          child: Text(
            'SIGN UP',
            style: GoogleFonts.varelaRound(
                color: Colors.green, fontWeight: FontWeight.bold),
          ),
        ),
        Divider(
          thickness: 1.2,
          color: Colors.grey,
        ),
        FlatButton(
          onPressed: () {},
          child: Text(
            'CANCEL',
            style: GoogleFonts.varelaRound(
                color: Colors.red, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    );
  }
}


Output Here:-

Post a Comment

0 Comments