• Home
  • Introduction
  • Installation
  • Portfolio
  • Tutorial
    • Flutter
    • Dart
    • Android
    • Java
    • J2EE
    • Kotlin
    • Jetpack Compose
    • Interview Questions
  • Contact Us
Search
Flutter Tutorial
  • Home
  • Introduction
  • Installation
  • Portfolio
  • Tutorial
    • Flutter
    • Dart
    • Android
    • Java
    • J2EE
    • Kotlin
    • Jetpack Compose
    • Interview Questions
  • Contact Us
Home Flutter Login UI In Flutter
  • Flutter
  • Tutorial

Login UI In Flutter

January 21, 2020
WhatsApp
Facebook
Google+
Pinterest
Telegram
Twitter
ReddIt
Email
Print
Tumblr
StumbleUpon
VK
Digg
LINE
Viber

    Login UI In Flutter :

    Login UI In Flutter : if you want to create beautiful login ui in flutter so this flutter tutorial is for you.basic requirement is you must have the basic knowledge of flutter.Now we are starting the tutorial how to create the login ui in flutter.

    for create the login ui in flutter you must import the material class of flutter.for design of login ui you need textfield and the button.you can decorate it if you want.

    first open your android studio and create a new flutter project.give it name as login ui in flutter.the default folders are generated automatically.the list of default falders are given below

    Android: where the android related files are stored

    ios : where ios related files are stored

    lib : this folder contains the all flutter files which used in flutter project.flutter used dart in backend. so the extention of the file is .dart.the main.dart file is the main entry point of any flutter project.

    test :where you can put the test unit for testing the app

    pubspec.yaml : this file contains the dependencies,assets like fonts,icons etcwhich is used in your flutter project

    the basic root directory contains the above mentioned folders

    the output or the result of login ui in flutter is given below

    after import material.dart file for create the lable user name and password we use the lable widget.you can styling the fonts if you want.same as for the textfield. you can apply border radius if you want.

    dependencies:
    polygon_clipper:

    Screenshot :

    Login UI In Flutter

    Login UI.dart

    import 'dart:math' as math;
    import 'package:flutter/material.dart';
    import 'package:flutter/services.dart';
    import 'package:polygon_clipper/polygon_border.dart';
    import 'package:polygon_clipper/polygon_clipper.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        SystemChrome.setPreferredOrientations([
          DeviceOrientation.portraitUp,
          DeviceOrientation.portraitDown,
        ]);
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
              primarySwatch: Colors.yellow, primaryColor: Color(0XFFffdd00)),
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key}) : super(key: key);
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
      final double topPolygonSize = 270;
      final double curvedBackgroundRadius = 100;
      final double curvedBackgroundTopPosition = 80;
      final double curvedBackgroundAngle = 31;
      double curvedBackgroundLeftPosition;
      bool isLogin = true;
    
      AnimationController _logoController;
      AnimationController _formController;
      AnimationController _formButtonController;
    
      Animation _logoSlideAnimation;
      Animation _formOpacityAnimation;
      Animation _buttonSlideAnimation;
    
      @override
      void initState() {
        super.initState();
        curvedBackgroundLeftPosition =
            (math.sqrt(math.pow(100, 2) + math.pow(100, 2))) -
                curvedBackgroundRadius;
    
        _logoController = AnimationController(
            vsync: this, duration: const Duration(milliseconds: 1000));
        _formController = AnimationController(
            vsync: this, duration: const Duration(milliseconds: 1000));
        _formButtonController = AnimationController(
            vsync: this, duration: const Duration(milliseconds: 1000));
    
        _logoSlideAnimation = Tween<double>(begin: -1.0, end: 0.0).animate(
            CurvedAnimation(
                parent: _logoController,
                curve: Interval(0, 1.0, curve: Curves.easeIn)));
    
        _formOpacityAnimation =
            CurvedAnimation(parent: _formController, curve: Curves.easeIn);
    
        _buttonSlideAnimation = Tween<double>(begin: 1.5, end: 0.0).animate(
            CurvedAnimation(
                parent: _formButtonController,
                curve: Interval(0, 1.0, curve: Curves.easeIn)));
    
        _logoController
          ..addStatusListener((status) {
            if (status == AnimationStatus.completed) {
              _formController.forward();
            }
          })
          ..forward();
    
        _formController.addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            _formButtonController.forward();
          }
        });
      }
    
      @override
      void dispose() {
        super.dispose();
        _logoController.dispose();
        _formController.dispose();
        _formButtonController.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Color(0XFF313131),
            body: Form(
                child: Stack(children: <Widget>[
              _curvedBackContainer(
                  Color(0XFF2a2a2a),
                  curvedBackgroundTopPosition - 10,
                  curvedBackgroundLeftPosition - 2),
              _curvedBackContainer(Color(0XFF232323), curvedBackgroundTopPosition,
                  curvedBackgroundLeftPosition),
              _backgroundContainer(),
              _buildTopPolygon(),
              _buildLogoText(),
              SingleChildScrollView(
                  child: Container(
                padding: EdgeInsets.only(top: 200, left: 40, right: 40),
                child: _buildFormContent(),
              ))
            ])));
      }
    
      _buildTopPolygon() {
        return Positioned(
            top: -1 * (25 / 100 * topPolygonSize),
            right: -1 * (23 / 100 * topPolygonSize),
            child: Container(
                height: topPolygonSize,
                width: topPolygonSize,
                child: ClipPolygon(
                    sides: 6,
                    borderRadius: 10,
                    child: Container(
                      color: Color(0XFFFFDD00),
                    ))));
      }
    
      _buildLogoText() {
        return Positioned(
            top: 30 / 100 * topPolygonSize,
            right: 22 / 100 * topPolygonSize,
            child: AnimatedBuilder(
                animation: _logoSlideAnimation,
                builder: (context, child) {
                  return Transform(
                      transform: Matrix4.translationValues(
                          0, _logoSlideAnimation.value * 100, 0),
                      child: Text(
                        'LOGO',
                        style: TextStyle(fontSize: 37, fontWeight: FontWeight.bold),
                      ));
                }));
      }
    
      _curvedBackContainer(Color color, double topPosition, double leftPosition) {
        double deviceWidth = MediaQuery.of(context).size.width;
        return Positioned(
            top: topPosition,
            left: leftPosition,
            child: Transform.rotate(
                angle: _degreesToRadian(curvedBackgroundAngle),
                alignment: FractionalOffset.topLeft,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius:
                        BorderRadius.all(Radius.circular(curvedBackgroundRadius)),
                    color: color,
                  ),
                  width: deviceWidth /
                      math.cos(_degreesToRadian(curvedBackgroundAngle)),
                  //width:  MediaQuery.of(context).size.width,
                  height: math
                      .sqrt(math.pow(deviceWidth, 2) + math.pow(deviceWidth, 2)),
                )));
      }
    
      _backgroundContainer() {
        double deviceWidth = MediaQuery.of(context).size.width;
        double backgroundTopMargin = curvedBackgroundTopPosition +
            (deviceWidth * math.tan(_degreesToRadian(curvedBackgroundAngle)));
        return Padding(
            padding: EdgeInsets.only(top: backgroundTopMargin),
            child: Container(
              color: Color(0XFF232323),
            ));
      }
    
      _buildFormContent() {
        return Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
              _buildAuthNavigation(),
              SizedBox(
                height: 50,
              ),
              _buildFormFields(),
              SizedBox(
                height: 40,
              ),
              _buildFormButton()
            ]));
      }
    
      _buildFormFields() {
        return FadeTransition(
            opacity: _formOpacityAnimation,
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  if (!isLogin)
                    Column(
                      children: <Widget>[
                        _buildTextField(labelText: 'Fullname'),
                        _buildTextField(labelText: 'Username'),
                      ],
                    ),
                  _buildTextField(labelText: 'Email or Username'),
                  _buildTextField(
                      labelText: 'Password',
                      obscureText: true,
                      suffixIcon: Icon(
                        Icons.remove_red_eye,
                        color: Colors.white,
                        size: 17,
                      )),
                  SizedBox(
                    height: 10,
                  ),
                  if (isLogin)
                    Text(
                      'Forget pass',
                      style: TextStyle(color: Color(0XFFFFDD00)),
                    )
                ]));
      }
    
      _buildAuthNavigation() {
        return Row(children: <Widget>[
          Text(
            (isLogin) ? 'LOGIN' : 'Sign up',
            style: TextStyle(color: Colors.white, fontSize: 30),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 8.0, right: 4.0),
            child: Text(
              '/',
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
          GestureDetector(
              child: Text(
                (isLogin) ? 'Sign up' : 'LOGIN',
                style: TextStyle(color: Colors.white, fontSize: 20),
              ),
              onTap: () {
                _formController.reset();
                _formButtonController.reset();
                _formController.forward();
                setState(() {
                  isLogin = !isLogin;
                });
              })
        ]);
      }
    
      _buildTextField(
          {String labelText, bool obscureText = false, Icon suffixIcon}) {
        return Padding(
            padding: const EdgeInsets.only(top: 12.0),
            child: TextFormField(
              style: TextStyle(color: Colors.white),
              decoration: InputDecoration(
                  labelText: labelText,
                  labelStyle: TextStyle(color: Color(0XFF9a9a9a)),
                  enabledBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: Colors.grey)),
                  suffixIcon: suffixIcon),
              obscureText: obscureText,
            ));
      }
    
      _buildFormButton() {
        double buttonWidth = 100;
        return AnimatedBuilder(
            animation: _buttonSlideAnimation,
            builder: (context, child) {
              return Transform(
                  transform: Matrix4.translationValues(
                      _buttonSlideAnimation.value * 100.0, 0, 0),
                  child: Container(
                      height: buttonWidth,
                      width: buttonWidth,
                      child: FittedBox(
                          fit: BoxFit.cover,
                          child: FloatingActionButton(
                            backgroundColor: Color(0XFFFFDD00),
                            shape: PolygonBorder(
                              sides: 6,
                              borderRadius: 10.0,
                            ),
                            child: Icon(Icons.arrow_forward),
                            onPressed: () {},
                          ))));
            });
      }
    
      double _degreesToRadian(double degrees) {
        return degrees * math.pi / 180;
      }
    }
    

    The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

    For more information about Flutter. visit www.fluttertutorial.in

    WhatsApp
    Facebook
    Google+
    Pinterest
    Telegram
    Twitter
    ReddIt
    Email
    Print
    Tumblr
    StumbleUpon
    VK
    Digg
    LINE
    Viber
      Previous articleBottom Navigation PageView In Flutter
      Next articleFruit Shop UI In Flutter
      admin

      RELATED ARTICLESMORE FROM AUTHOR

      How to Create Flutter Plugin

      How to Create Flutter Plugin 2021

      Flutter Json Dynamic Key Using model class

      Flutter Event bus utils

      Search

      Subscribe to get letest updates

      Loading
      ABOUT US
      www.fluttertutorial.in is the website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin Etc...with the help of this languages that help you to develop the beautiful mobile application.
      • Privacy Policy
      • Contact Us
      • About Us
      © Copyright 2022- www.fluttertutorial.in
      MORE STORIES

      Customer Service UI

      April 13, 2022
      Dart Interview Questions

      Dart Interview Questions

      April 13, 2022
      How to Create Flutter Plugin

      How to Create Flutter Plugin 2021

      December 30, 2021
      Edit with Live CSS
      Save
      Write CSS OR LESS and hit save. CTRL + SPACE for auto-complete.