fidooo_design_system

Description:

fidooo design system

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

copied to clipboard
Additional information #
If you want to contribute to package contact to [email protected]