- Customizing Fonts in Flutter with ExampleFlutter Skeleton Text with ExampleFlutter Themes with ExampleFlutter Lazy Loader with ExampleFlutter UI Orientation with ExampleFlutter Animation in Route Transition with ExampleFlutter Physics Simulation in Animation with ExampleFlutter Radial Hero Animation with ExampleFlutter Hinge Animation with ExampleFlutter Lottie Animation with Example
- URLs in Flutter with ExampleRoutes and Navigator in FlutterFlutter WebSockets with ExampleFlutter Named Routes with ExampleFlutter Arguments in Named RoutesMulti Page Applications in FlutterFlutter Updating Data on the InternetFlutter Fetching Data From the InternetFlutter Deleting Data On The InternetFlutter Sending Data To The InternetFlutter Send Data to Screen with Example
Designing a Form Submission Page in Flutter
Designing a form submission page is an important part of creating applications with Flutter. In this blog, we'll explore how to design a form submission page in Flutter with an example.
First, let's create a basic form submission page with a text field, a drop-down menu, and a button to submit the form.
import 'package:flutter/material.dart';
class FormSubmissionPage extends StatefulWidget {
@override
_FormSubmissionPageState createState() => _FormSubmissionPageState();
}
class _FormSubmissionPageState extends State<FormSubmissionPage> {
final _formKey = GlobalKey<FormState>();
String _name;
String _gender;
List<String> _genderOptions = ['Male', 'Female', 'Other'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Submission Page'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Name',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
TextFormField(
decoration: InputDecoration(
hintText: 'Enter your name',
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter your name';
}
return null;
},
onSaved: (value) {
_name = value;
},
),
SizedBox(height: 16.0),
Text(
'Gender',
style: TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
DropdownButtonFormField<String>(
value: _gender,
decoration: InputDecoration(
hintText: 'Select your gender',
),
validator: (value) {
if (value == null) {
return 'Please select your gender';
}
return null;
},
onChanged: (value) {
setState(() {
_gender = value;
});
},
items: _genderOptions.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
SizedBox(height: 16.0),
RaisedButton(
child: Text('Submit'),
onPressed: () {
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
_submit();
}
},
),
],
),
),
),
);
}
void _submit() {
// Handle form submission
}
}ā
In this code, we're using the Form
widget to create a form with a TextFormField
for the user's name and a DropdownButtonFormField
for the user's gender. We're also using the validator
property to ensure that the entered name and selected gender are valid.
The onSaved
property of the TextFormField
and DropdownButtonFormField
is used to save the entered values to variables. These variables can then be used in the _submit()
function to handle the form submission.
The DropdownButtonFormField
is created with a list of options for the user to select from. We're using the map
method to create a list of DropdownMenuItem
widgets for each option.
In terms of styling, we're using the TextStyle
property to create bold text for the field names. We're also using the SizedBox
widget to add spacing between the form fields and the submit button.
Overall, this code provides a basic example of how to design a form submission page