Flutter自定义对话框插件fancy_flutter_dialog的使用

Flutter自定义对话框插件fancy_flutter_dialog的使用

使用此包作为库

平台支持

运行此命令

通过Flutter：

$ flutter pub add fancy_flutter_dialog

这将在你的包的pubspec.yaml文件中添加如下行（并运行隐式的flutter pub get）：

dependencies:
  fancy_flutter_dialog: ^1.0.0

或者，你的编辑器可能支持flutter pub get。请查阅你所使用的编辑器的文档以了解更多。

导入它

现在在你的Dart代码中，你可以使用：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 此小部件是你应用的根。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试用"flutter run"运行你的应用。你会看到应用有一个蓝色工具栏。然后，在不退出应用的情况下，尝试将primarySwatch改为Colors.green，然后触发"热重载"（在你运行"flutter run"的控制台中按"r"键，或者简单地保存更改以在Flutter IDE中触发"热重载"）。请注意，计数器不会重置为零；应用不会重新启动。
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Fancy Flutter Dialog'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观字段的状态对象。
  // 这个类是状态的配置。它保存了由父级（在这个例子中是App小部件）提供的值（在这个例子中是标题），并用于状态的构建方法。Widget子类中的字段总是被标记为"final"。

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这个对setState的调用告诉Flutter框架某些事情已经改变，这会导致它重新运行下面的构建方法，以便显示可以反映更新后的值。如果我们改变了_counter而不调用setState()，那么构建方法将不会再次被调用，因此什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，例如上面的_incrementCounter方法所做的那样。
    //
    // Flutter框架已经被优化为使重建方法快速运行，这样你就可以重建任何需要更新的东西，而不是必须逐个改变小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们从由App.build方法创建的MyHomePage对象中获取值，并用它来设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center是一个布局小部件。它接受一个子元素并将它放置在其父元素的中间。
        child: InkWell(
          child: Text("显示对话框"),
          onTap: () {
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return FancyAlertDialog(
                  title: "如果您喜欢我们的应用，请给我们评分",
                  backgroundColor: Color(0xFF303F9F),
                  message: "您真的要退出吗？",
                  negativeBtnText: "取消",
                  positiveBtnBackground: Color(0xFFFF4081),
                  positiveBtnText: "评分",
                  negativeBtnBackground: Color(0xFFA9A7A8),
                  onPositiveClicked: () {
                    // 点击了肯定按钮的动作
                    print("评分");
                  },
                  onNegativeClicked: () {
                    // 点击了否定按钮的动作
                    print("取消");
                  },
                );
              },
            );
          },
        ),
      ), // 这个尾随逗号使得构建方法的自动格式化更美观。
    );
  }
}