Flutter对话框插件panara_dialogs的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter对话框插件panara_dialogs的使用

简介

Panara Dialogs 是一个包含3种类型对话框（信息对话框、确认对话框和自定义对话框）的UI工具包，每种对话框都带有不同的变体和动画效果。以下是关于如何在Flutter项目中使用此插件的详细说明。

预览

PanaraInfoDialog

success normal warning error

PanaraConfirmDialog

success normal warning error

开始使用

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  panara_dialogs: ^0.1.5

导入包

在Dart文件中导入panara_dialogs包：

import 'package:panara_dialogs/panara_dialogs.dart';

使用示例

PanaraInfoDialog 示例

展示一个信息对话框：

PanaraInfoDialog.show(
    context,
    title: "Hello",
    message: "This is the PanaraInfoDialog",
    buttonText: "Okay",
    onTapDismiss: () {
        Navigator.pop(context);
    },
    panaraDialogType: PanaraDialogType.normal,
    barrierDismissible: false, // optional parameter (default is true)
);

PanaraConfirmDialog 示例

展示一个确认对话框：

PanaraConfirmDialog.show(
    context,
    title: "Hello",
    message: "This is the PanaraConfirmDialog",
    confirmButtonText: "Confirm",
    cancelButtonText: "Cancel",
    onTapCancel: () {
        Navigator.pop(context);
    },
    onTapConfirm: () {
        Navigator.pop(context);
    },
    panaraDialogType: PanaraDialogType.normal,
    barrierDismissible: false, // optional parameter (default is true)
);

PanaraCustomDialog 示例

展示一个自定义对话框：

PanaraCustomDialog.show(
    context,
    children: [
        Text(
            "Hello",
            style: TextStyle(
                fontSize: 20,
            ),
            textAlign: TextAlign.center,
        ),
        Text(
            "This is the PanaraCustomDialog",
            style: TextStyle(
                    fontSize: 16
                ),
            textAlign: TextAlign.center,
        ),
        // Add your own widgets here
    ],
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    backgroundColor: Colors.white,
    margin: EdgeInsets.all(20),
    padding: EdgeInsets.all(20),
    barrierDismissible: false, // optional parameter (default is true)
);

动画方法

对于所有对话框，还可以使用静态方法来添加动画效果：

方法 动画
showAnimatedFromLeft() 从左滑动动画
showAnimatedFromRight() 从右滑动动画
showAnimatedFromTop() 从上滑动动画
showAnimatedFromBottom() 从下滑动动画
showAnimatedGrow() 从中心生长动画
showAnimatedShrink() 从中心缩小动画
showAnimatedFade() 淡入淡出动画

完整示例代码

以下是一个完整的示例代码，展示了如何在一个Flutter应用程序中使用panara_dialogs插件：

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

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

