Flutter UI组件集合插件master_ui

Flutter UI组件集合插件master_ui_collection的使用

简介

master_ui_collection 是一个旨在简化UI开发的包。它提供了多种常用的UI组件，如文本框、按钮、单选组、轮播图、评分组件、骨架屏等。

示例代码

import 'package:flutter/material.dart';
import 'package:master_ui_collection/masterui.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',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Master UI Collection Example'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  void _showSnackBar() {
    MasterSnackbar.show(
        externalContext: context,
        content: const Icon(Icons.computer),
        elevation: 20,
        backgroundColor: Colors.yellow);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            // 示例：基础按钮
            MasterButton(
              buttonText: "测试",
              elevation: 10,
              backgroundColor: Colors.white,
              textColor: Colors.black,
              borderColor: Colors.black,
              size: MasterWidgetSize.large,
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：填充按钮
            MasterButton(
              buttonText: "填充",
              elevation: 0,
              backgroundColor: Colors.blue,
              textColor: Colors.black,
              size: MasterWidgetSize.large,
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：带圆角的按钮
            MasterButton(
              buttonText: "填充",
              elevation: 4,
              backgroundColor: Colors.blue,
              size: MasterWidgetSize.large,
              radius: 30,
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：小型按钮
            MasterButton(
              buttonText: "填充",
              elevation: 4,
              backgroundColor: Colors.blue,
              size: MasterWidgetSize.small,
              radius: 30,
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：仅图标按钮
            MasterButton(
              elevation: 4,
              iconOnly: true,
              backgroundColor: Colors.blue,
              size: MasterWidgetSize.medium,
              minWidth: 40,
              radius: 30,
              icon: const Icon(Icons.access_alarm),
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：小型图标按钮
            MasterButton(
              elevation: 4,
              iconOnly: true,
              backgroundColor: Colors.white,
              size: MasterWidgetSize.mini,
              borderColor: Colors.amber,
              minWidth: 70,
              textColor: Colors.blue,
              buttonText: 'Hi',
              icon: const Icon(
                Icons.ac_unit,
                color: Colors.blue,
              ),
              onPressed: () {
                setState(() {
                  print("Hello");
                });
              },
            ),
            
            // 示例：芯片组件
            MasterChips(
              onPressed: _showSnackBar,
              label: const Text('测试'),
              borderWidth: 3,
              enableBorder: true,
              // backgroundColor: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter UI组件集合插件master_ui_collection的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼

更多关于Flutter UI组件集合插件master_ui_collection的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

master_ui_collection 是一个 Flutter UI 组件集合插件，旨在为开发者提供一系列预构建的 UI 组件，以加速应用程序的开发过程。这个插件通常包含一些常用的 UI 元素，如按钮、卡片、对话框、表单字段等，可以帮助开发者快速构建一致且美观的用户界面。

安装 `master_ui_collection`

要使用 master_ui_collection，首先需要将其添加到你的 Flutter 项目的 pubspec.yaml 文件中。

dependencies:
  flutter:
    sdk: flutter
  master_ui_collection: ^1.0.0  # 请使用最新版本

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

使用 `master_ui_collection`

安装完成后，你可以在你的 Flutter 应用中导入并使用 master_ui_collection 提供的组件。

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Master UI Collection Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用 master_ui_collection 提供的按钮组件
            MasterButton(
              onPressed: () {
                print('Button Pressed');
              },
              text: 'Click Me',
            ),
            SizedBox(height: 20),
            // 使用 master_ui_collection 提供的卡片组件
            MasterCard(
              child: Text('This is a card from Master UI Collection'),
            ),
          ],
        ),
      ),
    );
  }
}

示例组件

以下是一些 master_ui_collection 中可能包含的组件示例：

MasterButton: 一个自定义的按钮组件，支持多种样式和事件处理。

MasterButton(
  onPressed: () {
    print('Button Pressed');
  },
  text: 'Click Me',
);

MasterCard: 一个带有阴影和圆角的卡片组件。

MasterCard(
  child: Text('This is a card from Master UI Collection'),
);

MasterDialog: 一个自定义的对话框组件，支持标题、内容和操作按钮。

MasterDialog(
  title: 'Alert',
  content: Text('This is a dialog from Master UI Collection'),
  actions: [
    MasterButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      text: 'OK',
    ),
  ],
);

MasterTextField: 一个自定义的文本输入框组件，支持标签、提示文本和验证。

MasterTextField(
  label: 'Username',
  hintText: 'Enter your username',
  onChanged: (value) {
    print(value);
  },
);

自定义主题

master_ui_collection 通常支持主题自定义，以便你可以根据你的应用程序设计调整组件的样式。你可以在 ThemeData 中设置自定义的颜色、字体等。

ThemeData(
  primarySwatch: Colors.blue,
  // 自定义按钮样式
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      primary: Colors.blue,
      onPrimary: Colors.white,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0),
      ),
    ),
  ),
),

Flutter UI组件集合插件master_ui_collection的使用