fialogs

Simple Flutter Dialog

Table of Content

  • Alert Dialog
  • Confirmation Dialog
  • Single Input Dialog
  • Progress Dialog
  • Custom Dialog

Alert Dialog

Custom Alert Dialog

customAlertDialog(
	context,
	Text("Dialog Title"),
	Text("Display message"),
	titleIcon: Icon(Icons.person),
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
	confirmationDialog: false,
	confirmationMessage: "",
);

Alert Dialog

alertDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
);

Success Dialog

successDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
);

Error Dialog

errorDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
);

Warning Dialog

warningDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
);

Info Dialog

infoDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
);

Confirmation Dialog

Custom Confirmation Dialog

customAlertDialog(
	context,
	Text("Dialog Title"),
	Text("Display message"),
	titleIcon: Icon(Icons.person),
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
	confirmationDialog: true,
	confirmationMessage: "Confirmation text message",
);

Confirmation Dialog

confirmationDialog(
	context,
	"Dialog Title",
	"Display message",
	positiveButtonText: "OK",
	positiveButtonAction: () {},
	negativeButtonText: "OK",
	negativeButtonAction: () {},
	neutralButtonText: "OK",
	neutralButtonAction: () {},
	hideNeutralButton: false,
	closeOnBackPress: false,
	confirmationDialog: true,
	confirmationMessage: "Please select this check box for confirmation",
);

Single Input Dialog

Simple Text Field Input Dialog

