fialogs

Description:

fialogs

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: "",
);
copied to clipboard
Alert Dialog #
alertDialog(
context,
"Dialog Title",
"Display message",
positiveButtonText: "OK",
positiveButtonAction: () {},
negativeButtonText: "OK",
negativeButtonAction: () {},
neutralButtonText: "OK",
neutralButtonAction: () {},
hideNeutralButton: false,
closeOnBackPress: false,
);
copied to clipboard
Success Dialog #
successDialog(
context,
"Dialog Title",
"Display message",
positiveButtonText: "OK",
positiveButtonAction: () {},
negativeButtonText: "OK",
negativeButtonAction: () {},
neutralButtonText: "OK",
neutralButtonAction: () {},
hideNeutralButton: false,
closeOnBackPress: false,
);
copied to clipboard
Error Dialog #
errorDialog(
context,
"Dialog Title",
"Display message",
positiveButtonText: "OK",
positiveButtonAction: () {},
negativeButtonText: "OK",
negativeButtonAction: () {},
neutralButtonText: "OK",
neutralButtonAction: () {},
hideNeutralButton: false,
closeOnBackPress: false,
);
copied to clipboard
Warning Dialog #
warningDialog(
context,
"Dialog Title",
"Display message",
positiveButtonText: "OK",
positiveButtonAction: () {},
negativeButtonText: "OK",
negativeButtonAction: () {},
neutralButtonText: "OK",
neutralButtonAction: () {},
hideNeutralButton: false,
closeOnBackPress: false,
);
copied to clipboard
Info Dialog #
infoDialog(
context,
"Dialog Title",
"Display message",
positiveButtonText: "OK",
positiveButtonAction: () {},
negativeButtonText: "OK",
negativeButtonAction: () {},
neutralButtonText: "OK",
neutralButtonAction: () {},
hideNeutralButton: false,
closeOnBackPress: false,
);
copied to clipboard
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",
);
copied to clipboard
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",
);
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
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,
);
copied to clipboard
Progress Dialog With Value Update #
Setup for Progress Value Update #
Add this to your MyApp build function
import 'package:provider/provider.dart';
copied to clipboard
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => ProgressModel()),
]
child: MaterialApp( ... ),
);
copied to clipboard
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'),
),
);
}
}
copied to clipboard
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);
}
});
}
}
copied to clipboard
Progress Dialog Function should called from ChangeNotifierProvider #
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ChangeNotifierProvider(
create: (context) => ProgressModel(),
child: Column(
children: <Widget>[ ... ],
),
),
);
copied to clipboard
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
copied to clipboard
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
copied to clipboard
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,
);
copied to clipboard