Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coingaming/moon_flutter
Moon Design System for Flutter
https://github.com/coingaming/moon_flutter
design-system flutter
Last synced: 4 days ago
JSON representation
Moon Design System for Flutter
- Host: GitHub
- URL: https://github.com/coingaming/moon_flutter
- Owner: coingaming
- License: mit
- Created: 2023-01-16T21:26:28.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-27T14:44:22.000Z (about 1 month ago)
- Last Synced: 2025-01-03T08:10:57.301Z (4 days ago)
- Topics: design-system, flutter
- Language: Dart
- Homepage: https://flutter.moon.io
- Size: 8.09 MB
- Stars: 213
- Watchers: 9
- Forks: 25
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Moon Design System
[](https://pub.dev/packages/moon_design)  [](https://conventionalcommits.org)
_Note: This project uses **[Release Please](https://github.com/googleapis/release-please)** and **[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)** spec, please follow the conventions or consider using **[Commitizen](https://github.com/commitizen/cz-cli)**
to write commit messages._
## Disclaimer
The current major release, v1.0.0, will be maintained as-is and will not receive further updates, except for patches. The v1 theming is based on the soon-to-be deprecated Moon Design Figma v1 and lacks flexibility. For greater control over theming with v1 of moon_flutter, it is recommended to create custom wrapper widgets around the moon_flutter widgets that align with your project's specific theming requirements.
There is ongoing background work for v2 which aims to be more modular, scalable and themable.
## Resources
- 📱 [Playground](https://flutter.moon.io)
## Applying theming and overrides
- Declare tokens variable and optionally override values:
```dart
final lightTokens = MoonTokens.light.copyWith(
colors: MoonColors.light.copyWith(
piccolo: Colors.blue,
textPrimary: Colors.amber,
),
typography: MoonTypography.typography.copyWith(
heading: MoonTypography.typography.heading.apply(
// Using variable font and bumping down the font weight compared to the
// baseline 600 for heading.
fontFamily: "DMSans",
fontWeightDelta: -1,
fontVariations: [const FontVariation('wght', 500)],
),
),
);
final lightTheme = ThemeData.light().copyWith(
extensions: >[MoonTheme(tokens: lightTokens)],
);
```
- Or if needed override widget theming:
```dart
final lightTheme = ThemeData.light().copyWith(
extensions: >[
MoonTheme(tokens: lightTokens).copyWith(
accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith(
colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith(
backgroundColor: Colors.green,
),
),
),
],
);
```
- Apply the declared theme:
```dart
return MaterialApp(
title: 'Moon Design System example',
theme: lightTheme,
home: const HomePage(),
);
```