ValueNotifier<ThemeMode> _themeMode = ValueNotifier<ThemeMode>(ThemeMode.system);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: _themeMode,
      builder: (context, value, child) => MaterialApp(
        title: 'Panara Dialogs Demo',
        themeMode: value,
        theme: ThemeData(
          useMaterial3: true,
          primarySwatch: Colors.blue,
        ),
        darkTheme: ThemeData.dark(useMaterial3: true),
        home: const MyHomePage(title: 'Panara Dialogs Demo'),
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          ValueListenableBuilder(
            valueListenable: _themeMode,
            builder: (context, value, child) => IconButton(
              onPressed: () {
                if (value == ThemeMode.system) {
                  _themeMode.value = ThemeMode.light;
                } else if (value == ThemeMode.light) {
                  _themeMode.value = ThemeMode.dark;
                } else {
                  _themeMode.value = ThemeMode.system;
                }
              },
              icon: Icon(
                value == ThemeMode.system
                    ? Icons.brightness_auto
                    : value == ThemeMode.light
                        ? Icons.brightness_high
                        : Icons.brightness_low,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            const SizedBox(height: 10),
            const Text("PanaraInfoDialog & It's Variants"),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraInfoDialog.show(
                  context,
                  title: "Hello",
                  message: "This is the Panara Info Dialog Success.",
                  buttonText: "Okay",
                  onTapDismiss: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.success,
                );
              },
              child: const Text("Show Success Info"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraInfoDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Info Dialog Normal.",
                  buttonText: "Okay",
                  onTapDismiss: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.normal,
                );
              },
              child: const Text("Show Normal Info"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraInfoDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Info Dialog Warning.",
                  buttonText: "Okay",
                  onTapDismiss: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.warning,
                );
              },
              child: const Text("Show Warning Info"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraInfoDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Info Dialog Error.",
                  buttonText: "Okay",
                  onTapDismiss: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.error,
                );
              },
              child: const Text("Show Error Info"),
            ),
            const SizedBox(height: 10),
            const Text("PanaraConfirmDialog & It's Variants"),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Success.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.success,
                );
              },
              child: const Text("Show Success Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Normal.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.normal,
                );
              },
              child: const Text("Show Normal Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Warning.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.warning,
                );
              },
              child: const Text("Show Warning Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Error.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.error,
                );
              },
              child: const Text("Show Error Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Success.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.success,
                  noImage: true,
                );
              },
              child: const Text("Show No Image Success Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Normal.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.normal,
                  noImage: true,
                );
              },
              child: const Text("Show No Image Normal Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Warning.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.warning,
                  noImage: true,
                );
              },
              child: const Text("Show No Image Warning Confirm"),
            ),
            const SizedBox(height: 10),
            TextButton(
              onPressed: () {
                PanaraConfirmDialog.showAnimatedGrow(
                  context,
                  title: "Hello",
                  message: "This is the Panara Confirm Dialog Error.",
                  confirmButtonText: "Confirm",
                  cancelButtonText: "Cancel",
                  onTapCancel: () => Navigator.pop(context),
                  onTapConfirm: () => Navigator.pop(context),
                  panaraDialogType: PanaraDialogType.error,
                  noImage: true,
                );
              },
              child: const Text("Show No Image Error Confirm"),
            ),
            const SizedBox(height: 10),
          ],
        ),
      ),
    );
  }
}

通过以上步骤和示例代码，您可以在Flutter项目中轻松集成并使用panara_dialogs插件。希望这些信息对您有所帮助！如果有任何问题或需要进一步的帮助，请随时反馈。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用panara_dialogs插件的示例代码。这个插件提供了一系列美观和易用的对话框，可以大大简化对话框的创建和管理。

首先，确保你已经在pubspec.yaml文件中添加了panara_dialogs依赖：

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

然后，运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用panara_dialogs来显示不同类型的对话框：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final PanaraDialogs _panaraDialogs = PanaraDialogs();

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

  void _showAlertDialog(BuildContext context) {
    _panaraDialogs.alertDialog(
      context: context,
      title: 'Alert Dialog',
      description: 'This is an alert dialog.',
      positiveButton: DialogButton(
        text: 'OK',
        color: Colors.blue,
        onPressed: () {
          // Handle OK button press
        },
      ),
    );
  }

  void _showConfirmDialog(BuildContext context) {
    _panaraDialogs.confirmDialog(
      context: context,
      title: 'Confirm Dialog',
      description: 'Are you sure you want to proceed?',
      positiveButton: DialogButton(
        text: 'Yes',
        color: Colors.green,
        onPressed: () {
          // Handle Yes button press
        },
      ),
      negativeButton: DialogButton(
        text: 'No',
        color: Colors.red,
        onPressed: () {
          // Handle No button press
        },
      ),
    );
  }

  void _showLoadingDialog(BuildContext context) {
    _panaraDialogs.loadingDialog(
      context: context,
      title: 'Loading',
      description: 'Please wait...',
    );

    // Simulate a loading process (e.g., network request)
    Future.delayed(Duration(seconds: 3), () {
      // Hide the loading dialog after 3 seconds
      Navigator.of(context).pop();
    });
  }
}

解释

  1. 依赖添加：在pubspec.yaml中添加panara_dialogs依赖。
  2. 创建主应用：MyApp是一个简单的Flutter应用，包含了一个主页面MyHomePage。
  3. 主页面布局：MyHomePage包含三个按钮，分别用于显示不同类型的对话框。
  4. 对话框显示：
    • _showAlertDialog方法使用_panaraDialogs.alertDialog来显示一个警告对话框。
    • _showConfirmDialog方法使用_panaraDialogs.confirmDialog来显示一个确认对话框。
    • _showLoadingDialog方法使用_panaraDialogs.loadingDialog来显示一个加载对话框，并在3秒后自动关闭。

你可以根据实际需求进一步自定义这些对话框的样式和行为。希望这个示例对你有帮助！

回到顶部