Flutter UI组件库插件flutter_ukit的使用

Flutter UI组件库插件flutter_ukit的使用

Flutter UKit

Flutter UKit 是一个包含可重用且易于使用的UI组件、模板、样式、资源和其他有用的数字资产的大集合，可用于创建用户界面设计。

开始使用

本项目是一个Flutter插件包的起点，它包括针对Android和/或iOS的平台特定实现代码。

对于开始Flutter开发的帮助，可以查看在线文档，其中提供了教程、示例、移动开发指南和完整的API参考。

可用功能

以下是当前可用的功能列表：

更多示例

请查看example文件夹以获取更多代码示例。

示例代码

以下是一个完整的示例代码，展示了如何使用Flutter UKit来构建一个简单的用户界面。

import 'package:flutter/material.dart';
import 'screen/animation_screen.dart';
import 'screen/dropdown_screen.dart';
import 'screen/picker_screen.dart';
import 'screen/checkbox_screen.dart';
import 'screen/radio_button_screen.dart';
import 'screen/button_screen.dart';
import 'screen/container_screen.dart';
import 'screen/dialog_screen.dart';
import 'screen/form_screen.dart';
import 'screen/shimmer_screen.dart';
import 'screen/typography_screen.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 UI Kit',
      theme: ThemeData(
        useMaterial3: false,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter UKit'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const UserAccountsDrawerHeader(
              accountName: Text(
                'Flutter UKit',
              ),
              accountEmail: Text(
                'version 0.0.2',
              ),
              currentAccountPicture: CircleAvatar(
                child: FlutterLogo(size: 42.0),
              ),
            ),
            ExpansionTile(
              title: const Text("Contents"),
              leading: const Icon(Icons.content_copy),
              childrenPadding: const EdgeInsets.only(left: 60),
              children: [
                ListTile(
                  title: const Text('字体样式'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const TypographyScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('容器'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const ContainerScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('微光加载'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const ShimmerScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('动画'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const AnimationScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
            ExpansionTile(
              title: const Text("组件"),
              leading: const Icon(Icons.widgets),
              childrenPadding: const EdgeInsets.only(left: 60),
              children: [
                ListTile(
                  title: const Text('按钮'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const ButtonScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('对话框'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const DialogScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
            ExpansionTile(
              title: const Text("表单"),
              leading: const Icon(Icons.layers_outlined),
              childrenPadding: const EdgeInsets.only(left: 60),
              children: [
                ListTile(
                  title: const Text('表单控件'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const FormScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('下拉选项'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const DropdownScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('复选框'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const CheckboxScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('单选按钮'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const RadioButtonScreen(),
                      ),
                    );
                  },
                ),
                ListTile(
                  title: const Text('选择器'),
                  trailing: const Icon(Icons.arrow_forward_ios, size: 18),
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const PickerScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
          ],
        ),
      ),
      body: Center(
        child: Column(
          children: [
            const Padding(
              padding: EdgeInsets.all(30.0),
              child: Text(
                'Flutter UKit 是一个包含可重用且易于使用的UI组件、模板、样式、资源和其他有用的数字资产的大集合，可用于创建用户界面设计。',
                style: TextStyle(fontSize: 16.0),
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 20),
              child: Table(
                defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                border: TableBorder.all(
                  color: Colors.black,
                  style: BorderStyle.solid,
                  width: 1,
                ),
                children: const [
                  TableRow(
                    decoration: BoxDecoration(color: Colors.blue),
                    children: [
                      Text(
                        '功能',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                      Text(
                        '状态',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.white),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                  // TableRow(children: [
                  //   Column(children: [Text('Javatpoint')]),
                  //   Column(children: [Text('Flutter')]),
                  //   Column(children: [Text('5*')]),
                  // ]),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}