Creating Stateful Dialog Form In Flutter
In this blog, I will talk about how to create a stateful dialog form using the stateful builder. Where you can take TextField checkbox or any other type input on dialog. which you may need. We will create our own state of a dialog using the stateful builder and we will use a form widget with a global key which flutters to validate textfield. Let us now implement stateful dialog in your flutter application. Now let’s start.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
Stateful Dialog Form:
A StatefulBuilder is such a builder. In which there is a mutable. Which can have a change of state. what makes it special is that it has to rebuild its special widget which comes under the Statefulbuilder. Stateful builder widget that we use can be used to update a specific element in the UI if the stateless widget. and moving the stateless widget to the stateless widget and getting rid of the stateful builder can store the same result. and the whole widget is not rebuilt again and again.
Demo Module :
Code Implement :
Create a new dart file calledflutter_sateful_dialog inside the lib folder.
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
Using the Global key we use the global key to access and manipulate the status of our form and external Scaffold widget. The Global case allows us to access unique identities that our widget in the flutter widget tree is assigned. As we create a form application using it. In this, we have a separate input box. we stop the rudimentary validation check on it and when it satisfies those validation conditions and the user interface changes to show that.
Have a Look at the code Implementation :
return await showDialog(
context: context,
builder: (context) {
bool isChecked = false;
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
content: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: _textEditingController,
validator: (value) {
return value.isNotEmpty ? null : "Enter any text";
},
decoration:
InputDecoration(hintText: "Please Enter Text"),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Choice Box"),
Checkbox(
value: isChecked,
onChanged: (checked) {
setState(() {
isChecked = checked;
});
})
],
)
],
)),
title: Text('Stateful Dialog'),
actions: <Widget>[
InkWell(
child: Text('OK '),
onTap: () {
if (_formKey.currentState.validate()) {
// Do something like updating SharedPreferences or User Settings etc.
Navigator.of(context).pop();
}
},
),
],
);
});
});
We have used the alert dialog in this screen, inside which we have used the SatefulBuilder. A Statefulbuilder widget that has the power to the state setter function it is. used to build itself rather than the typical state of the entire widget to pass to the builder. And in this, we have taken the input box of type TextFormfield and used the checkbox.TextFormField has a function of the type validator that we have used for applying in the input box.
Code File:
import 'package:flutter/material.dart';
class StatefulDialog extends StatefulWidget {
@override
_StatefulDialogState createState() => _StatefulDialogState();
}
class _StatefulDialogState extends State<StatefulDialog> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final TextEditingController _textEditingController = TextEditingController();
Future<void> showInformationDialog(BuildContext context) async {
return await showDialog(
context: context,
builder: (context) {
bool isChecked = false;
return StatefulBuilder(builder: (context, setState) {
return AlertDialog(
content: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: _textEditingController,
validator: (value) {
return value.isNotEmpty ? null : "Enter any text";
},
decoration:
InputDecoration(hintText: "Please Enter Text"),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("Choice Box"),
Checkbox(
value: isChecked,
onChanged: (checked) {
setState(() {
isChecked = checked;
});
})
],
)
],
)),
title: Text('Stateful Dialog'),
actions: <Widget>[
InkWell(
child: Text('OK '),
onTap: () {
if (_formKey.currentState.validate()) {
// Do something like updating SharedPreferences or User Settings etc.
Navigator.of(context).pop();
}
},
),
],
);
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: FlatButton(
color: Colors.deepOrange,
onPressed: () async {
await showInformationDialog(context);
},
child: Text(
"Stateful Dialog",
style: TextStyle(color: Colors.white, fontSize: 16),
)),
),
),
);
}
}
Conclusion :
In this article, I have explained a Creating Stateful Dialog Form demo, you can modify and experiment according to your own, this little introduction was from the Creating Stateful Dialog Form from our side.
I hope this blog helps will provide you with sufficient information in Trying up the Creating Stateful Dialog Form in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
