Study Part I — Simple Use of Dialog

navigation

• Study part ii — Drawer and Water pattern effect
• The Use and Principles of MobX

preface

People on earth can no longer resist the spread of Flutter. The future belongs to the cross-platform era, so I have recently started to study Fullter, so I plan to record my learning process in the gold mining community, and discuss and learn with my colleagues. The author’s Flutter practice project code is placed in flutter_demo, there is a need to star oh.

The theme

With Flutter, everything is a Widget, so a pop-up Dialog is also a Widget. The specific API is showDialog. But unlike the original, Flutter’s showDialog is essentially pushing a new route. The showDialog source code is as follows:

As you can see, the essence is to call navigator.of ().push to enter a new route. And this new route is our Dialog.

example

ShowDialog: showDialog: showDialog: showDialog: showDialog: showDialog: showDialog: showDialog

Is a Dialog effect with nested radio. First, I use the system-provided AlertDialog class. The AlertDialog class has three properties that we need to use. They are title, Actions, and Content. Content is the content in the middle which is radio.

First, I abstracted a custom AlertDialog, customizing some basic styles and retaining some properties.

import 'package:flutter/material.dart';

import '.. /common_widget.dart';

class CustomAlertDialog extends StatelessWidget {
  CustomAlertDialog({Key key, @required this.title, @required this.contentWidget, this.showCancel = true.this.showConfirm = true.this.actionWidgets}) : super(key: key);

  final bool showCancel;
  final bool showConfirm;
  final String title;
  final Widget contentWidget;
  final List<Widget> actionWidgets;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
        title: Common.primaryBigTitle(content: title),
        elevation: 12.0,
        titlePadding: EdgeInsets.fromLTRB(24.0.24.0.24.0.12),
        contentPadding: EdgeInsets.fromLTRB(0.0.0.0.0.0.0.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
        ),
        actions: _buildActionWidget(context),
        content: contentWidget);
  }

  _buildActionWidget(BuildContext context) {
    List<Widget> actionWidgets = this.actionWidgets;
    if (actionWidgets == null) {
      actionWidgets = [];
      if(showConfirm) {
        actionWidgets.add(FlatButton(onPressed: () => Navigator.of(context).pop(), child: Text("Sure")));
      }
      if(showCancel) {
        actionWidgets.add(FlatButton(onPressed: () => Navigator.of(context).pop(), child: Text("Cancel"))); }}returnactionWidgets; }}Copy the code

Next, I customize the radioDialog as follows:

import 'package:flutter/material.dart';

import '.. /common_widget.dart';
import 'custom_alert_dialog.dart';

class RadioAlertDialog extends StatelessWidget {
  RadioAlertDialog({Key key, @required this.title, @required this.selectValue, this.showCancel = true.this.showConfirm = true.@required this.valueList}) : super(key: key);

  final bool showCancel;
  final bool showConfirm;
  final String title;
  final String selectValue;
  final List<String> valueList;

  @override
  Widget build(BuildContext context) {
    return CustomAlertDialog(
      title: title,
      contentWidget:Container(child: Column(mainAxisSize: MainAxisSize.min, children: _buildRadioList(context))),
      showCancel: showCancel,
      showConfirm: showConfirm,
    );
  }

  _buildRadioList(BuildContext context) {
    List<Widget> radioList = [];
    valueList.forEach((String value) => radioList.add(RadioListTile<String>(
        value: value,
        title: Common.primaryTitle(content: value),
        activeColor: Colors.blue,
        groupValue: '$selectValue',
        onChanged: (value) {
          Navigator.of(context).pop(value);
        })));
    returnradioList; }}Copy the code

With the customization of these two widgets complete, it’s a simple matter of calling with the showDialog:

   showDialog<String>(
              context: context,
              builder: (context) {
                String selectValue = '${settingsStore.showPage}';
                List<String> valueList = ["Home page"."Life"];
                return RadioAlertDialog(title: "Select display page",
                    selectValue: selectValue,
                    valueList: valueList);
              }).then((value) {
                print(value);
                settingsStore.saveShowPage(value);
          });

Copy the code

“Then” is also called on showDialog to do logic processing. ShowDialog is essentially a push route. The Flutter supports routing the pop and passing parameters back to the previous page, so call navigater.of (context).pop(value) after the radio is selected. You can pass the selected text back to the previous widget.

conclusion

This article mainly introduces the simple use of the Dialog of Flutter. In the world of Flutter, everything is a Widget, so the Dialog is also a new Widget. In this way, the routing system is not interrupted, and it is easier to understand the interaction of the whole Widget.

warehouse

Click on flutter_demo to see the full code.