Design a elegant Mobile UI for Login and Signup in Flutter Android and IOS

 OverView

In this article we design a login and signup (Sign-in and Register UI) With help of Flutter for cross development in mobile application development era. So Now we define the Step by Step Guide try to more effective way design and some concept define of flutter language/ Mobile Development technology. So below mention the step.

• Create a Project and Install Some Dependency for font.
• Design two widget one is for SignUp/Register UI and another is for Login UI.

 Create the Project and Install Dependency of Google Font

For create the app select desire folder and run cmd or terminal on same folder and type command like below picture.
command like that flutter create project_name

After the Project Create Successfully Result as below image.

And Now we install the dependency so command like that and after it's success image like that.
Command Like flutter pub add google_fonts

 Design the UI

Now we define the UI and Use it. below is code follow.

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.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,
         foregroundColor: Colors.transparent,
          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>[
              TextButton(
                onPressed: () => changeState(),
                child: Text(
                  'SIGN IN',
                  style: GoogleFonts.varela(
                      color: signin == true ? Colors.blue : Colors.grey,
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
              TextButton(
                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,
        ),
        TextButton(
          onPressed: () {},
          child: Text(
            'SIGN IN',
            style: GoogleFonts.varelaRound(
                color: Colors.green, fontWeight: FontWeight.bold),
          ),
        ),
        Divider(
          thickness: 1.2,
          color: Colors.grey,
        ),
        TextButton(
          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',
          ),
        ),
        TextButton(
          onPressed: () {},
          child: Text(
            'SIGN UP',
            style: GoogleFonts.varelaRound(
                color: Colors.green, fontWeight: FontWeight.bold),
          ),
        ),
        Divider(
          thickness: 1.2,
          color: Colors.grey,
        ),
        TextButton(
          onPressed: () {},
          child: Text(
            'CANCEL',
            style: GoogleFonts.varelaRound(
                color: Colors.red, fontWeight: FontWeight.bold),
          ),
        ),
      ],
    );
  }
}

 Output Window

After successfully installation of application into mobile app. Model UI sign and sing up working like a button.