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