Mastering Dart: From Fundamentals to Flutter Development
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.
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.
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.
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.
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.
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.
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.
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
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.
Images
Comments