Flutter对话框展示插件flutter_dialog_shower的使用

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

Flutter对话框展示插件flutter_dialog_shower的使用

1. Loading & Alerts & Actions

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter DialogShower Demo')),
        body: Center(child: MyDialog()),
      ),
    );
  }
}

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State<MyDialog> with SingleTickerProviderStateMixin {
  bool _isShowing = false;

  void showLoadingDialog() {
    setState(() {
      _isShowing = true;
    });
  }

  void hideLoadingDialog() {
    setState(() {
      _isShowing = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (_isShowing) {
      return DialogShower(
        barrierDismissible: true,
        containerShadowColor: Colors.grey,
        containerShadowBlurRadius: 50.0,
        containerBorderRadius: 5.0,
        show: () {
          return CircularProgressIndicator();
        },
      );
    } else {
      return Container();
    }
  }
}

2. Various show & dismiss animation


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用Flutter对话框展示插件flutter_dialog_shower的示例代码。这个插件允许你以多种方式展示对话框，包括简单的消息对话框、输入对话框等。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_dialog_shower: ^x.y.z  # 请替换为最新版本号

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

以下是一个完整的示例代码，展示了如何使用flutter_dialog_shower插件来展示不同类型的对话框：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Dialog Shower Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => showMessageDialog(context),
                child: Text('Show Message Dialog'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => showInputDialog(context),
                child: Text('Show Input Dialog'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void showMessageDialog(BuildContext context) {
    DialogShower.showMessageDialog(
      context: context,
      title: 'Message',
      description: 'This is a message dialog.',
      positiveButton: DialogButton(
        text: 'OK',
        onPressed: () {
          // Handle OK button press
        },
      ),
    );
  }

  void showInputDialog(BuildContext context) {
    DialogShower.showInputDialog(
      context: context,
      title: 'Input',
      hintText: 'Enter something',
      positiveButton: DialogButton(
        text: 'Submit',
        onPressed: (String input) {
          // Handle input and submit
          print('User input: $input');
        },
      ),
    );
  }
}

在这个示例中：

  1. MyApp类定义了一个简单的Flutter应用，包含一个应用栏和两个按钮。
  2. showMessageDialog函数使用DialogShower.showMessageDialog方法展示一个消息对话框。这个对话框有一个标题、一个描述和一个“OK”按钮。
  3. showInputDialog函数使用DialogShower.showInputDialog方法展示一个输入对话框。这个对话框有一个标题、一个提示文本和一个“Submit”按钮。当用户点击“Submit”按钮时，会打印出用户输入的内容。

请注意，DialogButton类的onPressed回调函数根据对话框类型可能接受不同的参数（例如，输入对话框的onPressed回调函数接受一个String类型的参数）。

你可以根据需要进一步自定义对话框的外观和行为。希望这个示例对你有所帮助！

回到顶部