Flutter优质UI组件插件good_ui的使用

Flutter优质UI组件插件good_ui的使用

特性

本包提供了多种漂亮的UI组件，如按钮、输入框等。

开始使用

只需要导入包并使用即可。

示例代码

example/lib/main.dart

import 'package:good_ui/good_ui.dart'; // 导入good_ui包
import 'package:flutter/material.dart';

import 'example_view.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(
        primaryColor: kcPrimaryColor, // 主色调
      ),
      home: const ExampleView(), // 首页
    );
  }
}

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

1 回复

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


good_ui 是一个 Flutter 插件，旨在提供一组高质量、易于使用的 UI 组件，帮助开发者快速构建美观且功能丰富的应用界面。以下是如何使用 good_ui 插件的基本步骤和一些常见组件的示例。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 good_ui 插件的依赖。

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

然后，运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 good_ui 包。

import 'package:good_ui/good_ui.dart';

3. 使用组件

good_ui 提供了多种 UI 组件，以下是一些常见组件的使用示例。

3.1 按钮组件

GoodButton 是一个自定义的按钮组件，支持多种样式和点击事件。

GoodButton(
  onPressed: () {
    print('Button Pressed!');
  },
  text: 'Click Me',
  color: Colors.blue,
  textColor: Colors.white,
)

3.2 卡片组件

GoodCard 是一个带有阴影和圆角的卡片组件。

GoodCard(
  child: Column(
    children: [
      Text('Card Title', style: TextStyle(fontSize: 20)),
      SizedBox(height: 10),
      Text('This is a card with some content.'),
    ],
  ),
)

3.3 文本输入框

GoodTextField 是一个自定义的文本输入框，支持多种样式和输入验证。

GoodTextField(
  hintText: 'Enter your name',
  onChanged: (value) {
    print('Input: $value');
  },
)

3.4 加载指示器

GoodLoadingIndicator 是一个自定义的加载指示器，支持多种样式。

GoodLoadingIndicator(
  color: Colors.blue,
  size: 50.0,
)

3.5 对话框

GoodDialog 是一个自定义的对话框组件，支持多种样式和按钮配置。

GoodDialog(
  title: 'Confirmation',
  content: 'Are you sure you want to delete this item?',
  actions: [
    GoodButton(
      text: 'Cancel',
      onPressed: () {
        print('Cancel Pressed');
      },
    ),
    GoodButton(
      text: 'Delete',
      onPressed: () {
        print('Delete Pressed');
      },
    ),
  ],
)

4. 自定义主题

good_ui 支持自定义主题，你可以通过 GoodTheme 来全局设置应用的样式。

MaterialApp(
  theme: GoodTheme.light(),
  home: MyHomePage(),
)
回到顶部