Flutter设计系统插件fidooo_design_system的使用

Flutter设计系统插件fidooo_design_system的使用

本库提供了一组专门为fidooo_design_system库设计的自定义小部件。通过这些自定义小部件，您可以轻松地将Fidooo的独特功能和样式融入到您的Flutter项目中。

特性

使用此库，您可以创建：

• 颜色
• 图标
• 字体
• 按钮
• 文本字段

开始使用

要开始使用我们的包，请遵循以下简单步骤：

1. 在dependencies部分添加以下行：

   dependencies:
     fidooo_design_system: ^version_number
   

2. 保存pubspec.yaml文件。
3. 在终端运行flutter pub get以安装包。

使用示例

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    final colors = Theme.of(context).fColors;

    return MaterialApp(
      title: 'f-design-system',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  "Example Text",
                  textAlign: TextAlign.center,
                  style: FTextStyle(
                    fColor: colors.dark.primary,
                    fTypographyType: FTypographyType.headlineLarge,
                  ),
                ),
                Text(
                  "Example Text",
                  textAlign: TextAlign.center,
                  style: FTextStyle(
                    fColor: colors.dark.primaryVariant,
                    fTypographyType: FTypographyType.headlineMedium,
                  ),
                ),
                Text(
                  "Example Text",
                  textAlign: TextAlign.center,
                  style: FTextStyle(
                    fColor: colors.dark.secondary,
                    fTypographyType: FTypographyType.headlineSmall,
                  ),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                FButton(
                  enabledColor: colors.dark.noColor,
                  enabledTextColor: colors.dark.primary,
                  hoveredColor: colors.dark.secondaryVariant,
                  hoveredTextColor: colors.dark.primary,
                  disabledColor: colors.dark.neutral25,
                  disabledTextColor: colors.dark.neutral75,
                  pressedColor: colors.dark.secondary,
                  pressedTextColor: colors.dark.primary,
                  onPressed: () {},
                  buttonText: 'Label',
                  fTextTypographyType: FTypographyType.bodyLarge,
                  buttonType: FButtonType.outlined,
                ),
                FButton(
                  enabledColor: colors.dark.noColor,
                  enabledTextColor: colors.dark.primary,
                  hoveredColor: colors.dark.secondaryVariant,
                  hoveredTextColor: colors.dark.primary,
                  disabledColor: colors.dark.neutral25,
                  disabledTextColor: colors.dark.neutral75,
                  pressedColor: colors.dark.secondary,
                  pressedTextColor: colors.dark.primary,
                  onPressed: () {},
                  buttonText: 'Label',
                  fTextTypographyType: FTypographyType.bodyLarge,
                  icon: FIconType.settings,
                  buttonType: FButtonType.outlined,
                ),
                FButton(
                  enabledColor: colors.dark.noColor,
                  enabledTextColor: colors.dark.primary,
                  hoveredColor: colors.dark.secondaryVariant,
                  hoveredTextColor: colors.dark.primary,
                  disabledColor: colors.dark.neutral25,
                  disabledTextColor: colors.dark.neutral75,
                  pressedColor: colors.dark.secondary,
                  pressedTextColor: colors.dark.primary,
                  onPressed: () {},
                  fTextTypographyType: FTypographyType.bodyLarge,
                  icon: FIconType.settings,
                  buttonType: FButtonType.outlined,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  width: 24,
                  height: 24,
                  color: colors.dark.backgroundColors.blue.color,
                  child: FIcon(FIconType.add),
                ),
                Container(
                  width: 24,
                  height: 24,
                  color: colors.dark.backgroundColors.blue.color,
                  child: FIcon(FIconType.message),
                ),
                Container(
                  width: 24,
                  height: 24,
                  color: colors.dark.backgroundColors.blue.color,
                  child: FIcon(FIconType.user),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  width: 24,
                  height: 24,
                  child: FTextField(
                    fSelectColor: FColor.lightPrimaryPurple,
                    label: "Example 2",
                    controller: TextEditingController(),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'El campo es requerido';
                      }
                      return null;
                    }
                  )
                )
              ]
            )
          ],
        ),
      ),
    );
  }
}