Hello Everyone, In this article, I will be discussing how you can create a dialog box in Futter.
Dialog Box or Popup Box is important in Flutter. They are used to show additional information to the user and for other many purposes.
The dialog box you see in this article will be the popup box with the radio button as shown in the image below.
If you wish to know more about the dialog box and its type, then you can read this article by Tiya Chows on Medium.
Let’s get started.
How to Create Popup in Flutter?
We will first create a New Project and run the default counter program code.
Next, we will create a new dart file called popup.dart. Inside this file, we will write the code for the dialog box.
import 'package:flutter/material.dart';
class PopupWidget extends StatefulWidget {
const PopupWidget({Key? key}) : super(key: key);
@override
_PopupWidgetState createState() => _PopupWidgetState();
}
class _PopupWidgetState extends State<PopupWidget> {
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.grey[200],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: Column(),
);
}
}Here, We created a StatefulWidget named PopupWidget. Then we returned the Dialog widget and defined the shape of the Dialog box using the shape property. The shape will be the Rounded Rectangle with a 16 border radius.
To test, we called the PopupWidget in the floatingactionbutton of main.dart file.
floatingActionButton: FloatingActionButton(
onPressed: (){
showDialog(
context: context,
builder: (BuildContext context) => const PopupWidget()
);
},
child: const Icon(Icons.add),
),When we ran the program, we got the following output as in the image below.
The Next Step will be to add the Filter text and close icon button as shown in the image below.
For this, Inside the Column Widget, we are using Row Widget. Then with the below code, we can get the Filter text and orange close button.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text('Filter',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w500)),
),
Container(
margin: const EdgeInsets.only(top: 24, right: 24, bottom: 10),
width: 25,
height: 25,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.orange),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: const Center(
child: Icon(
Icons.close,
color: Colors.white,
size: 15.0,
),
),
),
),
],
),Finally, it’s time to add the radio buttons. For this, I followed the official flutter documentation on the radio button. If anyone wants to check out, here’s the link: Flutter Radio Buttons Documentation
The documentation used the ListTile widget for the radio button, so I am also using ListTile in this program. If you wish to know more about the function of properties such as trailing, value, activeColor, and more, study the documentation.
We are defining the items using enum.
enum menuitem { item1, item2, item3, item4 }
ListTile(
title: const Text('item2'),
trailing: Radio<menuitem>(
value: menuitem.item2,
activeColor: Colors.orange,
groupValue: _mitem,
onChanged: (menuitem? value) {
setState(() {
_mitem = value;
});
},
),
),After adding 4 items in the Column of PopupWidget, finally, we created the dialog box.
Now we have a customized popup dialog box with radio buttons.
I hope this article helped you to learn how you can create the dialog box in a flutter. Thanks for reading.
Check out other articles:
- Login and Register Easily with Flutter using Firebase
- How to Create Tic Tac Toe in Flutter?
- How to Fetch Data from Internet? Flutter Tutorial?
- Common Flutter Errors and Solution
Full Code:
main.dart
import 'package:flutter/material.dart';
import 'package:flutter_dialogbox_example/popup.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showDialog(
context: context,
builder: (BuildContext context) => const PopupWidget());
},
child: const Icon(Icons.add),
),
);
}
}
popup.dart
import 'package:flutter/material.dart';
class PopupWidget extends StatefulWidget {
const PopupWidget({Key? key}) : super(key: key);
@override
_PopupWidgetState createState() => _PopupWidgetState();
}
enum menuitem { item1, item2, item3, item4 }
class _PopupWidgetState extends State<PopupWidget> {
menuitem? _mitem = menuitem.item1;
@override
Widget build(BuildContext context) {
return Dialog(
backgroundColor: Colors.grey[200],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16.0))),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text('Filter',
style:
TextStyle(fontSize: 25, fontWeight: FontWeight.w500)),
),
Container(
margin: const EdgeInsets.only(top: 24, right: 24, bottom: 10),
width: 25,
height: 25,
decoration: const BoxDecoration(
shape: BoxShape.circle, color: Colors.orange),
child: InkWell(
onTap: () {
Navigator.pop(context);
},
child: const Center(
child: Icon(
Icons.close,
color: Colors.white,
size: 15.0,
),
),
),
),
],
),
ListTile(
minVerticalPadding: 0,
title: const Text('item1'),
trailing: Radio<menuitem>(
activeColor: Colors.orange,
value: menuitem.item1,
groupValue: _mitem,
onChanged: (menuitem? value) {
setState(() {
_mitem = value;
});
},
),
),
const Divider(
thickness: 2,
color: Colors.grey,
),
ListTile(
title: const Text('item2'),
trailing: Radio<menuitem>(
value: menuitem.item2,
activeColor: Colors.orange,
groupValue: _mitem,
onChanged: (menuitem? value) {
setState(() {
_mitem = value;
});
},
),
),
const Divider(
thickness: 2,
color: Colors.grey,
),
ListTile(
title: const Text('item3'),
trailing: Radio<menuitem>(
activeColor: Colors.orange,
value: menuitem.item3,
groupValue: _mitem,
onChanged: (menuitem? value) {
setState(() {
_mitem = value;
});
},
),
),
const Divider(
thickness: 2,
color: Colors.grey,
),
ListTile(
title: const Text('item4'),
trailing: Radio<menuitem>(
activeColor: Colors.orange,
value: menuitem.item4,
groupValue: _mitem,
onChanged: (menuitem? value) {
setState(() {
_mitem = value;
});
},
),
),
Center(
child: TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Container(
width: 160,
height: 40,
decoration: const BoxDecoration(
color: Colors.orange,
borderRadius: BorderRadius.all(Radius.circular(10.0))),
child: const Center(
child: Text('APPLY',
style: TextStyle(
fontSize: 25, fontWeight: FontWeight.w500, color: Colors.white)),
)),
),
),
],
),
);
}
}