Dialog box as a very important thing, here to say, a fine number is also quite a lot, this article includes

[1].SimpleDialog [2].AlertDialog [3].CupertinoAlertDialog [4].Component state update in Dialog [5].snackbar [6].Bottomsheet [7].datepicker  [8].TimePickerwTimePicker, [9].CupertinoPicker [10].CupertinoDatePicker [11].CupertinoTimerPickerCopy the code
0. Set up a venue
class DialogShow extends StatefulWidget { @override _DialogShowState createState() => _DialogShowState(); } class _DialogShowState extends State<DialogShow> { @override Widget build(BuildContext context) { var title = Container( alignment: AlignmentDirectional.center, child: Text( "Dialog Unit", style: TextStyle(fontSize: 30), ), ); Map<String, Function> buttons = {" SimpleDialog": _showSimpleDialog, "AlertDialog": _showAlertDialog, "dialog CupertinoAlertDialog" : _showCupertinoAlertDialog, "dialog displays oneself" : _showWidgetDialog, "dialog displays StatefulWidget" : _showStatefulWidgetDialog, "Scaffold" : _showScaffold, "BottomSheet" : _showBottomSheet, "DatePicker": _showDatePicker, "TimePicker": _showTimePicker, "CupertinoPicker": _showCupertinoPicker, "CupertinoDatePicker": _showCupertinoDatePicker, "CupertinoTimerPicker": _showCupertinoTimerPicker, }; Var BTNS = buttons.keys.tolist ().map((STR){return RaisedButton(onPressed: () {buttons[STR](context); }, child: Text(str), ); }).toList(); var result =Column(children: <Widget>[title,Column( children: btns, )],) ; return result; }}Copy the code
1. Dialog:SimpleDialog

Create the dialog through showDialog, pass in the BuildContext object, and create the component through the Builder constructor

SimpleDialog SimpleDialog, as long as a list of things can be selected, such as:

