This library provides a set of custom widgets designed specifically for the fidooo_design_system library. With these custom widgets, you can easily incorporate Fidooo's unique functionality and style into your Flutter project

Features

Whit this library you can create:

  • Colors
  • Icons
  • Fonts
  • Buttons
  • TextFields

Getting started

Getting Started To start using our package, follow these simple steps: 1. Add the following line under the dependencies section: dependencies: fidooo_design_system: ^version_number 2. Save the pubspec.yaml file. 3. Run flutter pub get in your terminal to install the package:

Usage


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
    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;
                      }
                    )
                  )
                ]
              )
            ],
          ),
        ),
      );
    }
}

Additional information

If you want to contribute to package contact to support@fidooo.com