mars3142
46c8c38aa7
Test / test (push) Successful in 7m35s
Signed-off-by: Peter Siegmund <developer@mars3142.org>
113 lines
3.8 KiB
Markdown
113 lines
3.8 KiB
Markdown
# Toaster Ui
|
|
|
|
[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]
|
|
[](https://github.com/felangel/mason)
|
|
[![License: MIT][license_badge]][license_link]
|
|
|
|
A Very Good Project created by Very Good CLI.
|
|
|
|
## Installation 💻
|
|
|
|
**❗ In order to start using Toaster Ui you must have the [Flutter SDK][flutter_install_link] installed on your machine.**
|
|
|
|
Install via `flutter pub add`:
|
|
|
|
```sh
|
|
dart pub add toaster_ui
|
|
```
|
|
|
|
---
|
|
|
|
## Features ✨
|
|
|
|
- **ThemeExtension-based theming** — light and dark theme variants with custom color and spacing tokens via `ThemeExtension<T>`
|
|
- **Custom color tokens** — semantic colors for success, warning, and info states via `AppColors`
|
|
- **Spacing scale** — consistent spacing tokens from xxs to xxlg via `AppSpacing`
|
|
- **BuildContext extensions** — shorthand `context.appColors` and `context.appSpacing`
|
|
- **Example widget** — `AppButton` composing Material's `FilledButton` and `OutlinedButton` with app-specific sizing
|
|
|
|
## Usage 🚀
|
|
|
|
Wrap your app with the theme:
|
|
|
|
```dart
|
|
import 'package:toaster_ui/toaster_ui.dart';
|
|
|
|
class MyApp extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(
|
|
theme: AppTheme.light,
|
|
darkTheme: AppTheme.dark,
|
|
home: const MyHomePage(),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
Use widgets and tokens in your app:
|
|
|
|
```dart
|
|
AppButton(
|
|
onPressed: () {},
|
|
child: const Text('Click me'),
|
|
);
|
|
```
|
|
|
|
Access custom tokens via context extensions:
|
|
|
|
```dart
|
|
final colors = context.appColors;
|
|
final spacing = context.appSpacing;
|
|
```
|
|
|
|
---
|
|
|
|
## Continuous Integration 🤖
|
|
|
|
Toaster Ui comes with a built-in [GitHub Actions workflow][github_actions_link] powered by [Very Good Workflows][very_good_workflows_link] but you can also add your preferred CI/CD solution.
|
|
|
|
Out of the box, on each pull request and push, the CI `formats`, `lints`, and `tests` the code. This ensures the code remains consistent and behaves correctly as you add functionality or make changes. The project uses [Very Good Analysis][very_good_analysis_link] for a strict set of analysis options used by our team. Code coverage is enforced using the [Very Good Workflows][very_good_coverage_link].
|
|
|
|
---
|
|
|
|
## Running Tests 🧪
|
|
|
|
For first time users, install the [very_good_cli][very_good_cli_link]:
|
|
|
|
```sh
|
|
dart pub global activate very_good_cli
|
|
```
|
|
|
|
To run all unit tests:
|
|
|
|
```sh
|
|
very_good test --coverage
|
|
```
|
|
|
|
To view the generated coverage report you can use [lcov](https://github.com/linux-test-project/lcov).
|
|
|
|
```sh
|
|
# Generate Coverage Report
|
|
genhtml coverage/lcov.info -o coverage/
|
|
|
|
# Open Coverage Report
|
|
open coverage/index.html
|
|
```
|
|
|
|
[flutter_install_link]: https://docs.flutter.dev/get-started/install
|
|
[github_actions_link]: https://docs.github.com/en/actions/learn-github-actions
|
|
[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg
|
|
[license_link]: https://opensource.org/licenses/MIT
|
|
[logo_black]: https://raw.githubusercontent.com/VGVentures/very_good_brand/main/styles/README/vgv_logo_black.png#gh-light-mode-only
|
|
[logo_white]: https://raw.githubusercontent.com/VGVentures/very_good_brand/main/styles/README/vgv_logo_white.png#gh-dark-mode-only
|
|
[mason_link]: https://github.com/felangel/mason
|
|
[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg
|
|
[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis
|
|
[very_good_cli_link]: https://pub.dev/packages/very_good_cli
|
|
[very_good_coverage_link]: https://github.com/marketplace/actions/very-good-coverage
|
|
[very_good_ventures_link]: https://verygood.ventures
|
|
[very_good_ventures_link_light]: https://verygood.ventures#gh-light-mode-only
|
|
[very_good_ventures_link_dark]: https://verygood.ventures#gh-dark-mode-only
|
|
[very_good_workflows_link]: https://github.com/VeryGoodOpenSource/very_good_workflows
|