Flutter对话框插件proste_dialog的使用

Flutter对话框插件proste_dialog的使用

介绍

proste_dialog 插件的功能和设计灵感来源于 giffy_dialog，与 giffy_dialog 相比，它提供了更高的自由度和更强的可扩展性。你可以使用包中预设的各种提示类型，也可以设置要显示的任意小部件。与 giffy_dialog 不同的是，自定义不仅限于图片，还可以传递任何小部件或自定义动画。proste_dialog 需要通过 ShowDialog 来显示。如果你希望在显示过程中使用动画效果，可以参考 flutter_animated_dialog。

2.0.0 添加新的按钮布局

只需设置 btnInARow: false 即可。如果你想调整两个按钮之间的距离或者按钮与边界的距离，可以设置 confirmButtonMargin，这仅在 btnsInARow: false 时有效。

ProsteDialog(
  type: _tipType,
  content: Text('this is package preinstall dialog'),
  insetPadding: EdgeInsets.all(15),
  title: Text('this is package preinstall dialog title'),
  titlePadding: EdgeInsets.only(top: 20),
  contentPadding: EdgeInsets.all(15),
  confirmButtonColor: Colors.pink,
  confirmButtonText: Text('confirm', style: TextStyle(color: Colors.white)),
  cancelButtonText: Text('ignore', style: TextStyle(color: Colors.grey[600])),
  showConfirmButton: true,
  showCancelButton: true,
  btnsInARow: false,
  btnPadding: EdgeInsets.symmetric(vertical: 10),
  confirmButtonMargin: EdgeInsets.symmetric(horizontal: 50),
  buttonRadius: 20,
  onConfirm: () {
    print('preinstall confirm pressed');
    Navigator.pop(context);
  },
  onCancel: () {
    print('preinstall cancel pressed');
    Navigator.pop(context);
  },
);

使用

注意，如果你传递了 duration，对话框将在指定时间后自动消失。即使你的 showConfirmButton、showCancelButton 和 showCloseIcon 都为真，按钮也不会显示。

confirmButtonMargin 仅当 btnsInARow 为 false 时才有效。

1. ProsteDialog 包中预设动画提示对话框

参数名称 参数类型 默认值
insetPadding EdgeInsets EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)
dialogRadius double 5
type DialogTipType DialogTipType.success
title Widget null
content Widget null
titlePadding EdgeInsets EdgeInsets.only(top: 15, left: 15, right: 15)
contentPadding EdgeInsets EdgeInsets.all(10)
confirmButtonText Text Text(‘Confirm’)
cancelButtonText Text Text(‘Cancel’)
showConfirmButton bool true
showCancelButton bool true
buttonRadius double 5
confirmButtonColor Color null
cancelButtonColor Color null
onConfirm void Function() null
onCancel void Function() null
duration Duration null
background Color Colors.white
elevation double 0
shadowColor Color null
btnInARow boolean true
btnPadding EdgeInsets null
confirmButtonMargin EdgeInsets null 
showDialog(
  context: context,
  builder: (_) => ProsteDialog(
    type: _tipType,
    content: Text('this is package preinstall dialog'),
    insetPadding: EdgeInsets.all(15),
    dialogRadius: 10,
    title: Text('this is package preinstall dialog title'),
    titlePadding: EdgeInsets.only(top: 20),
    contentPadding: EdgeInsets.all(15),
    confirmButtonText: Text('next', style: TextStyle(color: Colors.white)),
    cancelButtonText: Text('back', style: TextStyle(color: Colors.green)),
    showConfirmButton: true,
    showCancelButton: true,
    confirmButtonColor: Colors.cyan,
    cancelButtonColor: Colors.black,
    onConfirm: () {
      print('preinstall confirm pressed');
      Navigator.pop(context);
    },
    onCancel: () {
      print('preinstall cancel pressed');
      Navigator.pop(context);
    },
  ),
);

2. ProsteCustomDialog 自定义对话框（带头部）

