• Home
  • DSA
  • iOS
  • Flutter
  • Android
    • Jetpack
    • Android Tutorials
    • Android development
    • Android Kotlin
  • 5G
  • 4G LTE
    • IoT
  • E-learning
  • Blog
  • Streaming
Wednesday, July 9, 2025
  • Home
  • DSA
  • iOS
  • Flutter
  • Android
    • Jetpack
    • Android Tutorials
    • Android development
    • Android Kotlin
  • 5G
  • 4G LTE
    • IoT
  • E-learning
  • Blog
  • Streaming
subscribe
subscribe to my newsletter!

"Get all latest content delivered straight to your inbox."

[mc4wp_form id="36"]
Codeplayon
Codeplayon
  • Home
  • DSA
  • iOS
  • Flutter
  • Android
    • Jetpack
    • Android Tutorials
    • Android development
    • Android Kotlin
  • 5G
  • 4G LTE
    • IoT
  • E-learning
  • Blog
  • Streaming
HomeFlutter TutorialSimple flutter login screen UI example
Feb. 14, 2020 at 6:44 am
Flutter Tutorial

Simple flutter login screen UI example

5 years agoMay 23, 2022
Simple flutter login screen UI example
4.2kviews

Hi Everyone in this flutter Tutorial I am, sharing a Simple flutter login screen UI example. Build a flutter login screen example and source code.  In this login screen UI design, I am using TextField, FlatButton.

https://www.youtube.com/watch?v=NIBFz4dZy4c

Flutter login screen you can add username, Password, and button. and also add a test for the logo name and signup. this all, for example, I use a flutter widget, for Login screen UI design, Text widget, input widget, button widget also.

Simple flutter login screen UI example

Table of Contents

Toggle
    • Simple flutter login screen UI example
  • Flutter Login Screen UI example Full Souce Code on Github

main.dart file source code.

import "package:flutter/material.dart";
import 'app_example/Login_Screen.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.blue), home: LoginPage());
  }
}

After adding these codes in your main. dart file creates an app_example package in your lib folder. in the app_example package make a dart file with the name Login_Screen.dart. Simple flutter login screen UI example.

Login_Screen.dart File source code.

import 'package:flutter/material.dart';


class LoginPage extends StatefulWidget {

  @override
  State<StatefulWidget> createState() => new _State();
}

class _State extends State<LoginPage> {
  TextEditingController nameController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Login Screen App'),
        ),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: ListView(
              children: <Widget>[
                Container(
                    alignment: Alignment.center,
                    padding: EdgeInsets.all(10),
                    child: Text(
                      'Codeplayon',
                      style: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w500,
                          fontSize: 30),
                    )),
                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),
                          ),
                          onPressed: () {
                            //signup screen
                          },
                        )
                      ],
                      mainAxisAlignment: MainAxisAlignment.center,
                    ))
              ],
            )));
  }
}

after completing, these steps run your app and see a result for the sing-in-screen example. simple and attractive dart sing in design and Simple flutter login screen UI example.

Flutter Login Screen UI example Full Souce Code on Github

 

 

Read More Tutorial 

  • Codeplayon Jetpack Compose Tutorial 
  • Codeplayon Android Tutorial 
  • Codeplayon Flutter Tutorial 
  • Codeplayon on Github
Tags :Build a login UI with FlutterCreating Awesome Login Screen in Flutterflutter login screenflutter login screen tutorialLogin Screen - Flutter Awesomelogin screen flutter tutorialsimple login screen flutter example
share on Facebookshare on Twitter
Shivam MalikFebruary 14, 2020

Shivam Malik

Welcome to my blog! I’m Ritu Malik, and here at Codeplayon.com, we are dedicated to delivering timely and well-researched content. Our passion for knowledge shines through in the diverse range of topics we cover. Over the years, we have explored various niches such as business, finance, technology, marketing, lifestyle, website reviews and many others.
view all posts
Create a Simple Splash Screen with Flutter and Dart
Simple intro slider for Flutter App Example

You Might Also Like

flutter showcase example
Flutter Tutorial

flutter showcase example & flutter showcase package

Shivam Malik
Download csv file and save in downloads folder in flutter
Flutter Tutorial

flutter Download csv file and save in downloads folder

Shivam Malik
How to send multipart file with Flutter
Flutter Tutorial

How to send multipart file with Flutter 2023

Shivam Malik
flutter http get request with parameters example
Flutter Tutorial

flutter http get request with parameters example 2023

Shivam Malik
flutter barcode & QR code scanner example
Flutter Tutorial

flutter barcode & QR code scanner example

Shivam Malik
flutter bar chart example
Flutter Tutorial

flutter bar chart example using syncfusion_flutter_charts

Shivam Malik

Get Even More

"Get all latest content delivered straight to your inbox."
[mc4wp_form id="36"]

latest posts

Blog

Peer Review Checklist for Academic Assignments

Shivam Malik
49
Blog

The Essential Elements of a Secure Web Gateway and Its Role in Modern Business Networks

Shivam Malik
823
Blog

The Art of Crafting SEO Strategies That Stand the Test of Time

Shivam Malik
647
How-SAFe-Product-Owner-&-ITIL-Foundation-Training-Enhance-Agile-Service-Management
Blog

How SAFe® Product Owner and ITIL Foundation Training Enhance Agile Service Management

Shivam Malik
966

find me on socials

Search

Contact Info

Contact information that feels like a warm, friendly smile.

Email:Info.codeplayon@gmail.com
Website:Codeplayon

popular posts

Joinpd.com

How to Join a Pear Deck Session with JoinPD.com Code? 2023 Guide

7 months agoJanuary 8, 2025
rice purity test

What is Rice Purity Test Score Meaning: Check Score [2025]

6 months agoJanuary 3, 2025
Disneyplus.com/begin

How to Activate Disneyplus.com begin account 2025

6 months agoJanuary 5, 2025
Sitemap.Html
  • Peer Review Checklist for Academic Assignments
  • The Essential Elements of a Secure Web Gateway and Its Role in Modern Business Networks
  • The Art of Crafting SEO Strategies That Stand the Test of Time
  • How SAFe® Product Owner and ITIL Foundation Training Enhance Agile Service Management
  • Enhancing Employee Satisfaction Through Efficient Payroll Systems
Codeplayon
  • Privacy Policy

Copyright © 2024 Codeplayon | NewsMozi Sitemap