fidooo_design_system 0.0.2 
fidooo_design_system: ^0.0.2 copied to clipboard
fidooo.comThis 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 [...]
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,
),
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,
),
ButtonsExample(),
SizedBox(
height: 20,
),
IconsExample(),
],
),
),
),
),
),
);
}
}
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,
),
),
),
DropdownMenu<FColorI>(
initialSelection: fColor,
onSelected: (FColorI? value) {
// This is called when the user selects an item.
setState(() {
fColor = value!;
});
},
dropdownMenuEntries: FColor.values
.map<DropdownMenuEntry<FColorI>>((FColorI value) {
return DropdownMenuEntry<FColorI>(
value: value, label: value.toString().split(".").last);
}).toList(),
),
],
),
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: Row(
crossAxisAlignment: CrossAxisAlignment.start,
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(
hintText: "Example 1",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(),
),
),
],
),
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(
height: 12,
),
Align(
alignment: Alignment.center,
child: FButton(
onPressed: () {
if (key.currentState!.validate()) {}
},
buttonText: 'Test Form Validation',
buttonType: FButtonType.elevated,
),
),
],
),
const SizedBox(
width: 12,
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
"TextField With Label",
style: FTextStyle(
fColor: colors.dark.primary,
fTypographyType: FTypographyType.headlineSmall,
),
),
const SizedBox(
height: 12,
),
SizedBox(
width: 200,
child: FTextField(
label: "Example 3",
fSelectColor: FColor.lightGreen5,
controller: TextEditingController(text: 'Example 3'),
),
),
],
),
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",
controller: TextEditingController(text: 'Example 4'),
readOnly: true,
),
),
const SizedBox(
height: 12,
),
],
),
//button
],
),
),
],
);
}
}Metadata
3
likes
0
points
69
downloads
Publisher
Weekly Downloads
Metadata
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
License
unknown (license)
