Create a custom Dialog for Flutter

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Dialog is essential to our daily development. Flutter also provides AlertDialog/SimpleDialog options, but this is not enough for development. Try a custom Dialog.

1. The Dialog

Dialog is just a basic Widget and will not be used directly. To customize a Dialog, you must first inherit a Dialog. The Widget Build (BuildContext Context) method needs to be overridden at this point.

2. Draw Dialog style

Try making a gender selection box with a caption, a picture and a button.

import 'package:flutter/material.dart'; class GenderChooseDialog extends Dialog { GenderChooseDialog({ Key key, }) : super(key: key); @override Widget build(BuildContext context) {return new Padding(Padding: const EdgeInsets. All (12.0), child: new Material( type: MaterialType.transparency, child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Container( decoration: ShapeDecoration( color: Color(0xFFFFFFFF), Shape: RoundedRectangleBorder(borderRadius: Borderradius.all (radius.circular (8.0),)), margin: Const EdgeInsets. All (12.0), child: new Column(children: <Widget>[new Padding(Padding: Const EdgeInsets. FromLTRB (10.0, 40.0, 10.0, 28.0), child: Center(child: new Text(' please select gender ', style: New TextStyle (fontSize: 20.0,)))), the new Row (mainAxisAlignment: mainAxisAlignment center, mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ _genderChooseItemWid(1), _genderChooseItemWid(2) ]) ])) ]))); } Widget _genderChooseItemWid(var gender) { return GestureDetector( child: Column(children: <Widget>[image. asset(gender == 1? 'images/icon_type_boy. PNG ': 'images/icon_type_girl. PNG ', width: 135.0, height: Padding(Padding: EdgeInsets. FromLTRB (0.0, 22.0, 0.0, 40.0), child: Text(gender == 1? 'I am male' : 'I am female ', style: TextStyle(color: color (gender == 1? 0xFF4285F4:0xFFff4444), fontSize: 15.0))]); }}Copy the code

3. Content transfer

The small dish tries to make the dialog box universal some strong, the small dish test only passes the title as a parameter, a parameter and multiple parameters are similar.

class GenderChooseDialog extends Dialog {
  
  var title;
  
  GenderChooseDialog({
    Key key,
    @required this.title,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) { }
}
Copy the code

4. Add click events

Each dialog box should have its own click event, and the small dish is ready to add different click events when clicking on different pictures or text. Custom Function methods are required.

class GenderChooseDialog extends Dialog { var title; Function onBoyChooseEvent; Function onGirlChooseEvent; GenderChooseDialog({ Key key, @required this.title, @required this.onBoyChooseEvent, @required this.onGirlChooseEvent, }) : super(key: key); Widget _genderChooseItemWid(var gender) { return GestureDetector( onTap: gender == 1 ? this.onBoyChooseEvent : this.onGirlChooseEvent, child: Column(children: <Widget>[image. asset(gender == 1? 'images/icon_type_boy. PNG ': 'images/icon_type_girl. PNG ', width: 135.0, height: Padding(Padding: EdgeInsets. FromLTRB (0.0, 22.0, 0.0, 40.0), child: Text(gender == 1? 'I am male' : 'I am female ', style: TextStyle(color: color (gender == 1? 0xFF4285F4:0xFFff4444), fontSize: 15.0))]); } // Void _onItemPressed() {showDialog(context: context, barrierdistransmissible: false, builder: transmissible: (BuildContext context) {return acgenderChooseDialog (title: 'AcgenderChooseEvent ', onBoyChooseEvent: () {Navigator. Pop (context); }, onGirlChooseEvent: () { Navigator.pop(context); }); }); }Copy the code

5. Precautions

1. Dialog is the Widget to fill full screen by default, so dishes myself drawing part Dialog box, in order to coordinate, with the help of a type: MaterialType. Outside the transparency Settings Dialog translucent effect;
2. Whether it is to pass parameters or set click events, need to be added in the initialization, much like The Android RecycleView set content and click events;

GenderChooseDialog({
  Key key,
  @required this.title,
  @required this.onBoyChooseEvent,
  @required this.onGirlChooseEvent,
}) : super(key: key);
Copy the code

3. In the showDialog method, the barrierdistransmissible: false attribute indicates whether a dialog box is closed when you click on the top status bar (the bar showing the power/time), or add a clickable event if you want to close the window when you click on the transmissible location.

---

The current learning of xiao CAI is limited to basic use, and I hope to point out more mistakes if there are any.

Source: Little Monk A Ce