How to Create a Login Screen in Flutter?

May 12, 2022

.

Admin

How to Create a Login Screen in Flutter?

Hi friends,

If you need to see example of How to Create a login Screen in Flutter. you will learn login screen in flutter example. I’m going to show you about how to make a login page in flutter. step by step explain Flutter Login/Sign-up Screen - Example. Alright, let’s dive into the steps.

you can see how to create login screen in flutter desktop

I will give you simple Example of how to create login screen in flutter app

So let's see bellow example:

Step 1: Create Flutter Project


Follow along with the setup, you will be creating an Flutter app.

$flutter create flutter_login_screen_example

Navigate to the project directory:

$cd flutter_login_screen_example

Step 2: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

static const String _title = 'Login Screen Example';

@override

Widget build(BuildContext context) {

return MaterialApp(

title: _title,

home: Scaffold(

appBar: AppBar(title: const Text(_title),backgroundColor: Colors.red),

body: const MyStatefulWidget(),

),

);

}

}

class MyStatefulWidget extends StatefulWidget {

const MyStatefulWidget({Key? key}) : super(key: key);

@override

State createState() => _MyStatefulWidgetState();

}

class _MyStatefulWidgetState extends State {

TextEditingController nameController = TextEditingController();

TextEditingController passwordController = TextEditingController();

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.all(10),

child: ListView(

children: [

Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'Hello World',

style: TextStyle(

color: Colors.redAccent,

fontWeight: FontWeight.w500,

fontSize: 30),

)),

Container(

alignment: Alignment.center,

padding: const EdgeInsets.all(10),

child: const Text(

'Log in',

style: TextStyle(fontSize: 20),

)),

Container(

padding: const EdgeInsets.all(10),

child: TextField(

controller: nameController,

decoration: const InputDecoration(

border: OutlineInputBorder(),

labelText: 'User Name or Email',

),

),

),

Container(

padding: const EdgeInsets.fromLTRB(10, 10, 10, 0),

child: TextField(

obscureText: true,

controller: passwordController,

decoration: const InputDecoration(

border: OutlineInputBorder(),

labelText: 'Password',

),

),

),

TextButton(

onPressed: () {

//forgot password screen

},

child: const Text('Forgot Password',

style: TextStyle(

color: Colors.redAccent

),

),

),

Container(

height: 50,

padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),

color: Colors.redAccent,

child: ElevatedButton(

child: const Text(

'Login',

style: TextStyle(

color: Colors.white

),

),

onPressed: () {

print(nameController.text);

print(passwordController.text);

},

)

),

Row(

children: [

const Text('Does not have account?'),

TextButton(

child: const Text(

'Sign in',

style: TextStyle(

fontSize: 20,

color: Colors.redAccent

),

),

onPressed: () {

//signup screen

},

)

],

mainAxisAlignment: MainAxisAlignment.center,

),

],

)

);

}

}

Run this Debug App

Output :

I hope it will help you....

#Flutter