Flutter对话框管理插件flutter_app_dialog的使用

Flutter对话框管理插件flutter_app_dialog的使用

flutter_app_dialog 是一个用于在iOS和Android上简单且易于实现对话框的Flutter插件。

安装

在你的 pubspec.yaml 文件中添加 flutter_app_dialog 依赖：

dependencies:
  flutter_app_dialog: ^版本号

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

示例

以下是一些基本的示例代码，展示了如何使用 flutter_app_dialog 插件来创建不同类型的对话框。

基本对话框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return BaseDialogWidget(
      child: BasicDialog(
        title: '标题',
        content: '您的消息',
        titleStyle: TextStyle(color: Colors.blue),
        iconColor: Colors.red,
        contentStyle: TextStyle(color: Colors.blue),
      ),
    );
  });

信息对话框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return BaseDialogWidget(
      child: InfoDialog(
        title: '信息对话框',
        content: '您的消息',
        titleStyle: TextStyle(color: Colors.blue),
        contentStyle: TextStyle(color: Colors.blue),
      ),
    );
  });

无网络连接对话框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return BaseDialogWidget(
      child: NoInternetConnectionDialog(
        title: '无网络连接',
        content: '请检查您的连接状态并重试',
      ),
    );
  });

支付对话框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return BaseDialogWidget(
      child: PaymentDialog(
        icon: Icons.check_circle_outline,
        iconColor: Color.fromRGBO(126, 211, 33, 1),
        iconSize: 50,
        paymentStatus: '成功',
        message: '感谢您的支付',
        buttonName: '确定',
        onPressButton: () {
          print('按下按钮！');
        },
      ),
    );
  });

评分对话框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return BaseDialogWidget(
      child: RatingDialog(
        title: '享受我们的应用',
        titleStyle: TextStyle(color: Color.fromRGBO(42, 42, 48, 1), fontWeight: FontWeight.bold),
        description: '点击星星在App Store上评价。',
        positiveRatingColor: Colors.blue,
        negativeRatingColor: Colors.blue,
        positiveButtonName: '提交',
        negativeButtonName: '取消',
        onRatingSubmit: (value) {
          debugPrint('评分值: $value');
        },
      ),
    );
  });

完整示例代码

import 'package:flutter/material.dart';
import 'package:flutter_app_dialog/flutter_app_dialog.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      builder: (BuildContext context, child) => MaterialApp(
        theme: ThemeData(
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter App Dialog'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        backgroundColor: Color.fromRGBO(118, 80, 193, 1),
      ),
      body: _body(),
    );
  }

  /// 构建主体内容
  Widget _body() {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      alignment: Alignment.center,
      child: SingleChildScrollView(
        child: Column(
          children: [
            _baseButton(
                buttonName: '基本对话框',
                dialogWidget: BasicDialog(
                  title: '标题',
                  content: '您的消息',
                )),
            SizedBox(height: 20),

            /// 构建信息对话框
            _baseButton(buttonName: '信息对话框', dialogWidget: InfoDialog()),
            SizedBox(height: 20),

            /// 构建无网络连接对话框
            _baseButton(
                buttonName: '无网络连接',
                dialogWidget: NoInternetConnectionDialog()),
            SizedBox(height: 20),

            /// 构建支付对话框
            _baseButton(
                buttonName: '支付对话框', dialogWidget: PaymentDialog()),
            SizedBox(height: 20),

            /// 构建评分对话框
            _baseButton(
                buttonName: '评分对话框',
                dialogWidget: RatingDialog(
                  onRatingSubmit: (value) {
                    print('评分值: $value');
                  },
                )),
          ],
        ),
      ),
    );
  }

  /// 构建基础按钮
  Widget _baseButton({String buttonName, Widget dialogWidget}) {
    return Container(
        width: ScreenUtil().setWidth(200),
        height: ScreenUtil().setHeight(40),
        child: TextButton(
          child: Text(
            buttonName ?? '',
            textAlign: TextAlign.center,
            overflow: TextOverflow.clip,
            style: TextStyle(
              fontSize: 16,
              color: Colors.white,
            ),
          ),
          style: TextButton.styleFrom(
            backgroundColor: Color.fromRGBO(118, 80, 193, 1),
          ),
          onPressed: () {
            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return BaseDialogWidget(
                    child: dialogWidget ?? InfoDialog(),
                  );
                });
          },
        ));
  }
}