_showSimpleDialog(BuildContext context) {var STRS =[' Cloud deep not clear inside hai, MAO shi start ', "cloud deep not clear inside hai, not to be choosier and remain, not to kill inside hai "," cloud deep not clear inside hai, not to be promiscuous ", "Wei Wuxian was forbidden to play the flute when the clouds were deep. "] Var title = Row(// title children: <Widget>[image. asset("images/icon_lwj.png", width: 30,height: 30,), SizedBox(width: 10,), new Text(" 中 国 家规")],); showDialog( context: context, builder: (context) { return SimpleDialog( title: title, children: strs.map((str){ return SimpleDialogOption( child: Row(children: <Widget>[ Icon(Icons.turned_in_not,color: Colors.blue,),Text(str)],) , onPressed: () { Navigator.of(context).pop(str); print(str); }); }).toList(), ); }); }Copy the code
3. Dialog:AlertDialog

The AlertDialog component includes title, Content, actions, and some auxiliary properties like shadows, color shapes, and so on.

_showAlertDialog(BuildContext context) {var title = Row(// <Widget>[image.asset ("images/icon_wwx.png", width: 30,height: 30,), SizedBox(width: 10,), new Text(" declaration ")],); Var content = Row(// content children: <Widget>[Text(" I 💖 you, you are my "), image. asset("images/icon_ylm.png",width: 30, height: 0) 30,)],); ShowDialog (context: context, Builder: (context) => // Constructor AlertDialog(title: title, content: content, actions: <Widget>[FlatButton(child: Text(" stop "), onPressed: () {navigator.of (context).pop();},), FlatButton(child: The Text (" off "), onPressed: () {the Navigator. Of (context). Pop ();},))); }Copy the code
3. Dialog:CupertinoAlertDialog

Cupertino style dialog box

Void _showCupertinoAlertDialog(BuildContext context) {var title = Row MainAxisAlignment.center, children: <Widget>[ Image.asset("images/icon_wwx.png", width: 30,height: 30,), SizedBox(width: 10,), new Text(" I ")],); Var content = Row(children: <Widget>[Text(" I 💖 you, you are my ",style: TextStyle(fontSize: 20),), Image.asset("images/icon_ylm.png", width: 40, height: 40, ) ], ); var dialog = CupertinoAlertDialog( content: content, title: title, actions: <Widget>[ CupertinoButton( child: Text(" stop "), onPressed: () {navigator.pop (context);},), CupertinoButton(child: Text(" Go away "), onPressed: () { Navigator.pop(context); }, ), ], ); showDialog(context: context, builder: (context) => dialog); }Copy the code
4. Play around

Since the dialog is showing a Widget, what if I display it by itself?

Dialog should be easy to play now, since you can put any Widget in it, there is nothing to be afraid of.

_showWidgetDialog(BuildContext context) {
  showDialog(
      context: context,
      builder: (context) {
        return this.widget;
      });
}
Copy the code
5. StatefulWidget in the dialog box

To update the component state in the dialog, use the StatefulBuilder, which calls back to the StateSetter object

_showStatefulWidgetDialog(BuildContext context) {var progress = 0.0; StateSetter stateSetter; Timer. Periodic (Duration(milliseconds: 100), (Timer) {// Progress += 0.1; if (stateSetter ! = null) { stateSetter(() {}); } if (progress >= 1) { timer.cancel(); stateSetter = null; Navigator.of(context).pop(); }}); var statefulBuilder = StatefulBuilder( builder: (ctx, state) { stateSetter = state; Return Center(Child: SizedBox(width: 150, height: 150, child: Card(elevation: 24.0, color: Colors.blue.withAlpha(240), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CircularProgressIndicator( valueColor: AlwaysStoppedAnimation(Colors.white), value: progress, ), SizedBox(height: 20,), Text("Loading...", style: TextStyle(color: Colors.white),), SizedBox(height: 5,), Text (" done ${((progress - 0.1) * 100) toStringAsFixed (1)} % ", style: TextStyle (color: Colors. White),),,),),),); }); showDialog(context: context, builder: (ctx) => statefulBuilder); }Copy the code
6. Bottom frame :SnackBar

ScaffoldState Is obtained using the ScaffoldState method and showSnackBar is called

_showScaffold(BuildContext Context) {var snackBar = snackBar (backgroundColor: Color(0xffFB6431),// Color content: Text('Hello! '),// contents duration: duration (seconds: 3),// Duration: SnackBarAction(label: 'ok ', onPressed: () {print("Flutter journey "); })); Scaffold.of(context).showSnackBar(snackBar); // This is ok}Copy the code
7. Bottom drawer :BottomSheet

Similar to SnackBar, but more powerful is the bottom bar child you can put in whatever you want.

bool _showing=false; _showBottomSheet(BuildContext context) { var bottomSheet = BottomSheet( onClosing: () {}, builder: (context) => (Container( color: Color(0xdde3fbf6), height: 150, child: Center( child: Image.asset("images/wy_300x200_filter.jpg"), ), ))); if(_showing){ Navigator.of(context).pop(); }else{ Scaffold.of(context).showBottomSheet(bottomSheet.builder); } _showing=! _showing; }Copy the code
8. Calendar options: showDatePicker

Return a DataTime generic Future object

void _showDatePicker(BuildContext cxt) {
  showDatePicker(
    context: cxt,
    initialDate: DateTime.now(),
    firstDate: DateTime(2018),
    lastDate: DateTime(2030),
    builder: (BuildContext context, Widget child) {
      return Theme(
        data: ThemeData.dark(),
        child: child,
      );
    },
  ).then((data){
    print(data);
  });
}
Copy the code
9. ShowDatePicker

Return a Future object of the TimeOfDay generic type

void _showTimePicker(BuildContext cxt) {
  showTimePicker(
    context: cxt,
    initialTime: TimeOfDay(hour: 11, minute: 45),
    builder: (BuildContext context, Widget child) {
      return Theme(
        data: ThemeData.dark(),
        child: child,
      );
    },
  ).then((data){
    print(data);
  });
}
Copy the code
10. Select table: CupertinoPicker

Ios style selection table, feel pretty good

Void _showCupertinoPicker(BuildContext context){var names=[' Wei ',' lu ',' Jiang ',' Jiang ',' Yi ']; final picker = CupertinoPicker( itemExtent: 40, onSelectedItemChanged: (position){ print('The position is ${names[position]}'); }, children: names.map((e){ return Text(e); }).toList()); showCupertinoModalPopup(context: context, builder: (cxt){ return Container( height: 200, child: picker, ); }); }Copy the code
11. Date card: CupertinoPicker

Quite convenient

_showCupertinoDatePicker(BuildContext context){ final picker =CupertinoDatePicker( onDateTimeChanged: (date){print(${date.tostring ()}); }, initialDateTime: DateTime(1994), ); showCupertinoModalPopup(context: context, builder: (cxt){ return Container( height: 200, child: picker, ); }); }Copy the code
12. Date card: CupertinoPicker

No more talking, look at the effect

void _showCupertinoTimerPicker(BuildContext cxt){ final picker = CupertinoTimerPicker(onTimerDurationChanged: (duration){print(' current time $duration'); }); showCupertinoModalPopup(context: cxt, builder: (cxt){ return Material(child: Container( height: 200, child: picker, ),); }); }Copy the code

Well, that’s all for this article.

conclusion

This is the end of this article. If you want to taste Flutter quickly, Flutter For Seven days is a must-have. If you want to explore it, follow in my footsteps and complete a Flutter tour. In addition, I have a Flutter wechat communication group. You are welcome to join and discuss Flutter issues together. My wechat account is ZDL1994328.