In this lesson, we will focus on creating a Form like display:
This form will not do anything but is a good starting point for creating a login form.
Adding Simple Form
Once again, we will be modifying our main.dart file and replacing the MyApp class with the following code:
lib/main.dart
import 'package:flutter/material.dart'; void main() { runApp(MyApp());} class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Login'), ), body: Column( children: <Widget>[ TextField( keyboardType: TextInputType.emailAddress, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Email', ), ), TextField( keyboardType: TextInputType.visiblePassword, decoration: InputDecoration( border: OutlineInputBorder(), labelText: 'Password', ), ), ElevatedButton( onPressed: () { print('Login button pressed'); }, child: Text('Login'), style: ElevatedButton.styleFrom( backgroundColor: Colors.blue, foregroundColor: Colors.white, minimumSize: Size(double.infinity, 36), ), ), ], ))); }}Saving the file should automatically update the emulator with the new form:
But how did we get here?
We replaced our AppBar title with Login to ...