参数名称 参数类型 默认值
insetPadding EdgeInsets EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0)
dialogRadius double 5
header Widget null
title Widget null
content Widget null
titlePadding EdgeInsets EdgeInsets.only(top: 15, left: 15, right: 15)
contentPadding EdgeInsets EdgeInsets.all(10)
confirmButtonText Text Text(‘Confirm’)
cancelButtonText Text Text(‘Cancel’)
showConfirmButton bool true
showCancelButton bool true
buttonRadius double 5
confirmButtonColor Color null
cancelButtonColor Color null
onConfirm void Function() null
onCancel void Function() null
duration Duration null
background Color Colors.white
elevation double 0
shadowColor Color null
btnInARow boolean true
btnPadding EdgeInsets null
confirmButtonMargin EdgeInsets null 
showDialog(
  context: context,
  builder: (_) => ProsteCustomDialog(
    insetPadding: EdgeInsets.zero,
    dialogRadius: 50,
    header: AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) {
        return Container(
          height: _animation.value,
          alignment: Alignment.center,
          child: CircularProgressIndicator(),
        );
      },
    ),
    title: Text('this is diy title'),
    content: Text('this is diy dialog'),
    titlePadding: EdgeInsets.only(top: 20),
    contentPadding: EdgeInsets.only(top: 50),
    confirmButtonText: Text('next', style: TextStyle(color: Colors.white)),
    cancelButtonText: Text('back', style: TextStyle(color: Colors.green)),
    showConfirmButton: false,
    showCancelButton: true,
    confirmButtonColor: Colors.cyan,
    cancelButtonColor: Colors.black,
    onConfirm: () {
      print('diy confirm pressed');
      Navigator.pop(context);
    },
    onCancel: () {
      print('diy cancel pressed');
      Navigator.pop(context);
    },
  ),
);

3. ProsteAdvertiseDialog 只有图片的对话框

参数名称 参数类型 默认值
factor double (0< value <=1) .9
image ImageProvider required
closeIconColor Colors Colors.white70
onImagePressed void Function() null
showCloseIcon bool false
imageRadius BorderRadius BorderRadius.zero
closeBtnSize double 32
duration Duration null 
showDialog(
  context: context,
  builder: (_) => ProsteAdvertiseDialog(
    factor: .6,
    showCloseIcon: true,
    closeIconColor: Colors.pink,
    closeBtnSize: 20,
    image: NetworkImage(networkImg),
    imageRadius: BorderRadius.circular(10),
    onImagePressed: () {
      print('image pressed');
      Navigator.pop(context);
    },
    onClosePressed: () {
      print('close pressed');
      Navigator.pop(context);
    },
  ),
);

问题

如果遇到任何问题或发现错误，请提交到 issues，我会尽快处理，谢谢！

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyAppHome(),
    );
  }
}

class MyAppHome extends StatefulWidget {
  [@override](/user/override)
  _MyAppHomeState createState() => _MyAppHomeState();
}

