In this article, I will post the code on how you can create a Simple Dialog Box in Flutter.
The dialog box we will be creating is shown in the image below.
After Clicking on a button, ShowDialog() is triggered and the dialog box as shown in the image above is shown on the screen.
The shape of the dialog box is defined by using shape. Here we have given the shape of RoundedRectangleBorder with a border radius of 16.0 to all of its sides.
Related: Create a Dialog Box with Radio Buttons
A TextEditingController addNewFeatureController( in Screen.dart) is defined to get the text User enters in the dialog box. addNewFeatureController.text gives the text user entered.
The value(text) is passed from DialogBox Widget in dialog_widget to ShowDialog in the Screen.dart using the constructor addNewfeatureController [When Add is Tapped, addNewfeatureController (in dialog_widget.dart) —sends value—->addNewfeatureController (in Screen.dart) ]
The Source Code below shows the code to create a simple dialog box in Flutter.
Screen.dart
TextEditingController addNewFeatureController = TextEditingController();
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) => Dialog(
backgroundColor: Colors.grey[200],
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(16.0))),
child: DialogBox(
addNewFeatureController:
addNewFeatureController,
onPressed: () {
});
},
),
));
},dialog_widget.dart
class DialogBox extends StatelessWidget {
const DialogBox({
Key? key,
required this.onPressed,
required this.addNewFeatureController,
}) : super(key: key);
final TextEditingController addNewFeatureController;
final void Function()? onPressed;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 200,
width: 250,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.all(10.0),
child: Text('Add New Features',
style:
TextStyle(fontSize: 15, fontWeight: FontWeight.w500)),
),
Container(
width: 20,
height: 20,
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,
),
),
),
),
],
),
const SizedBox(
height: 10,
),
TextFormField(
controller: addNewFeatureController,
decoration: const InputDecoration(
hintText: 'Enter the Name',
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(color: Colors.orangeAccent),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(color: AppColors.colorPrimary),
),
),
),
const Spacer(),
CupertinoButton(
child: const Center(child: Text('Add')),
color: addNewFeatureController.text.isEmpty
? AppColors.colorLightGrey
: AppColors.colorPrimary,
onPressed: onPressed!)
],
),
),
);
}
}
