Flutter DSFR
Flutter implementation of the french government design system.
The full design specifications is available here: https://gouvfr.atlassian.net/wiki/spaces/DB/overview?homepageId=145359476
This project is not affiliated with the french government.
Getting Started
- Add the package to your
pubspec.yamlfile:
dependencies:
flutter_dsfr: any
- Add the required extensions to your theme:
import 'package:flutter_dsfr/flutter_dsfr.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
extensions: dsfrExtensionsLight,
),
darkTheme: ThemeData.dark().copyWith(
extensions: dsfrExtensionsDark,
),
home: const MyHomePage(),
);
}
}
Components
Buttons
- Primary
DSFRPrimaryButton(onPressed: () {}, label: 'Label bouton');
- Secondary
DSFRSecondaryButton(onPressed: () {}, label: 'Label bouton');
- FranceConnect
FranceConnectButton(onPressed: () {});
- FranceConnectPlus
FranceConnectButton(onPressed: () {}, variant: true);
Alerts
- Alert
DSFRAlert(
type: DSFRAlertType.success,
title: "Success Alert",
description:
"this is a success alert",
onClose: () {},
)
- SmallAlert
DSFRSmallAlert(
type: DSFRAlertType.success,
description: "this is a small alert",
onClose: () {},
)
Accordion
- Accordion
DSFRAccordionData(
title: "Accordion1",
content: Padding(
padding: EdgeInsets.all(8.0),
child: Text("Im an awesome content, expanded by default"),
),
isInitialyExpanded: true,
)
Badges
- Badge
DSFRBadge(
type: DSFRBadgeType.success,
label: "label",
showIcon: true,
)
ButtonsGroup
- ButtonsGroup
DSFRButtonsGroup(
buttons: [
DSFRButton(
label: "Label Button",
onPressed: () {},
),
DSFRSecondaryButton(
label: "Label Button",
onPressed: () {},
),
],
)
Banners
- Banner
DSFRBanner(
text: "Im an awesome banner",
link: DSFRBannerLink(
text: "this is an awesome link",
link: Uri.parse("https://http.cat/404"),
),
onClose: () {},
)
Radio
- Single Radio button
DSFRRadioButton<bool>(
label: 'Label radio',
value: true,
groupValue: false,
onChanged: (_) {},
)
- Multiple Radio buttons
DSFRRadioGroup<bool>(
title: "Légende pour l'ensemble de champs",
onChanged: (_) {},
items: [
DSFRRadioData(label: 'Label radio', value: false),
DSFRRadioData(label: 'Label radio', value: false),
DSFRRadioData(label: 'Label radio', value: false)
],
)
Which also exists as a FormField to manage validation and error states:
DSFRRadioGroupFormField<bool>(
title: "Légende pour l'ensemble de champs",
onChanged: (_) {},
items: [
DSFRRadioData(label: 'Label radio', value: false),
DSFRRadioData(label: 'Label radio', value: false),
DSFRRadioData(label: 'Label radio', value: false)
],
autovalidateMode: AutovalidateMode.always,
validator: (selectedValue) =>
selectedValue == null || !selectedValue
? "Texte d'erreur obligatoire"
: null,
)
Dependencies
- url_launcher: Allows to open links in the browser.(used in the
FranceConnectButtonwidget and inDSFRBanner)
Roadmap
Components we need to implement
- Accordion
- FileUpload
- Alerts
- Badges
- Banner
- SearchBar
- Buttons
- ButtonsGroup
- FranceConnectButton
- Radio
- RichRadio
- Checkbox
- Card
- Input
- Quote
- Header
- Breadcrumb
- ConscentBanner
- StepIndicateur
- ToggleSwitch
- Links
- SkipLinks
- Select
- SideMenu
- Callout
- Highlight
- Modal
- MainNavigation
- Tabs
- Display
- Share
- Footer
- Pagination
- Summary
- Table
- Tag
- DownloadFile
- Tile
Contributors
 Guillaume Roux |
 Null |
14 Dec 22, 2022
1.8k Dec 29, 2022
89 Jan 5, 2023
32 Nov 18, 2022
0 Jan 2, 2022
23 Dec 3, 2022
10 Dec 17, 2022
2 Nov 23, 2021
124 Dec 9, 2022
4 Sep 22, 2021
127 Nov 10, 2022
536 Jan 4, 2023
0 Jan 3, 2022
0 Jan 2, 2022
6 Jun 15, 2022
307 Dec 24, 2022
19 Nov 25, 2022
0 Jan 9, 2022