customSingleInputDialog(  
	context,  
	Text("Single Input Dialog"),  
	DialogTextField(  
		fieldLabel: "Input Field",  
		obscureText: false,  
		textInputType: TextInputType.text,   
		validator: (value) {  
			if (value.isEmpty) return "Required!";  
			return null;  
		},  
		onEditingComplete: (value) {  
			print(value);  
		}  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: (value) {  
		print(value);  
	},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: false,  
	closeOnBackPress: true,  
);

Simple Text Field Input Dialog

singleInputDialog(  
	context,  
	"Single Input Dialog",  
	DialogTextField(  
		fieldLabel: "Input Field",  
		obscureText: false,  
		textInputType: TextInputType.text,   
		validator: (value) {  
			if (value.isEmpty) return "Required!";  
			return null;  
		},  
		onEditingComplete: (value) {  
			print(value);  
		}  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: (value) {  
		print(value);  
	},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: false,  
	closeOnBackPress: true,  
);

Password Field Input Dialog

singleInputDialog(  
	context,  
	"Single Input Dialog",  
	DialogTextField(  
		fieldLabel: "Password Field",  
		obscureText: true,  
		textInputType: TextInputType.text,   
		validator: (value) {  
			if (value.isEmpty) return "Required!";  
			return null;  
		},  
		onEditingComplete: (value) {  
			print(value);  
		}  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: (value) {  
		print(value);  
	},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: false,  
	closeOnBackPress: true,  
);

Multi Line Text Field Input Dialog

singleInputDialog(  
	context,  
	"Single Input Dialog",  
	DialogTextField(  
		fieldLabel: "Remarks",  
		textInputType: TextInputType.multiline,   
		minLines: 3,
		maxLines: 5,
		validator: (value) {  
			if (value.isEmpty) return "Required!";  
			return null;  
		},  
		onEditingComplete: (value) {  
			print(value);  
		}  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: (value) {  
		print(value);  
	},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: false,  
	closeOnBackPress: true,  
);

Progress Dialog

Circular Progress Dialog (Infinite)

progressDialog(  
	context,   
	titleWidget: Text("Connecting", style: dialogTitleStyle(context),),  
	progressDialogType: ProgressDialogType.CIRCULAR,  
	contentWidget: Text(  
		"Connecting to Server, Please wait, this will take some time...",  
		textAlign: TextAlign.justify,  
		style: dialogContentStyle(context),  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: () {},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: true,  
	closeOnBackPress: true,   
);

Linear Progress Dialog (Infinite)

progressDialog(  
	context,   
	titleWidget: Text("Connecting", style: dialogTitleStyle(context),),  
	progressDialogType: ProgressDialogType.LINEAR,  
	contentWidget: Text(  
		"Connecting to Server, Please wait, this will take some time...",  
		textAlign: TextAlign.justify,  
		style: dialogContentStyle(context),  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: () {},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: true,  
	closeOnBackPress: true,   
);

Progress Dialog With Value Update

Setup for Progress Value Update

Add this to your MyApp build function

import 'package:provider/provider.dart';

MultiProvider(  
	providers: [  
		ChangeNotifierProvider(create: (context) => ProgressModel()),  
	]
	child: MaterialApp( ... ),
);

Like this

// MyApp class build function return like this
class MyApp extends StatelessWidget {  
	@override  
	Widget build(BuildContext context) {  
		return MultiProvider(  
			providers: [  
				ChangeNotifierProvider(create: (context) => ProgressModel()),  
			],  
			child: MaterialApp(  
				debugShowCheckedModeBanner: false,  
				title: 'Fialogs Demo',  
				theme: lightTheme(),    
				home: MyHomePage(title: 'Fialogs Demo Home Page'),  
			),  
		);  
	}
}

Update Progress Value

Update progress model value from where you call the progress dialog function

updateProgress() async {  
	var model = context.read<ProgressModel>();  
	model.setValue(0.0);  
	for(var i = 0.00; i <= 1.00; i = i + 0.01) {  
		await Future.delayed(Duration(milliseconds: 100), () {  
			var model = context.read<ProgressModel>();  
			if (i > 0.99) {  
				model.setValue(1.0);  
			} else {  
				model.setValue(i);  
			}  
		});  
	}  
}

Progress Dialog Function should called from ChangeNotifierProvider

Scaffold(  
	appBar: AppBar(  
		title: Text(widget.title),  
	),  
	body: ChangeNotifierProvider(  
		create: (context) => ProgressModel(),
		child: Column(
			children: <Widget>[ ... ],
		),
	),
);

Circular Progress Dialog

progressDialog(  
	context,  
	displayValue: true,  
	autoCloseOnCompletion: true,  
	titleWidget: Text("Connecting", style: dialogTitleStyle(context),),  
	progressDialogType: ProgressDialogType.CIRCULAR,  
	contentWidget: Text(  
		"Connecting to Server, Please wait, this will take some time...",  
		textAlign: TextAlign.justify,  
		style: dialogContentStyle(context),  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: () {},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: true,  
	closeOnBackPress: false,  
);  
updateProgress(); // this function defined above

Linear Progress Dialog

progressDialog(  
	context,  
	displayValue: true,  
	autoCloseOnCompletion: true,  
	titleWidget: Text("Connecting", style: dialogTitleStyle(context),),  
	progressDialogType: ProgressDialogType.LINEAR,  
	contentWidget: Text(  
		"Connecting to Server, Please wait, this will take some time...",  
		textAlign: TextAlign.justify,  
		style: dialogContentStyle(context),  
	),  
	positiveButtonText: "Yes",  
	positiveButtonAction: () {},  
	negativeButtonText: "No",  
	negativeButtonAction: () {},  
	hideNeutralButton: true,  
	closeOnBackPress: false,  
);  
updateProgress(); // this function defined above

Custom Dialog

customDialog(  
	context,  
	title: Text(  
		"Custom Dialog",  
		style: TextStyle(  
			color: Colors.orange,  
			fontSize: 32,  
		),  
	),  
	content: Column(  
		  children: [  
		    TextField(  
				decoration: InputDecoration(labelText: "Input Field"),  
			),  
			Divider(),  
			Icon(  
				Icons.person,  
				size: 64,  
				color: Colors.deepOrange,  
			),  
			Divider(),  
			Text(  
				"Custom text description for custom dialog",  
				style: TextStyle(  
					color: Colors.pinkAccent,  
					fontSize: 16,  
				),  
			),  
		],  
	),  
	positiveButtonText: "Okay",  
	positiveButtonAction: () {},  
	negativeButtonText: "Not Okay",  
	negativeButtonAction: () {},  
	neutralButtonAction: () {  
	  Navigator.pop(context);  
	},  
	hideNeutralButton: true,  
	closeOnBackPress: true,  
);

Libraries

fialogs