**Course Title:** Mastering Dart: From Fundamentals to Flutter Development **Section Title:** User Input and Forms **Topic:** Building forms in Flutter: TextFields, CheckBoxes, and RadioButtons **Overview** In this topic, we will explore how to build forms in Flutter using various form widgets such as TextFields, CheckBoxes, and RadioButtons. We will cover the basics of each widget, including how to use them, customize their appearance, and handle user input. **TextFields** TextFields are one of the most commonly used form widgets in Flutter. They allow users to input text, and they can be customized to suit various needs. ### Creating a TextField To create a TextField, you can use the `TextField` widget and pass it a `controller` to manage the text input. ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Text Field Example'), ), body: Center( child: TextField( controller: TextEditingController(), ), ), ), ); } } ``` ### Customizing a TextField You can customize a TextField by passing various properties to the `TextField` widget. For example, you can change the text input type, add a hint text, and set the text input action. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Customized Text Field Example'), ), body: Center( child: TextField( controller: TextEditingController(), decoration: InputDecoration( labelText: 'Username', hintText: 'Enter your username', border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, textInputAction: TextInputAction.done, ), ), ), ); } } ``` ### Handling TextField Input You can handle TextField input by using the `controller` to get the text input by the user. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState extends State<App> { final _controller = TextEditingController(); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Text Field Input Example'), ), body: Center( child: TextField( controller: _controller, decoration: InputDecoration( labelText: 'Username', hintText: 'Enter your username', border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, textInputAction: TextInputAction.done, ), ), floatingActionButton: FloatingActionButton( onPressed: () { print(_controller.text); }, child: Icon(Icons.send), ), ), ); } } ``` **CheckBoxes** CheckBoxes are used to allow users to select one or more options from a list. ### Creating a CheckBox To create a CheckBox, you can use the `Checkbox` widget and pass it a `value` to manage the checked state. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Checkbox Example'), ), body: Center( child: Checkbox( value: true, onChanged: (value) {}, ), ), ), ); } } ``` ### Handling CheckBox Input You can handle CheckBox input by using the `onChanged` callback to get the checked state of the CheckBox. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState extends State<App> { bool _isChecked = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Checkbox Input Example'), ), body: Center( child: Checkbox( value: _isChecked, onChanged: (value) { setState(() { _isChecked = value; }); }, ), ), floatingActionButton: FloatingActionButton( onPressed: () { print(_isChecked); }, child: Icon(Icons.send), ), ), ); } } ``` **RadioButtons** RadioButtons are used to allow users to select one option from a list. ### Creating a RadioButton To create a RadioButton, you can use the `Radio` widget and pass it a `value` to manage the selected state. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('RadioButton Example'), ), body: Center( child: Radio( value: 1, groupValue: 1, onChanged: (value) {}, ), ), ), ); } } ``` ### Handling RadioButton Input You can handle RadioButton input by using the `onChanged` callback to get the selected state of the RadioButton. ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState extends State<App> { int _selectedValue = 1; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('RadioButton Input Example'), ), body: Center( child: Row( children: [ Radio( value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ), Text('Option 1'), Radio( value: 2, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ), Text('Option 2'), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { print(_selectedValue); }, child: Icon(Icons.send), ), ), ); } } ``` **Conclusion** In this topic, we have covered how to build forms in Flutter using various form widgets such as TextFields, CheckBoxes, and RadioButtons. We have also covered how to handle user input using these widgets. With this knowledge, you can create complex forms in Flutter and handle user input effectively. **Exercise** Create a form with a TextField, a CheckBox, and a RadioButton. Handle the user input using the `onChanged` callback. **Solution** ```dart import 'package:flutter/material.dart'; void main() { runApp(App()); } class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState extends State<App> { final _controller = TextEditingController(); bool _isChecked = false; int _selectedValue = 1; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Form Example'), ), body: Center( child: Column( children: [ TextField( controller: _controller, decoration: InputDecoration( labelText: 'Username', hintText: 'Enter your username', border: OutlineInputBorder(), ), keyboardType: TextInputType.emailAddress, textInputAction: TextInputAction.done, ), Checkbox( value: _isChecked, onChanged: (value) { setState(() { _isChecked = value; }); }, ), Text('I agree to the terms and conditions'), Row( value: 1, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ), Text('Option 1'), Radio( value: 2, groupValue: _selectedValue, onChanged: (value) { setState(() { _selectedValue = value; }); }, ), Text('Option 2'), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { print(_controller.text); print(_isChecked); print(_selectedValue); }, child: Icon(Icons.send), ), ), ); } } ``` Note: This is just an example and you should adjust it according to your needs.