Starting: 1st of Every Month 
+91 8409492687 
Contact@DevOpsSchool.com
In this blog, I am going to explain how to create a Login Form In flutter using dart Package. So, Before I already create a Project an open “lib/main.dart” in editor and import-
import ‘package:flutter/material.dart’;
After that using stateless widget for title and color. And after that using stateful widget for full functionality and design. In this app, I am using a background image and create a card in a container with the help of InputDecoration I am creating two input sections Like Username & password and create a button like Login. Code Mention below.
| import 'package:flutter/material.dart'; | |
| void main(){ | |
| runApp(myapp()); | |
| } | |
| // stateless widget | |
| class myapp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| title:'Professnow', | |
| theme: ThemeData( | |
| primarySwatch: Colors.blue, | |
| ), | |
| home: MyHomePage(), | |
| ); | |
| } | |
| } | |
| // stateful Widget | |
| class MyHomePage extends StatefulWidget { | |
| @override | |
| _MyHomePageState createState() => _MyHomePageState(); | |
| } | |
| class _MyHomePageState extends State<MyHomePage> { | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| resizeToAvoidBottomPadding: false, | |
| body: Stack( | |
| fit: StackFit.expand, | |
| children: <Widget>[ | |
| Image.asset( | |
| 'assets/images/background.png', | |
| fit: BoxFit.cover, | |
| color: Colors.black54, | |
| colorBlendMode: BlendMode.darken, | |
| ), | |
| Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| Padding( | |
| padding: const EdgeInsets.all(15.0), | |
| child: Image.asset('assets/images/professnow.png', | |
| height: 50, | |
| width: 50, | |
| ), | |
| ), | |
| Stack( | |
| children: <Widget>[ | |
| SingleChildScrollView( | |
| child: Container( | |
| height: 300, | |
| width: 300, | |
| padding: EdgeInsets.symmetric( | |
| horizontal: 30, | |
| vertical: 25, | |
| ), | |
| decoration: BoxDecoration( | |
| color: Colors.white, | |
| borderRadius: BorderRadius.circular(20), | |
| shape: BoxShape.rectangle, | |
| ), | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: <Widget>[ | |
| TextField( | |
| autocorrect: false, | |
| autofocus: false, | |
| style: TextStyle( | |
| fontSize: 18, | |
| ), | |
| decoration: InputDecoration( | |
| hintText: 'Username', | |
| border: InputBorder.none, | |
| filled: true, | |
| fillColor: Colors.grey[200], | |
| contentPadding: EdgeInsets.all(10.0), | |
| ), | |
| ), | |
| Padding( | |
| padding: EdgeInsets.symmetric( | |
| vertical:25, | |
| ), | |
| child: TextField( | |
| autocorrect: false, | |
| autofocus: false, | |
| obscureText: false, | |
| style: TextStyle( | |
| fontSize: 18, | |
| ), | |
| decoration: InputDecoration( | |
| hintText: 'Password', | |
| border: InputBorder.none, | |
| filled: true, | |
| fillColor: Colors.grey[200], | |
| contentPadding: EdgeInsets.all(10.0), | |
| ), | |
| ), | |
| ), | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.end, | |
| children: [ | |
| Text( | |
| 'Forget Password', | |
| style: TextStyle( | |
| color: Colors.red, | |
| fontSize: 14, | |
| ), | |
| ), | |
| ], | |
| ), | |
| MaterialButton( | |
| onPressed: (){}, | |
| minWidth: 250, | |
| splashColor: Colors.green, | |
| color: Colors.red, | |
| padding: EdgeInsets.symmetric( | |
| vertical: 12, | |
| ), | |
| child: Text( | |
| 'Login', | |
| style: TextStyle( | |
| color: Colors.white, | |
| fontSize: 15, | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } |
by Output-
I’m a DevOps/SRE/DevSecOps/Cloud Expert passionate about sharing knowledge and experiences. I am working at Cotocus. I blog tech insights at DevOps School, travel stories at Holiday Landmark, stock market tips at Stocks Mantra, health and fitness guidance at My Medic Plus, product reviews at I reviewed , and SEO strategies at Wizbrand.
Please find my social handles as below;
Rajesh Kumar Personal Website
Rajesh Kumar at YOUTUBE
Rajesh Kumar at INSTAGRAM
Rajesh Kumar at X
Rajesh Kumar at FACEBOOK
Rajesh Kumar at LINKEDIN
Rajesh Kumar at PINTEREST
Rajesh Kumar at QUORA
Rajesh Kumar at WIZBRAND
