Flutter扩展组件插件more_widgets的使用

在Flutter开发中，有时我们需要一些额外的组件来丰富我们的应用界面。more_widgets 插件提供了多种自定义组件，以简化我们的开发工作。本指南将介绍如何使用 more_widgets 插件中的几个重要组件。

更多组件列表

GradientBackground

GradientBackground 组件用于显示一个渐变背景容器。以下是其参数列表：

final Widget child;
final List<Color> colors;       // 默认值 : const [Color(0xffff9800), Color(0xfff44336)]
final List<Color> darkColors;   // 默认值 : const [Color(0xff13191f), Color(0xff262f3c)]
final List<double> stops;       // 默认值 : const [0.2, 0.8]
final AlignmentGeometry begin;  // 默认值 : FractionalOffset.topLeft
final AlignmentGeometry end;    // 默认值 : FractionalOffset.bottomRight
final bool useDarkMode;         // 默认值 : true

RoundedContainer

RoundedContainer 组件用于显示一个圆角容器。默认颜色为白色。以下是其参数列表：

final Widget? child;
final Color color;            // 默认值 : Colors.white
final double circularRadius;  // 默认值 : 20
final double margin;          // 默认值 : 20
final double padding;         // 默认值 : 20

BottomActionSheet

BottomActionSheet 组件用于显示底部操作表。以下是其使用方法：

BottomActionSheet.show(
    required BuildContext context, // 小部件的上下文
    required List<BottomActionSheetAction> actions, // 操作列表
    String? title, // 操作表的标题
    String? message, // 操作表的消息
    BottomActionSheetAction? cancelButton, // 取消按钮
    bool useRootNavigator = false, // 是否使用根导航器
);

BottomActionSheetAction

BottomActionSheetAction 是底部操作表的操作项。以下是其参数列表：

const BottomActionSheetAction({
    required String title, // 操作的标题
    required VoidCallback onPressed, // 当操作被按下时的动作
    bool isDefaultAction = false, // 如果该操作是默认操作
    bool isDestructiveAction = false, // 如果该操作是破坏性操作
});

对话框列表

这些对话框会自动适应操作系统并相应地显示。

Dialogs.infoDialog

此对话框用于显示只带一个按钮的信息对话框。以下是其参数列表：

required BuildContext context,
required String title,
required String message,
String buttonText = "Ok",
bool popByDefault = true,
Function? onPressed,

Dialogs.dialogWithOptions

这是一个带选项的对话框，如果你想要弹出一个可以从中选择两个选项的对话框，其中一个选项可以设置为破坏性操作。以下是其参数列表：

required BuildContext context,
required String title,
required String message,
String textLeftButton = 'OK',
String textRightButton = 'Cancel',
Function? onPressedLeftButton,
Function? onPressedRightButton,
DestructiveAction destructiveAction = DestructiveAction.right,
DefaultAction defaultAction = DefaultAction.none,
Color androidDestructiveColor = Colors.red,
bool popByDefault = true,

Dialogs.textInputDialog

此方法将显示一个带有动作的对话框，对话框中有一个或两个按钮。以下是其参数列表：

required BuildContext context,
required String title,
required String message,
String textLeftButton = 'OK',
String textRightButton = 'Cancel',
Function? onPressedLeftButton,
Function? onPressedRightButton,
DestructiveAction destructiveAction = DestructiveAction.right,
DefaultAction defaultAction = DefaultAction.none,
Color androidDestructiveColor = Colors.red,
bool popByDefault = true,
bool hasSecondaryButton = true,
String? placeholder,
TextEditingController? controller,
TextInputType? keyboardType,
Function? onChanged,
Function? onEditingComplete,

Dialogs.loadingDialog

这是一个加载对话框。以下是其参数列表：

required BuildContext context,
String? title,

待办事项

• ❌ 适配对话框设计到 macOS
• ❌ 适配对话框设计到 Windows
• ❌ 适配对话框设计到 Linux
• ❌ 改进代码文档

示例代码

以下是一个完整的示例，展示了如何使用 more_widgets 插件中的多个组件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'MyEasyDialogs'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required 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),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () => Dialogs.infoDialog(
                  context: context,
                  title: "Example",
                  message: "I'm an infoDialog example !"),
              child: const Text("Show infoDialog"),
            ),
            TextButton(
              onPressed: () => Dialogs.dialogWithOptions(
                  context: context,
                  title: "Example",
                  message: "I'm an dialog with options example !",
                  textLeftButton: "Yes",
                  defaultAction: DefaultAction.left,
                  destructiveAction: DestructiveAction.right,
                  onPressedLeftButton: () => print("yes")),
              child: const Text("Show dialogWithOptions"),
            ),
            TextButton(
              onPressed: () => Dialogs.loadingDialog(
                  context: context,
                  title: "Loading..."),
              child: const Text("Show loadingDialog"),
            ),
            TextButton(
              onPressed: () => Dialogs.textInputDialog(
                  context: context,
                  title: "Loading...",
                  message: "I'm an textInputDialog example !",
              ),
              child: const Text("Show textInputDialog"),
            ),
            TextButton(
              onPressed: () => BottomActionSheet.show(
                context: context,
                title: "Example",
                message: "I'm an BottomActionSheet example !",
                actions: [
                  BottomActionSheetAction(
                    title: "Action 1",
                    onPressed: () => print("Action 1"),
                  ),
                  BottomActionSheetAction(
                    title: "Action 2",
                    onPressed: () => print("Action 2"),
                  ),
                ],
                cancelButton: BottomActionSheetAction(
                  title: "Cancel",
                  onPressed: () => print("Cancel"),
                ),
                useRootNavigator: true,
              ),
              child: const Text("Show BottomActionSheet"),
            )
          ],
        ),
      ),
    );
  }
}