Flutter UI快速构建插件devmagic_ui的使用

Flutter UI快速构建插件devmagic_ui的使用

Devmagic UI Kit

项目是一个为Flutter提供的可视化组件库。

开始使用

在您的Flutter项目中添加此插件，可以通过以下命令实现：

flutter pub add devmagic_ui

使用示例

文本样式

您可以使用devmagic_ui提供的方法快速创建不同样式的文本。

Text("Headline 1").uiH1(),
Text("Headline 2").uiH2(),
Text("Headline 3").uiH3(),
Text("Headline 4").uiH4(),
Text("Headline 5").uiH5(),
Text("Headline 6").uiH6(),
Text("Subtitle 1").uiSubtitle1(),
Text("Subtitle 2").uiSubtitle2(),
Text("Body 1").uiTextBody1(),
Text("Body 2").uiTextBody2(),
Text("Button").uiTextButton(),
Text("Caption").uiTextCaption(),
Text("OVERLINE").uiTextOverline(),

如果需要对某个文本进行个性化定制，可以传递TextStyle参数，例如：

Text("Headline 1").uiH1(
  style: TextStyle(
    fontWeight: FontWeight.w800 // 设置字体加粗
  ),
),

按钮样式

通过UIDevButton快速构建按钮，并自定义其外观和行为。

UIDevButton(
  onPressed: () => Navigator.of(context).pushNamed("/texts"), // 点击事件
  width: double.maxFinite, // 宽度设置为最大
  height: 50, // 高度设置为50
  elementsButton: [ 
    Icon(Icons.plus_one), // 添加图标
    Text("Texts").uiTextButton() // 添加文字
  ],
),

更多关于Flutter UI快速构建插件devmagic_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter UI快速构建插件devmagic_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


devmagic_ui 是一个用于快速构建 Flutter UI 的插件，它提供了一系列预定义的组件和工具，帮助开发者更高效地创建用户界面。以下是如何使用 devmagic_ui 插件的基本步骤：

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 devmagic_ui 依赖：

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

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

2. 导入插件

在你的 Dart 文件中导入 devmagic_ui：

import 'package:devmagic_ui/devmagic_ui.dart';

3. 使用预定义组件

devmagic_ui 提供了许多预定义的组件，你可以直接在项目中使用。以下是一些常见的组件示例：

按钮

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

文本输入框

DMTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Text changed: $value');
  },
);

卡片

DMCard(
  child: Text('This is a card'),
);

列表项

DMListItem(
  title: 'List Item Title',
  subtitle: 'List Item Subtitle',
  onTap: () {
    print('List Item Tapped');
  },
);

4. 自定义主题

devmagic_ui 允许你自定义主题以适应你的应用风格。你可以通过 DMTheme 来设置全局主题：

DMTheme(
  primaryColor: Colors.blue,
  accentColor: Colors.green,
  child: MyApp(),
);

5. 响应式布局

devmagic_ui 还提供了一些响应式布局的工具，帮助你在不同屏幕尺寸上更好地展示内容：

DMResponsive(
  mobile: Text('Mobile Layout'),
  tablet: Text('Tablet Layout'),
  desktop: Text('Desktop Layout'),
);

6. 其他工具

devmagic_ui 还包含其他一些有用的工具，如 DMToast 用于显示提示信息，DMLoader 用于显示加载指示器等。

DMToast.show('This is a toast message');

DMLoader.show();

7. 示例代码

以下是一个简单的示例，展示了如何使用 devmagic_ui 构建一个基本的用户界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DevMagic UI Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              DMButton(
                text: 'Click Me',
                onPressed: () {
                  DMToast.show('Button Pressed');
                },
              ),
              SizedBox(height: 20),
              DMTextField(
                hintText: 'Enter your name',
                onChanged: (value) {
                  print('Text changed: $value');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部