Flutter UI组件库插件melo_ui的使用

melo_ui

在 Flutter 中实现 Melo Technology 的设计系统。

简介

此插件简化了 Web、Android 和 iOS 平台上的项目开发。

多个包

• MeloUIButton
• MeloUITextField
• MeloUIErrorSnackbar
• MeloUISuccessSnackbar

如何使用

通过调用 MeloUITheme 类中的静态方法 generateTheme 来生成一个 ThemeData。你可以这样使用：

MeloUITheme.generateTheme()

或者指定颜色：

MeloUITheme.generateTheme(colors: MeloUIColors())

然后导入所需的 widget 即可。

示例代码

以下是一个完整的示例代码，展示了如何使用 melo_ui 插件。

示例代码文件路径

example/lib/main.dart

示例代码

import 'package:example/test_page.dart'; // 导入测试页面
import 'package:flutter/material.dart';
import 'package:melo_ui/melo_ui.dart'; // 导入 melo_ui 包

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({super.key}); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 返回 Material 应用程序
    return MaterialApp(
      title: 'Flutter Demo', // 设置应用标题
      theme: MeloUITheme.generateTheme(), // 使用 melo_ui 生成的主题
      home: Material( // 设置主页
        color: Colors.grey, // 设置背景色为灰色
        child: TestPage(), // 设置主页内容为 TestPage
      ),
    );
  }
}

测试页面示例

假设你有一个 TestPage 组件，它使用了 MeloUIButton 和 MeloUITextField。以下是一个简单的 TestPage 示例。

TestPage 代码

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

class TestPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用 MeloUITextField 创建文本输入框
          MeloUITextField(
            label: "请输入",
            hint: "提示文字",
            onChanged: (value) {
              print("输入值: $value");
            },
          ),
          SizedBox(height: 20), // 添加间距
          // 使用 MeloUIButton 创建按钮
          MeloUIButton(
            text: "点击我",
            onPressed: () {
              print("按钮被点击");
            },
          ),
        ],
      ),
    );
  }
}