fidooo_design_system 0.0.20 
fidooo_design_system: ^0.0.20 copied to clipboard
fidooo.comThis library provides a set of custom widgets designed specifically for Fidooo. With these custom widgets, you can add functionality and style into your Flutter project
import 'package:fidooo_design_system/custom_widgets/f_toogle_button.dart';
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) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
locale: const Locale('es'),
home: const Scaffold(
body: SafeArea(
child: Padding(
padding: EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FontsExample(),
SizedBox(
height: 20,
),
TextFieldExample(),
SizedBox(
height: 20,
),
DateTextFieldExample(),
SizedBox(
height: 20,
),
ButtonsExample(),
SizedBox(
height: 20,
),
SwitchExample(),
SizedBox(
height: 20,
),
CheckBoxExample(),
SizedBox(
height: 20,
),
RadioExample(),
SizedBox(
height: 20,
),
ToogleButtonExample(),
SizedBox(
height: 20,
),
IconsExample(),
],
),
),
),
),
),
);
}
}
enum FEnum {
fidooo(name: "Fidooo"),
engineering(name: "Engineering");
const FEnum({required this.name});
final String name;
}
class ToogleButtonExample extends StatefulWidget {
const ToogleButtonExample({Key? key}) : super(key: key);
@override
State<ToogleButtonExample> createState() => _ToogleButtonExampleState();
}
class _ToogleButtonExampleState extends State<ToogleButtonExample> {
int index = 0;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"ToggleButtons",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FToggleButton(
fTitleColor: colors.dark.primary,
title: 'Selected:',
fSelectedColor: colors.dark.primary,
fDisabledColor: colors.dark.secondaryVariant,
index: index,
onPressed: (p0) {
setState(() {
index = p0;
});
},
options: const ['Option 1', 'Option 2', 'Option 3'],
),
],
),
],
);
}
}
class RadioExample extends StatefulWidget {
const RadioExample({Key? key}) : super(key: key);
@override
State<RadioExample> createState() => _RadioExampleState();
}
class _RadioExampleState extends State<RadioExample> {
FEnum? _valueDisabled;
final FEnum _valueDisabledSelected = FEnum.fidooo;
FEnum? _value;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"RadioButtons",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: FEnum.values
.map((e) => FRadioButton<FEnum>(
value: e,
label: e.name,
groupValue: _valueDisabled,
onChanged: null,
enabled: false,
))
.toList()),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: FEnum.values
.map((e) => FRadioButton<FEnum>(
value: e,
label: e.name,
groupValue: _valueDisabledSelected,
onChanged: null,
enabled: false,
))
.toList()),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: FEnum.values
.map((e) => FRadioButton<FEnum>(
value: e,
label: e.name,
groupValue: _value,
onChanged: (FEnum? value) {
setState(() {
_value = value;
});
},
enabled: true,
))
.toList()),
],
),
],
);
}
}
class CheckBoxExample extends StatelessWidget {
const CheckBoxExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Checkbox",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FCheckbox(
isChecked: false,
enabled: false,
),
FCheckbox(
isChecked: true,
enabled: false,
),
FCheckbox(
isChecked: false,
enabled: true,
),
FCheckbox(
isChecked: true,
enabled: true,
),
],
),
],
);
}
}
class SwitchExample extends StatelessWidget {
const SwitchExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Buttons",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FSwitch(
isActive: false,
enabled: false,
),
FSwitch(
isActive: true,
enabled: false,
),
FSwitch(
isActive: false,
enabled: true,
),
FSwitch(
isActive: true,
enabled: true,
),
],
),
],
);
}
}
class FontsExample extends StatelessWidget {
const FontsExample({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Fonts",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
const SizedBox(
height: 12,
),
Container(
margin: const EdgeInsets.only(left: 20),
child: Text(
"Roboto",
style: FTextStyle(
fColor: colors.dark.secondary,
fTypographyType: FTypographyType.headlineSmall,
),
),
),
...FTypographyType.values
.map(
(t) => Container(
margin: const EdgeInsets.symmetric(vertical: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
t.name,
textAlign: TextAlign.center,
),
const SizedBox(
width: 20,
),
Text(
"Example Text",
textAlign: TextAlign.center,
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: t,
),
),
],
),
),
)
.toList(),
],
);
}
}
class ButtonsExample extends StatelessWidget {
const ButtonsExample({
Key? key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Buttons",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
Center(
child: Wrap(
spacing: 30,
runSpacing: 20,
children: [
ButtonExamples(
description: 'Filled Button',
enabledColor: colors.dark.primary,
enabledTextColor: colors.dark.secondaryVariant,
hoveredColor: colors.dark.primary,
hoveredTextColor: colors.dark.secondaryVariant,
disabledColor: colors.dark.neutral75,
disabledTextColor: colors.dark.neutral50,
pressedColor: colors.dark.primaryVariant,
pressedTextColor: colors.dark.secondaryVariant,
buttonType: FButtonType.filled,
fTypographyType: FTypographyType.bodyLarge,
),
ButtonExamples(
description: 'Tonal Button',
enabledColor: colors.dark.secondaryVariant,
enabledTextColor: colors.dark.primary,
hoveredColor: colors.dark.secondaryVariant,
hoveredTextColor: colors.dark.primary,
disabledColor: colors.dark.neutral25,
disabledTextColor: colors.dark.neutral75,
pressedColor: colors.dark.secondaryVariant,
pressedTextColor: colors.dark.primaryVariant,
buttonType: FButtonType.tonal,
fTypographyType: FTypographyType.bodyLarge,
),
ButtonExamples(
description: 'Outlined Button',
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,
buttonType: FButtonType.outlined,
fTypographyType: FTypographyType.bodyLarge,
),
ButtonExamples(
description: 'Text Button',
enabledColor: colors.dark.noColor,
enabledTextColor: colors.dark.primary,
hoveredColor: colors.dark.secondaryVariant,
hoveredTextColor: colors.dark.primary,
disabledColor: colors.dark.noColor,
disabledTextColor: colors.dark.neutral75,
pressedColor: colors.dark.secondary,
pressedTextColor: colors.dark.primaryVariant,
buttonType: FButtonType.text,
fTypographyType: FTypographyType.bodyLarge,
),
ButtonExamples(
description: 'Elevated Button',
enabledColor: colors.dark.secondaryVariant,
enabledTextColor: colors.dark.primary,
hoveredColor: colors.dark.secondary,
hoveredTextColor: colors.dark.primaryVariant,
disabledColor: colors.dark.neutral50,
disabledTextColor: colors.dark.neutral75,
pressedColor: colors.dark.secondary,
pressedTextColor: colors.dark.primaryVariant,
buttonType: FButtonType.elevated,
fTypographyType: FTypographyType.bodyLarge,
),
],
),
),
],
);
}
}
class ButtonExamples extends StatelessWidget {
final FButtonType buttonType;
final FColorI? enabledColor;
final FColorI? enabledTextColor;
final FColorI? hoveredColor;
final FColorI? hoveredTextColor;
final FColorI? disabledColor;
final FColorI? disabledTextColor;
final FColorI? pressedColor;
final FColorI? pressedTextColor;
final String description;
final FTypographyType fTypographyType;
const ButtonExamples({
Key? key,
required this.buttonType,
this.enabledColor,
this.enabledTextColor,
this.hoveredColor,
this.hoveredTextColor,
this.disabledColor,
this.disabledTextColor,
this.pressedColor,
this.pressedTextColor,
required this.description,
required this.fTypographyType,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
children: [
Text(
description,
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
FButton(
enabledColor: enabledColor,
enabledTextColor: enabledTextColor,
hoveredColor: hoveredColor,
hoveredTextColor: hoveredTextColor,
pressedColor: pressedColor,
disabledColor: disabledColor,
disabledTextColor: disabledTextColor,
pressedTextColor: pressedTextColor,
onPressed: () {},
buttonText: 'Label',
fTextTypographyType: fTypographyType,
buttonType: buttonType,
),
const SizedBox(
height: 12,
),
FButton(
enabledColor: enabledColor,
enabledTextColor: enabledTextColor,
hoveredColor: hoveredColor,
hoveredTextColor: hoveredTextColor,
pressedColor: pressedColor,
disabledColor: disabledColor,
disabledTextColor: disabledTextColor,
pressedTextColor: pressedTextColor,
onPressed: () {},
buttonText: 'Label',
fTextTypographyType: fTypographyType,
icon: FIconType.settings,
buttonType: buttonType,
),
const SizedBox(
height: 12,
),
FButton(
enabledColor: enabledColor,
enabledTextColor: enabledTextColor,
hoveredColor: hoveredColor,
hoveredTextColor: hoveredTextColor,
pressedColor: pressedColor,
disabledColor: disabledColor,
disabledTextColor: disabledTextColor,
pressedTextColor: pressedTextColor,
onPressed: null,
buttonText: 'Label',
fTextTypographyType: fTypographyType,
buttonType: buttonType,
),
const SizedBox(
height: 12,
),
FButton(
enabledColor: enabledColor,
enabledTextColor: enabledTextColor,
hoveredColor: hoveredColor,
hoveredTextColor: hoveredTextColor,
pressedColor: pressedColor,
disabledColor: disabledColor,
disabledTextColor: disabledTextColor,
pressedTextColor: pressedTextColor,
onPressed: () {},
icon: FIconType.settings,
buttonType: buttonType,
),
const SizedBox(
height: 12,
),
FButton(
enabledColor: enabledColor,
enabledTextColor: enabledTextColor,
hoveredColor: hoveredColor,
hoveredTextColor: hoveredTextColor,
pressedColor: pressedColor,
disabledColor: disabledColor,
disabledTextColor: disabledTextColor,
pressedTextColor: pressedTextColor,
onPressed: null,
icon: FIconType.settings,
buttonType: buttonType,
),
],
);
}
}
class IconsExample extends StatefulWidget {
const IconsExample({
Key? key,
}) : super(key: key);
@override
State<IconsExample> createState() => _IconsExampleState();
}
class _IconsExampleState extends State<IconsExample> {
FColorI fColor = FColor.values.first;
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text(
"Icons",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
),
SizedBox(
width: 250,
child: FDropdownMenu<FColorI>(
labelText: "Color",
entries: FColor.values
.map(
(FColorI value) => FDropdownEntry<FColorI>(
value: value,
label: value.toString().split(".").last,
),
)
.toList(),
initialSelection: fColor,
onSelected: (dynamic value) {
setState(() {
fColor = value as FColorI;
});
},
),
)
],
),
IconsGrid(fColor: fColor),
],
);
}
}
class IconsGrid extends StatelessWidget {
final FColorI fColor;
const IconsGrid({
Key? key,
required this.fColor,
}) : super(key: key);
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
return GridView.count(
shrinkWrap: true,
crossAxisCount: screenWidth < 300
? 4
: screenWidth < 600
? 6
: screenWidth < 1000
? 8
: 12,
mainAxisSpacing: 0,
crossAxisSpacing: 0,
children: FIconType.values
.map((e) => SizedBox(
height: 40,
width: 40,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text(
e.name,
overflow: TextOverflow.ellipsis,
style: FTextStyle(
fColor: fColor,
fTypographyType: FTypographyType.bodySmall,
),
),
),
Container(
color: fColor.color,
child: FIcon(
e,
width: 24,
height: 24,
),
),
],
),
))
.toList(),
);
}
}
class TextFieldExample extends StatefulWidget {
const TextFieldExample({super.key});
@override
State<TextFieldExample> createState() => _TextFieldExampleState();
}
class _TextFieldExampleState extends State<TextFieldExample> {
final key = GlobalKey<FormState>();
final controller = TextEditingController();
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"FTextField",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
const SizedBox(
height: 12,
),
Form(
key: key,
child: Column(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Text(
"Multi Line Text Field Enabled",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
label: "Label",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(),
isMandatory: true,
maxLines: 8,
textInputType: TextInputType.multiline,
height: 100,
),
),
],
)
]),
const SizedBox(
width: 12,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Text(
"Text Field Enabled",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
label: "Label",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(),
isMandatory: true,
),
),
],
),
const SizedBox(
width: 12,
),
Column(
children: [
Text(
"Text Field with Instructions",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
label:
"Labeajdasjdkasjdnkjasdnaksjdnaskjdnaskjdnaskjdnaskjdnaskjdnaksjdnaskjdl",
instructions: "Instructions",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(),
isMandatory: true,
),
),
],
),
const SizedBox(
width: 12,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"TextField With Error",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
fSelectColor: FColor.lightPrimaryPurple,
label: "Example 2",
controller: TextEditingController(),
validator: (value) {
if (value!.isEmpty) {
return 'El campo es requerido';
}
return null;
},
),
),
],
),
const SizedBox(
width: 12,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"TextField Disabled",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
label: "Example 4",
isMandatory: true,
controller: TextEditingController(text: 'Example 4'),
readOnly: true,
enabled: false,
),
),
],
),
],
),
const SizedBox(
height: 12,
),
Align(
alignment: Alignment.center,
child: FButton(
onPressed: () {
if (key.currentState!.validate()) {}
},
buttonText: 'Test Form Validation',
buttonType: FButtonType.elevated,
),
),
],
),
),
],
);
}
}
class DateTextFieldExample extends StatelessWidget {
const DateTextFieldExample({super.key});
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).fColors;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"FDateTextField",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineMedium,
),
),
const SizedBox(
height: 12,
),
Align(
alignment: Alignment.center,
child: SizedBox(
width: 200,
child: FDateTextField(
labelText: "Fecha",
hintText: "Fecha",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(),
),
),
),
],
);
}
}Metadata
3
likes
0
points
69
downloads
Publisher
Weekly Downloads
Metadata
This library provides a set of custom widgets designed specifically for Fidooo. With these custom widgets, you can add functionality and style into your Flutter project
License
unknown (license)
