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

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

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

flutter_dialogs 是一个轻量级且平台感知的插件，用于在Android和iOS设备上显示对话框和警报。它支持null-safety和Flutter 2.0。

特性

  • 平台感知
  • 可扩展的小部件
  • 轻量级 (< 28 KB)

使用方法

示例1：基本警告对话框

showPlatformDialog(
  context: context,
  builder: (context) => BasicDialogAlert(
    title: Text("Current Location Not Available"),
    content: Text("Your current location cannot be determined at this time."),
    actions: <Widget>[
      BasicDialogAction(
        title: Text("OK"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
);

输出

iOS Android
ios-basic-dialog-alert android-basic-dialog-alert

示例2：确认对话框

showPlatformDialog(
  context: context,
  builder: (context) => BasicDialogAlert(
    title: Text("Discard draft?"),
    content: Text("Action cannot be undone."),
    actions: <Widget>[
      BasicDialogAction(
        title: Text("Cancel"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      BasicDialogAction(
        title: Text("Discard"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
);

输出

iOS Android
ios-basic-dialog-confirmation android-basic-dialog-confirmation

示例3：列表选择对话框

showPlatformDialog(
  context: context,
  builder: (context) => BasicDialogAlert(
    title: Text("Select account"),
    content: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          _buildListItem("hi@example.com"),
          _buildListItem("joshua@joshuamdeguzman.com"),
          _buildListItem("joshua@flutter.ph"),
          _buildListItem("jdeguzman@freelancer.com"),
          _buildListItem("team@flutter.ph"),
        ],
      ),
    ),
    actions: <Widget>[
      BasicDialogAction(
        title: Text("Cancel"),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
    ],
  ),
);

Widget _buildListItem(String title) {
  return Column(
    children: [
      Container(
        height: 48,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(child: Text(title)),
          ],
        ),
      ),
      const Divider(height: 0.5),
    ],
  );
}

输出

iOS Android
ios-basic-dialog-list android-basic-dialog-list

完整示例代码

以下是包含上述所有对话框类型的完整示例代码：

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

void main() => runApp(ExampleApp());

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Dialogs Example",
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExampleScreen(),
    );
  }
}

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 15.0),
          child: Container(
            width: 300,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                ElevatedButton(
                  onPressed: () => _showAlert(context),
                  child: const Text("Show Alert"),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => _showConfirmationAlert(context),
                  child: const Text("Show Confirmation Alert"),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () => _showListAlert(context),
                  child: const Text("Show List Alert"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _showAlert(BuildContext context) {
    showPlatformDialog(
      context: context,
      builder: (_) => BasicDialogAlert(
        title: Text("Current Location Not Available"),
        content: Text("Your current location cannot be determined at this time."),
        actions: <Widget>[
          BasicDialogAction(
            title: Text("OK"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

  _showConfirmationAlert(BuildContext context) {
    showPlatformDialog(
      context: context,
      builder: (_) => BasicDialogAlert(
        title: Text("Discard draft?"),
        content: Text("Action cannot be undone."),
        actions: <Widget>[
          BasicDialogAction(
            title: Text("Cancel"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
          BasicDialogAction(
            title: Text("Discard"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

  _showListAlert(BuildContext context) {
    showPlatformDialog(
      context: context,
      builder: (_) => BasicDialogAlert(
        title: Text("Select account"),
        content: SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              _buildListItem("hi@example.com"),
              _buildListItem("joshua@joshuamdeguzman.com"),
              _buildListItem("joshua@flutter.ph"),
              _buildListItem("jdeguzman@freelancer.com"),
              _buildListItem("team@flutter.ph"),
            ],
          ),
        ),
        actions: <Widget>[
          BasicDialogAction(
            title: Text("Cancel"),
            onPressed: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }

  Widget _buildListItem(String title) {
    return Column(
      children: [
        Container(
          height: 48,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Expanded(child: Text(title)),
            ],
          ),
        ),
        const Divider(height: 0.5),
      ],
    );
  }
}

许可证

MIT License 查看详细信息


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 flutter_dialogs 插件在 Flutter 中管理对话框的示例代码。flutter_dialogs 是一个方便的插件，用于在 Flutter 应用中显示各种对话框。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_dialogs: ^2.0.0  # 请检查最新版本号

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

接下来是一个完整的 Flutter 应用示例，展示如何使用 flutter_dialogs 来显示不同类型的对话框：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  void showAlertDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text('Alert Dialog'),
          content: Text('This is an alert dialog.'),
          actions: [
            FlatButton(
              child: Text('OK'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  void showConfirmationDialog() {
    showConfirmationDialog(
      context: context,
      title: 'Confirmation Dialog',
      content: 'Are you sure you want to proceed?',
      confirmButtonText: 'Yes',
      cancelButtonText: 'No',
      onConfirm: () {
        print('Confirmed');
      },
      onCancel: () {
        print('Cancelled');
      },
    );
  }

  void showInputDialog() {
    showInputDialog(
      context: context,
      title: 'Input Dialog',
      hintText: 'Enter some text',
      onConfirm: (String value) {
        print('Input: $value');
      },
      onCancel: () {
        print('Cancelled');
      },
    );
  }

  void showLoadingDialog() {
    showLoadingDialog(context, message: 'Loading...');
    // Simulate a loading process with a delay
    Future.delayed(Duration(seconds: 2), () {
      Navigator.of(context).pop();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dialogs Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: showAlertDialog,
              child: Text('Show Alert Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showConfirmationDialog,
              child: Text('Show Confirmation Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showInputDialog,
              child: Text('Show Input Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: showLoadingDialog,
              child: Text('Show Loading Dialog'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们展示了如何使用 flutter_dialogs 插件来显示四种不同类型的对话框：

  1. Alert Dialog：标准的警告对话框。
  2. Confirmation Dialog：确认对话框，带有确认和取消按钮。
  3. Input Dialog：输入对话框，允许用户输入文本。
  4. Loading Dialog：加载对话框，通常用于显示加载状态。

你可以根据需要调整这些对话框的样式和行为。flutter_dialogs 插件提供了方便的封装，使得在 Flutter 应用中管理对话框变得更加简单。

回到顶部