class _MyAppHomeState extends State<MyAppHome> with SingleTickerProviderStateMixin {
  DialogTipType _tipType = DialogTipType.success;
  late Animation _animation;
  late AnimationController _animationController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: Duration(seconds: 1));
    _animation = Tween<double>(begin: 80, end: 200).animate(_animationController);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final String networkImg2 = 'https://hbimg.huabanimg.com/f9012b3b86d3d90eb3b2fa8742261026c1eaa88b9c44b-CvNWds_fw658/format/webp';
    final String networkImg = 'https://hbimg.huabanimg.com/06ef627a592f6c6b638720935b5e41782cafafe363c975-d13YKk/fw658/format/webp';
    final String assetImg = 'assets/images/demo_image.jpg';
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          child: Column(
            children: [
              Text('预装对话框类型'),
              SizedBox(height: 15),
              Row(
                children: [
                  Expanded(
                    child: RadioListTile<DialogTipType>(
                      dense: true,
                      contentPadding: EdgeInsets.zero,
                      value: DialogTipType.success,
                      title: Text('成功'),
                      groupValue: _tipType,
                      onChanged: (val) {
                        setState(() {
                          _tipType = val!;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: RadioListTile<DialogTipType>(
                      dense: true,
                      contentPadding: EdgeInsets.zero,
                      value: DialogTipType.warn,
                      title: Text('警告'),
                      groupValue: _tipType,
                      onChanged: (val) {
                        setState(() {
                          _tipType = val!;
                        });
                      },
                    ),
                  ),
                  Expanded(
                    child: RadioListTile<DialogTipType>(
                      dense: true,
                      contentPadding: EdgeInsets.zero,
                      value: DialogTipType.error,
                      title: Text('错误'),
                      groupValue: _tipType,
                      onChanged: (val) {
                        setState(() {
                          _tipType = val!;
                        });
                      },
                    ),
                  ),
                ],
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteDialog(
                      onCancel: () {
                        print('文本富提示关闭');
                        Navigator.pop(context);
                      },
                      content: Text.rich(
                        TextSpan(children: [
                          TextSpan(text: '现在'),
                          TextSpan(text: '获取', style: TextStyle(color: Colors.red)),
                          TextSpan(text: '一些东西', style: TextStyle(color: Colors.blue))
                        ]),
                      ),
                    ),
                  );
                },
                child: Text('文本富提示按钮'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteCustomDialog(
                      onConfirm: () {
                        print('滚动确认');
                        Navigator.pop(context);
                      },
                      content: Container(
                        height: 100,
                        child: SingleChildScrollView(
                          child: Column(
                            children: List.generate(15, (index) => Text('这是一行')),
                          ),
                        ),
                      ),
                      header: Image.asset(
                        assetImg,
                        fit: BoxFit.cover,
                      ),
                    ),
                  );
                },
                child: Text('滚动内容对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteDialog(
                      type: _tipType,
                      content: Text('这是预装对话框', style: TextStyle(color: Colors.white)),
                      insetPadding: EdgeInsets.all(15),
                      dialogRadius: 10,
                      title: Text('这是预装对话框标题'),
                      titlePadding: EdgeInsets.only(top: 20),
                      contentPadding: EdgeInsets.all(15),
                      confirmButtonText: Text('下一步', style: TextStyle(color: Colors.white)),
                      cancelButtonText: Text('返回', style: TextStyle(color: Colors.green)),
                      showConfirmButton: true,
                      showCancelButton: true,
                      confirmButtonColor: Colors.cyan,
                      cancelButtonColor: Colors.black,
                      backgroundColor: Colors.transparent,
                      elevation: 8,
                      shadowColor: Colors.green,
                      onConfirm: () {
                        print('预装确认按钮按下');
                        Navigator.pop(context);
                      },
                      onCancel: () {
                        print('预装取消按钮按下');
                        Navigator.pop(context);
                      },
                      duration: Duration(seconds: 3),
                    ),
                  );
                },
                child: Text('自动关闭预装对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteDialog(
                      type: _tipType,
                      content: Text('这是预装对话框'),
                      insetPadding: EdgeInsets.all(15),
                      dialogRadius: 10,
                      title: Text('这是预装对话框标题'),
                      titlePadding: EdgeInsets.only(top: 20),
                      contentPadding: EdgeInsets.all(15),
                      confirmButtonText: Text('下一步', style: TextStyle(color: Colors.white)),
                      cancelButtonText: Text('返回', style: TextStyle(color: Colors.green)),
                      showConfirmButton: true,
                      showCancelButton: true,
                      confirmButtonColor: Colors.cyan,
                      cancelButtonColor: Colors.black,
                      onConfirm: () {
                        print('预装确认按钮按下');
                        Navigator.pop(context);
                      },
                      onCancel: () {
                        print('预装取消按钮按下');
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
                child: Text('预装对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteDialog(
                      type: _tipType,
                      dialogRadius: 7,
                      content: Text('这是预装对话框'),
                      insetPadding: EdgeInsets.all(15),
                      title: Text('这是预装对话框标题'),
                      titlePadding: EdgeInsets.only(top: 20),
                      contentPadding: EdgeInsets.all(15),
                      confirmButtonColor: Colors.pink,
                      confirmButtonText: Text('确认', style: TextStyle(color: Colors.white)),
                      cancelButtonText: Text('忽略', style: TextStyle(color: Colors.grey[600])),
                      showConfirmButton: true,
                      showCancelButton: true,
                      btnsInARow: false,
                      btnPadding: EdgeInsets.symmetric(vertical: 10),
                      confirmButtonMargin: EdgeInsets.symmetric(horizontal: 50),
                      buttonRadius: 20,
                      onConfirm: () {
                        print('预装确认按钮按下');
                        Navigator.pop(context);
                      },
                      onCancel: () {
                        print('预装取消按钮按下');
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
                child: Text('列布局按钮'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteCustomDialog(
                      content: Text('这是自动关闭对话框'),
                      showCancelButton: true,
                      showConfirmButton: true,
                      dialogRadius: 10,
                      header: Image.asset(
                        assetImg,
                        fit: BoxFit.cover,
                      ),
                      backgroundColor: Colors.pink,
                      duration: Duration(seconds: 2),
                    ),
                  );
                },
                child: Text('自动关闭对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  if (_animationController.isCompleted) {
                    _animationController.reverse();
                  } else if (_animationController.isDismissed) {
                    _animationController.forward();
                  }
                  showDialog(
                    context: context,
                    builder: (_) => ProsteCustomDialog(
                      insetPadding: EdgeInsets.symmetric(horizontal: 30),
                      dialogRadius: 8,
                      header: AnimatedBuilder(
                        animation: _animationController,
                        builder: (context, child) {
                          return Container(
                            height: _animation.value,
                            alignment: Alignment.center,
                            child: CircularProgressIndicator(),
                          );
                        },
                      ),
                      title: Text('这是自定义标题'),
                      content: Text('这是自定义对话框'),
                      titlePadding: EdgeInsets.only(top: 20),
                      contentPadding: EdgeInsets.only(top: 50),
                      confirmButtonText: Text('下一步', style: TextStyle(color: Colors.white)),
                      cancelButtonText: Text('返回', style: TextStyle(color: Colors.green)),
                      showConfirmButton: false,
                      showCancelButton: true,
                      confirmButtonColor: Colors.cyan,
                      cancelButtonColor: Colors.black,
                      btnPadding: EdgeInsets.symmetric(horizontal: 100),
                      onConfirm: () {
                        print('自定义确认按钮按下');
                        Navigator.pop(context);
                      },
                      onCancel: () {
                        print('自定义取消按钮按下');
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
                child: Text('自定义小部件对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteCustomDialog(
                      insetPadding: EdgeInsets.all(15),
                      dialogRadius: 15,
                      header: Image.asset(
                        assetImg,
                        fit: BoxFit.cover,
                      ),
                      title: Text('这是标题'),
                      content: Text('这是内容'),
                      titlePadding: EdgeInsets.only(top: 50),
                      contentPadding: EdgeInsets.symmetric(vertical: 80),
                      confirmButtonText: Text('去', style: TextStyle(color: Colors.white)),
                      cancelButtonText: Text('返回', style: TextStyle(color: Colors.green)),
                      showConfirmButton: true,
                      showCancelButton: false,
                      buttonRadius: 80,
                      confirmButtonColor: Colors.pink,
                      cancelButtonColor: Colors.amber,
                      onConfirm: () {
                        print('确认按钮按下');
                        Navigator.pop(context);
                      },
                      onCancel: () {
                        print('取消按钮按下');
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
                child: Text('自定义图片对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteAdvertiseDialog(
                      factor: 1,
                      showCloseIcon: true,
                      closeIconColor: Colors.pink,
                      closeBtnSize: 20,
                      image: NetworkImage(networkImg2),
                      imageRadius: BorderRadius.circular(10),
                      onImagePressed: () {
                        print('图片按下');
                        Navigator.pop(context);
                      },
                      onClosePressed: () {
                        print('关闭按下');
                        Navigator.pop(context);
                      },
                      duration: Duration(seconds: 2),
                    ),
                  );
                },
                child: Text('自动关闭广告对话框'),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (_) => ProsteAdvertiseDialog(
                      factor: .6,
                      showCloseIcon: true,
                      closeIconColor: Colors.pink,
                      closeBtnSize: 20,
                      image: NetworkImage(networkImg),
                      imageRadius: BorderRadius.circular(10),
                      onImagePressed: () {
                        print('图片按下');
                        Navigator.pop(context);
                      },
                      onClosePressed: () {
                        print('关闭按下');
                        Navigator.pop(context);
                      },
                    ),
                  );
                },
                child: Text('广告对话框'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter对话框插件proste_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter对话框插件proste_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 proste_dialog 插件在 Flutter 中创建对话框的示例代码。proste_dialog 是一个用于简化对话框创建的 Flutter 插件。以下是一个简单的使用案例，展示了如何在你的 Flutter 应用中使用它。

首先，你需要在你的 pubspec.yaml 文件中添加 proste_dialog 依赖：

dependencies:
  flutter:
    sdk: flutter
  proste_dialog: ^最新版本号  # 请替换为实际的最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，在你的 Dart 文件中导入 proste_dialog 包，并展示不同类型的对话框。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Proste Dialog Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ProsteDialog _prosteDialog = ProsteDialog();

  void _showAlertDialog() {
    _prosteDialog.alert(
      context,
      title: 'Alert Dialog',
      message: 'This is an alert dialog!',
      okText: 'OK',
      onOk: () {
        // Do something when OK is clicked
        print('Alert Dialog OK clicked');
      },
    );
  }

  void _showConfirmDialog() {
    _prosteDialog.confirm(
      context,
      title: 'Confirm Dialog',
      message: 'Are you sure you want to proceed?',
      okText: 'Yes',
      cancelText: 'No',
      onOk: () {
        // Do something when OK is clicked
        print('Confirm Dialog Yes clicked');
      },
      onCancel: () {
        // Do something when Cancel is clicked
        print('Confirm Dialog No clicked');
      },
    );
  }

  void _showLoadingDialog() {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return _prosteDialog.loading(
          context,
          message: 'Loading...',
        );
      },
    );
    // Simulate a loading process
    Future.delayed(Duration(seconds: 3), () {
      Navigator.of(context).pop(); // Dismiss the loading dialog after 3 seconds
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Proste Dialog Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: _showAlertDialog,
              child: Text('Show Alert Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showConfirmDialog,
              child: Text('Show Confirm Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _showLoadingDialog,
              child: Text('Show Loading Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了三种类型的对话框：

  1. Alert Dialog：一个简单的警告对话框，点击 “OK” 按钮时会触发 onOk 回调。
  2. Confirm Dialog：一个确认对话框，包含 “Yes” 和 “No” 按钮，分别触发 onOk 和 onCancel 回调。
  3. Loading Dialog：一个加载对话框，显示一个加载消息。我们使用 Future.delayed 模拟了一个加载过程，3 秒后自动关闭对话框。

请注意，proste_dialog 插件的具体方法和参数可能会随着版本更新而变化，因此请参考其官方文档以获取最新的使用方法和最佳实践。

回到顶部