• 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 Animated Login In Flutter
  • Flutter
  • Tutorial

Animated Login In Flutter

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

    Animated Login In Flutter :

    This flutter tutorial post is animated login in flutter. That is create using Stack widget, inside the two widget 1) Container() 2) Container(). First Container() widget inside the Carousel slider. Second is Login form created.

    Screenshot :

    Animated Login In Flutter

    Login.dart

    import 'package:flutter/material.dart';
    import 'package:carousel_pro/carousel_pro.dart';
    
    class Login extends StatefulWidget {
      @override
      _LoginState createState() => _LoginState();
    }
    
    class _LoginState extends State<Login> with SingleTickerProviderStateMixin {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: Stack(children: <Widget>[
          Container(
              child: Carousel(
                  boxFit: BoxFit.cover,
                  images: [
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                    AssetImage('images/login_bg_1.png'),
                  ],
                  overlayShadow: true,
                  overlayShadowColors: Colors.white,
                  overlayShadowSize: 0.0,
                  showIndicator: false,
                  animationCurve: Curves.bounceOut,
                  animationDuration: Duration(seconds: 3))),
          Container(
              margin: EdgeInsets.all(25),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        child: Text("Welcome Back!",
                            style: TextStyle(color: Colors.white, fontSize: 30))),
                    Container(
                        child: Text("We give wings to the Student",
                            style: TextStyle(color: Colors.white, fontSize: 14))),
                    SizedBox(height: MediaQuery.of(context).size.height * .05),
                    Container(
                        child: TextField(
                            style: new TextStyle(color: Colors.white),
                            decoration: InputDecoration(
                                enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                hintText: "User Name",
                                hintStyle: TextStyle(
                                    fontSize: 14, color: Color(0xFFB8B8B8)),
                                prefixIcon:
                                    Icon(Icons.person, color: Color(0xFFB8B8B8))))),
                    SizedBox(height: MediaQuery.of(context).size.height * .04),
                    Container(
                        child: TextField(
                            style: new TextStyle(color: Colors.white),
                            decoration: InputDecoration(
                                enabledBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                focusedBorder: UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white)),
                                hintText: "Password",
                                hintStyle: TextStyle(
                                    fontSize: 14, color: Color(0xFFB8B8B8)),
                                prefixIcon: Icon(
                                  Icons.lock,
                                  color: Color(0xFFB8B8B8),
                                )),
                            obscureText: true)),
                    SizedBox(height: MediaQuery.of(context).size.height * .07),
                    Center(
                        child: Container(
                            child: MaterialButton(
                                minWidth: MediaQuery.of(context).size.height * .2,
                                height: MediaQuery.of(context).size.height * .06,
                                color: Color(0xFF3498DB),
                                child: Text("SIGN IN",
                                    style: TextStyle(
                                        fontSize: 18,
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold)),
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(25)),
                                onPressed: () {})))
                  ]))
        ]));
      }
    }
    

    Main.dart

    import 'package:flutter/material.dart';
    import 'Login.dart';
    
    main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(home: Login());
      }
    }
    

    pubspec.yaml

    name: animatedlogin
    description: A new Flutter application.
    version: 1.0.0+1
    
    environment:
      sdk: ">=2.1.0 <3.0.0"
    
    dependencies:
      flutter:
        sdk: flutter
    
      cupertino_icons: ^0.1.2
      carousel_pro:
    
    dev_dependencies:
      flutter_test:
        sdk: flutter
    
    flutter:
      uses-material-design: true
    
      assets:
        - images/

    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 articleGrouped ListView In Flutter
      Next articleCustom Bottom Bar 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.