**Course Title:** Mastering Dart: From Fundamentals to Flutter Development **Section Title:** User Input and Forms **Topic:** Develop a Flutter application with forms that validate user input and provide feedback.(Lab topic) **Objective:** By the end of this topic, you will be able to create a Flutter application with forms that validate user input and provide feedback. You will learn how to use the `TextFormField` widget to create text fields, validate user input, and display error messages. **Prerequisites:** ### Step 1: Create a new Flutter project Create a new Flutter project using the command `flutter create my_form_app`. This will create a new directory called `my_form_app` with the basic structure for a Flutter project. ### Step 2: Add the `form` package Add the `form` package to your project by running the command `flutter pub add form`. This package provides a set of widgets and utilities for building forms. ### Step 3: Create a form widget Create a new file called `form_widget.dart` and add the following code: ```dart import 'package:flutter/material.dart'; import 'package:form/form.dart'; class MyFormWidget extends StatefulWidget { @override _MyFormWidgetState createState() => _MyFormWidgetState(); } class _MyFormWidgetState extends State<MyFormWidget> { final _formKey = GlobalKey<FormState>(); String _name = ''; String _email = ''; @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( children: [ TextFormField( decoration: InputDecoration(labelText: 'Name'), validator: (value) { if (value!.isEmpty) { return 'Please enter your name'; } return null; }, onSaved: (value) => _name = value!, ), TextFormField( decoration: InputDecoration(labelText: 'Email'), validator: (value) { if (value!.isEmpty) { return 'Please enter your email'; } if (!value.contains('@')) { return 'Please enter a valid email'; } return null; }, onSaved: (value) => _email = value!, ), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { _formKey.currentState!.save(); print('Form submitted: name = $_name, email = $_email'); } }, child: Text('Submit'), ), ], ), ); } } ``` This code creates a form with two text fields, one for the name and one for the email. The `validator` property is used to validate the input, and the `onSaved` property is used to save the input when the form is submitted. ### Step 4: Use the form widget in your app Add the `MyFormWidget` to your app's main widget tree: ```dart import 'package:flutter/material.dart'; import 'package:my_form_app/form_widget.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'My Form App', home: Scaffold( appBar: AppBar( title: Text('My Form App'), ), body: Center( child: MyFormWidget(), ), ), ); } } ``` This will display the form in the center of the screen. **Key Concepts:** * The `Form` widget is used to group a set of widgets together and provide validation and submission functionality. * The `TextFormField` widget is used to create a text field that can be validated and saved. * The `validator` property is used to validate the input, and the `onSaved` property is used to save the input when the form is submitted. **Practical Takeaways:** * Use the `Form` widget to group a set of widgets together and provide validation and submission functionality. * Use the `TextFormField` widget to create a text field that can be validated and saved. * Use the `validator` property to validate the input, and the `onSaved` property to save the input when the form is submitted. **Additional Resources:** * The official Flutter documentation on forms: <https://api.flutter.dev/flutter/material/Form-class.html> * The official Flutter documentation on text fields: <https://api.flutter.dev/flutter/material/TextFormField-class.html> **Leave a comment or ask for help:** If you have any questions or need further clarification on any of the concepts covered in this topic, please leave a comment below.