Flutter Dialog 之 ：CupertinoAlertDialog

Flutter document although it is very sound, but do not know why the document for IOS style assembly was so lacking when opening CupertionAlertDialogthe demo code is not even an official document, but AlertDialogthe document there is a simple example, which is very embarrassing , it is estimated Googlethat want to push their own Material Designstyle of it.

It happens to use the IOS style in the project CupertinoAlertDialog, so it is convenient for everyone to use it and it will be relatively simple to use.

1. Look at a simple example first

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: DialogPage(),
    );
  }
}

class DialogPage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
    
    
            _showDialog(context);
          },
          child: Text('点击显示弹窗'),
        ),
      ),
    );
  }
}

void _showDialog(widgetContext) {
    
    
  showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
    
    
      return CupertinoAlertDialog(
        title: Text('确认删除'),
        actions: [
          CupertinoDialogAction(
            child: Text('确认'),
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('取消'),
            isDestructiveAction: true,
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

This is a simple example, the effect shown is as follows:

2. showCupertinoDialog parameter description:

showCupertinoDialog: It is the method that must be used to display the IOS style pop-up window.

CupertinoAlertDialog: Indicates that a warning pop-up window is displayed, which is the style in the example.

CupertinoAlertDialog Source code analysis:

class CupertinoAlertDialog extends StatelessWidget {
    
    
  const CupertinoAlertDialog({
    
    
    Key key, // 组件的唯一标识
    this.title, //组件的标题 （可选）
    this.content, //标题的内容（可选）
    this.actions = const <Widget>[], //组件中包含的操作组件，不能为空
    this.scrollController, // 内容滚动控制器，默认 null，一般不需要
    this.actionScrollController, // 操作组件滚动控制器，默认 null，一般不需要
    this.insetAnimationDuration = const Duration(milliseconds: 100),
    this.insetAnimationCurve = Curves.decelerate,
  }) : assert(actions != null),
       super(key: key);
  ...
}

3. Use conentparameter

Then add about contentproperty, in the above code title, add the following contentattributes:

...
title: Text('确认删除'),
content: Text('这个是个提示内容 content'),
actions: [
...

The display effect is as follows:

4. Adjust the space between title and content

The above titles and content portion pitch is too small, can be obtained by contentadding the inside \nto increase the spacing between the two newline:

...
title: Text('确认删除'),
content: Text('\n这个是个提示内容 content'),
actions: [
...

display effect:

5. Use one or more actions

There can be one or more operation components in actions.

showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
    
    
      return CupertinoAlertDialog(
        title: Text('确认删除'),
        content: Text('\n这个是个提示内容 content'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('确认'),
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );

Interface display effect:

showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
    
    
      return CupertinoAlertDialog(
        title: Text('请评价'),
        content: Text('\n我们很重视您的评价！'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('非常好'),
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('一般'),
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('非常差'),
            isDestructiveAction: true,
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );

Interface display effect:

6. CupertinoDialogActionParameter description

class CupertinoDialogAction extends StatelessWidget {
    
    
  const CupertinoDialogAction({
    
    
    Key key, // 唯一标识
    this.onPressed, //点击事件
    this.isDefaultAction = false, //默认为false，是否是默认按钮，默认按钮为加粗按钮，非空
    this.isDestructiveAction = false, // 是否是取消按钮（破坏性按钮），默认为false，非空
    this.textStyle, //字体的样式
    @required this.child, // 子组件
  }) : assert(child != null),
       assert(isDefaultAction != null),
       assert(isDestructiveAction != null),
       super(key: key);
  ....
}

Simple example:

showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
    
    
      return CupertinoAlertDialog(
        title: Text('我帅不帅？'),
        content: Text('\n我不关心你的回答，哈哈哈'),
        actions: [
          CupertinoDialogAction(
            child: Text('帅'),
            isDefaultAction: true, //是默认的，所以界面将是加粗样式
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('一般'),
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('丑'),
            isDestructiveAction: true,
            onPressed: () {
    
    
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );

Blog address: Roc's Blog