Flutter UI组件库插件fuk_ui_kit的使用

安装

在你的 pubspec.yaml 文件中添加 fuk_ui_kit：

dependencies:
  fuk_ui_kit: ^0.0.6

使用

导入

在 Dart 文件中导入包：

import 'package:fuk_ui_kit/fuk_ui_kit.dart';

FukHeader

FukHeader 组件允许你为应用程序添加一个可自定义的头部。

FukHeader(
  title: '仪表盘',
  leading: const Icon(Icons.menu),
  actions: [
    IconButton(
      icon: const Icon(Icons.settings),
      onPressed: () {
        // 处理设置按钮点击事件
      },
    ),
  ],
)

FukContent

FukContent 组件用于显示页面的主要内容。

FukContent(
  child: Center(
    child: Text('这是内容区域。'),
  ),
)

FukButton

FukButton 组件允许你创建风格化的按钮。

FukButton(
  text: '显示信息通知',
  onPressed: () {
    // 处理按钮点击事件
  },
)

FukFooter

FukFooter 组件为应用程序添加底部栏。

FukFooter(
  text: '底部内容',
)

FukNotify

FukNotify 组件允许你显示类似Toast的通知。

FukNotify.show(
  context,
  type: FukNotifyType.info,
  direction: FukNotifyDirection.top,
  message: '这是一条信息通知。',
)

FukContentMaster

FukContentMaster 组件管理应用程序的主要布局，包括侧边栏和主要内容区域。

FukContentMaster(
  topItems: [
    SideBarItems(
      title: '按钮',
      routeName: 'buttons',
      leading: const Icon(Icons.smart_button),
      onTap: () {},
    ),
    // 其他项...
  ],
  content: FukContent(
    child: Center(
      child: Column(
        children: [
          FukButton(
            text: '显示信息通知',
            onPressed: () {
              // 处理按钮点击事件
            },
          ),
          // 其他按钮...
        ],
      ),
    ),
  ),
  footer: const FukFooter(child: Text('底部内容')),
  aside: Container(
    color: Colors.grey[800],
    child: const Center(
      child: Text('侧边栏内容'),
    ),
  ),
)

FukModal

FukModal 组件用于在应用程序中显示模态对话框。

// 显示模态对话框
showDialog(
  context: context,
  builder: (BuildContext context) {
    return FukModal(
      title: '模态标题',
      content: Text('这是模态内容。'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop(); // 关闭模态对话框
          },
          child: Text('关闭'),
        ),
        ElevatedButton(
          onPressed: () {
            // 处理操作
          },
          child: Text('保存'),
        ),
      ],
    );
  },
);

FukDataGrid

FukDataGrid 组件用于以网格格式显示数据。

FukDataGrid(
  columns: const [
    DataColumn(label: Text('ID')),
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄')),
  ],
  rows: const [
    DataRow(cells: [
      DataCell(Text('1')),
      DataCell(Text('爱丽丝')),
      DataCell(Text('23')),
    ]),
    DataRow(cells: [
      DataCell(Text('2')),
      DataCell(Text('鲍勃')),
      DataCell(Text('34')),
    ]),
    DataRow(cells: [
      DataCell(Text('3')),
      DataCell(Text('查理')),
      DataCell(Text('29')),
    ]),
  ],
)

FukTextFile

FukTextFile 组件允许你选择文件或文件夹，并配置特定选项。

const FukTextFile(
  isRequired: true,
  allowedFileTypes: [AllowedFileType.folder],
  icon: Icon(Icons.folder),
  label: '选择一个文件夹',
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
)

FukTextField

FukTextField 组件允许你创建带有可定制标签和占位符的文本字段。

const FukTextField(
  label: '名称',
  placeholder: '输入您的名字',
  isRequired: true,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
)

示例

更多使用示例，请查看 example 目录中的示例代码。

import 'package:flutter/material.dart';
import 'package:fuk_ui_kit_sample/app_routes.dart';
import 'package:fuk_ui_kit_sample/modules/home/bindings/home_bindings.dart';
import 'package:get/get.dart';

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      theme: ThemeData.dark(
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      getPages: AppPages.pages,
      initialRoute: RoutesPath.home,
      initialBinding: HomeBinding(),
    );
  }
}