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

Fast UI Kit 是一个旨在简化Flutter应用开发的包，提供了多种预定义组件，帮助开发者高效地创建一致且美观的用户界面。以下是该插件的基本介绍及使用示例。

简单实现

主题配置

首先，在项目中配置主题，以便在整个应用程序中保持一致的视觉风格：

class MyApp extends StatelessWidget {
  MyApp({super.key});

  final theme = FastTheme(seed: Colors.green);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      darkTheme: theme.dark,
      theme: theme.light,
      home: const HomePage(),
    );
  }
}

示例Demo

以下是一个包含多个组件的完整示例：

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

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: FastSearchAppBar(
        title: "Fast UI Kit",
        onSearch: (v) {},
      ),
      body: FastContent(
        children: [
          FastAnimate(
            type: FastAnimateType.fadeInDownBig,
            child: FastRow(
              children: [
                Icon(FastIcons.maki.airport, size: 40),
                Icon(FastIcons.ant.CodeSandbox, size: 40),
                Icon(FastIcons.awesome.facebook_square, size: 40),
                Icon(FastIcons.elico.chrome, size: 40),
              ],
            ),
          ),
          FastCarousel(
            itemCount: 30,
            height: 200,
            fraction: .4,
            scale: .7,
            itemBuilder: (c, i) {
              return FastImg(path: 'https://picsum.photos/200/300?random=$i');
            },
          ),
          FastColumn(
            xGap: 10,
            yGap: 10,
            children: [
              FastFormFieldFile(
                initialValue: FastFileInitialData.network(
                  'https://gestor.fastzap.chat/assets/logo-fastzapplus.png',
                ),
              ),
              FastButtonIcon(
                icon: FastIcons.modernPictograms.pencil,
                variant: ButtonVariant.outlined,
                loading: false,
                onPressed: () {
                  context.showMessage(
                    'Algo foi alterado com sucesso',
                    title: 'Sucesso',
                    type: MessageVariant.success,
                    position: MessagePosition.top,
                    style: Style.flat,
                  );
                },
              ),
              FastButton(
                label: 'Confirmar',
                loading: true,
                variant: ButtonVariant.outlined,
                onPressed: () {
                  context.showMessage(
                    'Algo deu errado',
                    title: 'Erro',
                    position: MessagePosition.bottom,
                    type: MessageVariant.error,
                    style: Style.raised,
                  );
                },
              ),
              FastFormField(
                minLines: 1,
                label: "CPF",
                validator: Mask.validations.cpf,
                mask: [Mask.cpf()],
              ),
              FastLinkFy(
                text: 'test link https://www.google.com tap me',
                onTapLink: (v) {
                  print(v);
                },
              ),
              FastButton(
                label: 'Dialog',
                onPressed: () {
                  context.dialog(
                    FastDialog(
                      title: 'Help',
                      children: [
                        const Text('Dialog'),
                        FastAudio(
                          updateState: setState,
                          url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
                        ),
                        FastButton(
                          label: 'Cancel',
                          onPressed: context.pop,
                          background: Colors.red,
                        ),
                      ],
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}