Flutter Development (Day - 05)
- In this post we are going to talk about Tabs and Forms.
- Here is the Sample code with Explanation in the form of comments (//).
- All source code : Click Here.
lib/main.dart:
import 'package:allaboutflutterblog/tuts/tabs_forms.dart';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
home: TabsForms(),
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.red,
primarySwatch: Colors.blue,
),
),
);
}
import 'package:flutter/material.dart';
class TabsForms extends StatefulWidget {
@override
_TabsFormsState createState() => _TabsFormsState();
}
class _TabsFormsState extends State<TabsForms> {
GlobalKey<FormState> _formKey = GlobalKey<FormState>();
TextEditingController _emailController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
initialIndex: 0,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Tabs and Forms Example"),
backgroundColor: Colors.redAccent,
bottom: TabBar(
tabs: <Widget>[
Tab(
child: Text("Image Tab"),
),
Tab(
child: Text("Form Tab"),
),
],
),
),
body: TabBarView(
children: <Widget>[
ListView(
children: <Widget>[
Container(
alignment: Alignment.center,
padding: const EdgeInsets.only(top: 15.0),
child: Text(
"Image Example",
style: TextStyle(
fontSize: 20.0,
color: Colors.red,
fontWeight: FontWeight.bold),
),
),
Center(
child: Image.asset("images/img1.png"),
),
Center(
child: Image.asset("images/img2.png"),
),
Center(child: Text("Images are from unDraw."))
],
),
Padding(
padding: const EdgeInsets.all(15.0),
child: Form(
key: _formKey,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
keyboardType: TextInputType.emailAddress,
validator: (val) {
if (val.isEmpty) {
return "Please provide Email";
}
},
controller: _emailController,
onSaved: (val) {
_emailController.text = val;
},
autocorrect: true,
decoration: InputDecoration(
hintText: "Enter Your Email",
labelText: "Email",
),
),
TextFormField(
validator: (val) {
if (val.isEmpty) {
return "Please provide Password";
} else if (val.length < 6) {
return "Password must be greater than 6 characters";
}
},
obscureText: true,
controller: _passwordController,
onSaved: (val) {
_passwordController.text = val;
},
autocorrect: true,
decoration: InputDecoration(
hintText: "Enter Your Password",
labelText: "Password",
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0, top: 10.0),
),
MaterialButton(
color: Colors.redAccent,
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
onPressed: () {
_validateForm();
},
),
],
),
),
),
),
],
),
),
);
}
void _validateForm() {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
_formKey.currentState.reset();
}
}
}
Explanation:
- theme: Showing the Themes we will talk themes in later part of the tutorial.
- GlobalKey: Global key holds the state of the form which is used to controll when submitting the form by checking validation
- TextEditionController: TextEditingController is used to control the text field.
- DefaultTabController: Using DefaultTabController is the simplest option, since it creates a TabController and makes it available to all descendant widgets.
- bottom: In Appbar use bottom and provide with the Tabs In the body section return the functionality of the tabs
- TabBar: When a tab is selected, it needs to display content. You can create tabs using the TabBar widget.
- TabBarView: Used to show the content for each tab.
- ListView: ListView helps us to scroll.
- ** Dont forget to add the image path in pubspec.yaml file.
- TextFormField : The TextFormField widget renders a material design text field and can display validation errors when they occur.
- keyboardType: TextInputType.emailAddress: input type should be email type.
- Validator: checking whether the textfield is empty or invalid input field we will provide a warning.
- Controller: When typing is completed we assign the text in the input field to val which is further checks for the validation.
- obscureText: true: places dots instead of characters the lettes when we are typing
- _formkey.currentState.validate(): checks the current state of the form and validate it then we save the form and clears when submit button is pressed.
Follow me on:
Comments
Post a Comment