Skip to content

Mr.WhoTheEngineer




Menu
  • Home
  • Programming
    • Flutter Examples
    • Flutter Issues
  • Technology
    • SmartPhones
    • tech news
    • Android
    • Android games
  • News
  • Affiliate Marketing
  • Top 10
  • How to
HomeProgrammingFlutter ExamplesHow to create Login form in flutter – Mr.WhoTheEngineer
May 23, 2020

How to create Login form in flutter – Mr.WhoTheEngineer

Flutter login form example

In this post, we will learn how to design Login Form in Flutter.This post show only UI.

1)main.dart

It is our main.dart file.This file is root of our application.

import 'package:blogpractice/loginForm.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Login Form',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Login(),
    );
  }
}

2)loginForm.dart

It is our loginForm.dart file.This file contains all our login form implementation.

import 'package:flutter/material.dart';

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

class _LoginState extends State<Login> {

  TextEditingController _passwordController = new TextEditingController();
  TextEditingController _emailController = new TextEditingController();
  TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0,);

  @override
  Widget build(BuildContext context) {

    final emailField = TextFormField(                                            //emailField
      keyboardType: TextInputType.emailAddress,
      autofocus: false,
      controller: _emailController,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          hintText: "Email",
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(20.0))),
    );

    final passwordField = TextFormField(                                         //passwordField
      autofocus: false,
      controller: _passwordController,
      style: style,
      decoration: InputDecoration(
          contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
          hintText: "Password",
          border: OutlineInputBorder(borderRadius:           BorderRadius.circular(20.0))),
    );

    final loginButton = Material(                                               // loginButton
      elevation: 5.0,
      borderRadius: BorderRadius.circular(20.0),
      color: Colors.teal,
      child: MaterialButton(
        minWidth: double.infinity,
        padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
        onPressed: null,
        child: Text("Login",
            textAlign: TextAlign.center,
            style: style.copyWith(
                color: Colors.white, fontWeight: FontWeight.bold)),
      ),
    );

    return Scaffold(
      backgroundColor: Colors.teal,
      body: Center(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15),
              ),
              color: Color(0xffF3F3F3),
              elevation: 5,
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Form(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Center(
                          child: Text(
                        "Your Logo Here",
                        style: TextStyle(
                            color: Colors.black,
                            fontSize: 25,
                        ),
                      )),
                      SizedBox(height: 25.0),
                      emailField,
                      SizedBox(height: 25.0),
                      passwordField,
                      SizedBox(
                        height: 20.0,
                      ),
                      Divider(color: Colors.black),
                      SizedBox(
                        height: 20.0,
                      ),
                      loginButton,
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output:-

Tags:flutter login form example, How to create login form in flutter

Related Posts

Flutter-DatePicker-Example

How to use datepicker in flutter…? – Mr.WhoTheEngieer

How to create android wikipedia app

Some basic programs of Java

About The Author

Rajesh Shirke

Add a Comment

Cancel reply

Your email address will not be published. Required fields are marked *




Recent Posts

  • What is the Amazon Web Services (AWS ) and its feature
  • How to solve Samsung M30s stuck on Samsung logo…?
  • How to create a Login form with auto validation in the flutter

About Me

Hi, I am Rajesh Shirke the founder of Mr.WhoTheEngineer. I started my blogging passion since 14th May 2017. I am writing a blog about tech news, how to make money online, youtube and google Adsense relate news, computer and mobile tips and tricks and much more

Categories

  • Affiliate Marketing (1)
  • Amazon web services (1)
  • Android (1)
  • Android games (1)
  • Flutter Examples (3)
  • Flutter Issues (1)
  • How to (1)
  • News (5)
  • Programming (9)
  • SmartPhones (7)
  • Sports (2)
  • tech news (2)
  • Technology (9)
  • Tips (4)
  • Top 10 (1)

Pages

  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy

Follow Us

© 2021 Mr.WhoTheEngineer | WordPress Theme by Superb Themes
Back to Top ↑