Scribd Logo
Upload

Welcome to Scribd!

  • Flutter Login/Sign-up Screen - Example

    Uploaded by

    shahwar
    102 views4 pages
    The document describes building a login screen in Flutter. It includes a company name, sign in text, text fields for username and password, flat buttons for forgot password and login, and a sign up button. The code sample provided constructs this login screen with various Flutter widgets like Text, TextField, FlatButton, and RaisedButton laid out in a Scaffold with a ListView.

    Original Description:

    login screen in flutter dart

    Original Title

    flutter-login-screen

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes building a login screen in Flutter. It includes a company name, sign in text, text fields for username and password, flat buttons for forgot password and login, and a sign up button. The code sample provided constructs this login screen with various Flutter widgets like Text, TextField, FlatButton, and RaisedButton laid out in a Scaffold with a ListView.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    102 views4 pages

    Flutter Login/Sign-up Screen - Example

    Uploaded by

    shahwar
    The document describes building a login screen in Flutter. It includes a company name, sign in text, text fields for username and password, flat buttons for forgot password and login, and a sign up button. The code sample provided constructs this login screen with various Flutter widgets like Text, TextField, FlatButton, and RaisedButton laid out in a Scaffold with a ListView.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    Flutter Login/Sign-up Screen – Example

    Flutter Login Screen

    In this tutorial, we will learn how to build a Login screen using Flutter widgets.

    The login screen we are going to build here is simple in its visual aspects. First there is a widget for the
    company/organization/app name. Then about the screen itself, Sign in. Now, we have two text fields, user name
    and password, to get login/sign-in credentials from user. Then we have a FlatButton for the Forgot Password.
    After that, there is the Login button. If the user does not have an account, there should be a provision for the
    Sign-up process, hence a Sign-up FlatButton.

    Following is the contents of main.dart file. If you create a basic Flutter application and replace the contents of
    main.dart with the following file, you should see UI as shown in the screenshot attached after this code.

    main.dart

    import 'package:flutter/material.dart';

    void main() {
    runApp(MaterialApp(
    home: MyApp(),
    ));
    }

    class MyApp extends StatefulWidget {


    @override
    _State createState() => _State();
    }

    class _State extends State<MyApp> {


    TextEditingController nameController = TextEditingController();
    TextEditingController passwordController = TextEditingController();

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
    title: Text('Sample App'),
    ),
    body: Padding(
    padding: EdgeInsets.all(10),
    child: ListView(
    children: <Widget>[
    Container(
    alignment: Alignment.center,
    padding: EdgeInsets.all(10),
    child: Text(
    child: Text(
    'TutorialKart',
    style: TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.w500,
    fontSize: 30),
    )),
    Container(
    alignment: Alignment.center,
    padding: EdgeInsets.all(10),
    child: Text(
    'Sign in',
    style: TextStyle(fontSize: 20),
    )),
    Container(
    padding: EdgeInsets.all(10),
    child: TextField(
    controller: nameController,
    decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'User Name',
    ),
    ),
    ),
    Container(
    padding: EdgeInsets.fromLTRB(10, 10, 10, 0),
    child: TextField(
    obscureText: true,
    controller: passwordController,
    decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Password',
    ),
    ),
    ),
    FlatButton(
    onPressed: (){
    //forgot password screen
    },
    textColor: Colors.blue,
    child: Text('Forgot Password'),
    ),
    Container(
    height: 50,
    padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
    child: RaisedButton(
    textColor: Colors.white,
    color: Colors.blue,
    child: Text('Login'),
    onPressed: () {
    print(nameController.text);
    print(passwordController.text);
    },
    )),
    Container(
    child: Row(
    children: <Widget>[
    Text('Does not have account?'),
    FlatButton(
    textColor: Colors.blue,
    child: Text(
    'Sign in',
    style: TextStyle(fontSize: 20),
    style: TextStyle(fontSize: 20),
    ),
    onPressed: () {
    //signup screen
    },
    )
    ],
    mainAxisAlignment: MainAxisAlignment.center,
    ))
    ],
    )));
    }
    }

    Following is an Android UI screenshot when you run this application on an Emulator.

    Conclusion

    This is a very simple Flutter Application, demonstrating the Login or Sign in screen. Most of the widgets used
    like Text and FlatButton are surrounded in Container widgets. You may change the colors, padding, margin or
    backgrounds, to suit the theme of your application.
    Flutter Tutorial

    ✦ Flutter Tutorial

    ✦ Flutter - Install on Linux - Ubuntu

    ✦ Flutter - Basic Application Example

    Flutter Widgets

    ✦ Flutter Text

    ✦ Flutter TextField

    ✦ Flutter FlatButton

    ✦ Flutter RaisedButton

    ✦ Flutter SnackBar

    ✦ Flutter Switch

    ✦ Flutter ToggleButtons

    ✦ Flutter Table

    ✦ Flutter DataTable

    ✦ Flutter Tooltip

    ✦ Flutter TabBar & TabBarView

    Flutter Animation

    ✦ Flutter Animation Basic Example

    ✦ Flutter Animate Color

    Flutter Packages

    ✦ Flutter sqflite - SQLite Tutorial

    Flutter Examples

    ➩ Flutter Login Screen Sample

    You might also like