|
1 | | -# ui_kit |
| 1 | +<div align="center"> |
| 2 | + <img src="https://avatars.githubusercontent.com/u/202675624?s=400&u=dc72a2b53e8158956a3b672f8e52e39394b6b610&v=4" alt="Flutter News App Toolkit Logo" width="220"> |
| 3 | + <h1>UI Kit</h1> |
| 4 | + <p><strong>A shared Flutter UI kit providing a consistent set of widgets, themes, constants, and utilities for the Flutter News App Toolkit.</strong></p> |
| 5 | +</div> |
2 | 6 |
|
3 | | - |
4 | | -[](https://pub.dev/packages/very_good_analysis) |
5 | | -[](https://polyformproject.org/licenses/free-trial/1.0.0) |
| 7 | +<p align="center"> |
| 8 | + <img src="https://img.shields.io/badge/coverage-24%25-green?style=for-the-badge" alt="coverage"> |
| 9 | + <a href="https://flutter-news-app-full-source-code.github.io/docs/"><img src="https://img.shields.io/badge/LIVE_DOCS-VIEW-slategray?style=for-the-badge" alt="Live Docs: View"></a> |
| 10 | + <a href="https://github.com/flutter-news-app-full-source-code"><img src="https://img.shields.io/badge/MAIN_PROJECT-BROWSE-purple?style=for-the-badge" alt="Main Project: Browse"></a> |
| 11 | +</p> |
6 | 12 |
|
7 | | -A shared Flutter UI kit package providing a consistent set of widgets, themes, constants, and utilities for building applications. This package ensures a cohesive look and feel across different parts of the system. |
| 13 | +This `ui_kit` package serves as a shared Flutter UI kit within the [**Flutter News App Full Source Code Toolkit**](https://github.com/flutter-news-app-full-source-code). It provides a consistent set of widgets, themes, constants, and utilities designed to ensure a cohesive look and feel across the Flutter mobile app and web dashboard. By centralizing UI components and styling, this package aims to accelerate development and enhance maintainability. |
8 | 14 |
|
9 | | -## Getting Started |
| 15 | +## ⭐ Feature Showcase: Consistent & Dynamic User Interfaces |
10 | 16 |
|
11 | | -Add this package to your `pubspec.yaml`: |
| 17 | +This package offers a comprehensive set of features for building modern Flutter UIs. |
12 | 18 |
|
13 | | -```yaml |
14 | | -dependencies: |
15 | | - ui_kit: |
16 | | - git: |
17 | | - url: https://github.com/flutter-news-app-full-source-code/ui-kit.git |
18 | | -``` |
| 19 | +<details> |
| 20 | +<summary><strong>🧱 Core Functionality</strong></summary> |
19 | 21 |
|
20 | | -## Features |
| 22 | +### 🚀 State Widgets |
| 23 | +- **`InitialStateWidget`:** A pre-built widget for displaying initial states, typically before user interaction or data loading. |
| 24 | +- **`LoadingStateWidget`:** A widget for indicating progress during data fetching or other asynchronous operations. |
| 25 | +- **`FailureStateWidget`:** A robust widget for showing user-friendly, localized error messages with an optional retry mechanism, leveraging `HttpException` extensions from `core`. |
21 | 26 |
|
22 | | -* **State Widgets:** A collection of pre-built widgets for common UI states: |
23 | | - * `InitialStateWidget`: For screens before user interaction. |
24 | | - * `LoadingStateWidget`: For displaying progress during data fetching. |
25 | | - * `FailureStateWidget`: For showing user-friendly error messages with a retry option. |
26 | | -* **Dynamic Theming:** Built with `flex_color_scheme`, allowing for dynamic, customizable, and consistent light/dark themes across the app based on user settings. |
27 | | -* **Localization Helpers:** |
28 | | - * An extension on `HttpException` to provide user-friendly, localized error messages. |
29 | | - * Custom `timeago` messages for concise relative time formatting. |
30 | | -* **Shared Constants:** Centralized constants for spacing (`AppSpacing`) to ensure consistent layouts. |
31 | | -* **Utilities:** Helper classes like `DateFormatter` for common date and time formatting tasks. |
| 27 | +### 🎨 Dynamic Theming |
| 28 | +- **`lightTheme` & `darkTheme` Functions:** Built with `flex_color_scheme`, these functions provide dynamic, customizable, and consistent light/dark themes across the app based on user settings (e.g., `AppBaseTheme`, `AppAccentTheme`, `AppTextScaleFactor`, `AppFontWeight`). |
| 29 | +- **`AppSpacing` Constants:** Centralized constants for spacing to ensure consistent layouts and visual hierarchy. |
32 | 30 |
|
33 | | -## Usage |
| 31 | +### 🌐 Localization Helpers |
| 32 | +- **`HttpException` Extension:** An extension on `HttpException` (from `core`) to provide user-friendly, localized error messages, simplifying error presentation. |
| 33 | +- **`timeago` Integration:** Custom `timeago` messages for concise relative time formatting, enhancing readability of timestamps. |
34 | 34 |
|
35 | | -### Displaying an Error |
| 35 | +### 🛠️ Utilities |
| 36 | +- **`DateFormatter`:** Helper class for common date and time formatting tasks, ensuring consistent date representations throughout the application. |
36 | 37 |
|
37 | | -Use the `FailureStateWidget` to easily display a localized error message from a shared exception. The widget automatically handles localization. |
38 | | - |
39 | | -```dart |
40 | | -import 'package:flutter/material.dart'; |
41 | | -import 'package:core/core.dart'; |
42 | | -import 'package:ui_kit/ui_kit.dart'; |
43 | | -
|
44 | | -class MyFeatureView extends StatelessWidget { |
45 | | - const MyFeatureView({super.key}); |
46 | | -
|
47 | | - @override |
48 | | - Widget build(BuildContext context) { |
49 | | - return FailureStateWidget( |
50 | | - exception: NetworkException(), |
51 | | - onRetry: () { |
52 | | - // Logic to retry the failed operation |
53 | | - print('Retrying...'); |
54 | | - }, |
55 | | - ); |
56 | | - } |
57 | | -} |
58 | | -``` |
59 | | - |
60 | | -### Theming |
61 | | - |
62 | | -This package provides `lightTheme` and `darkTheme` functions that can be dynamically configured. To use them, pass them to your `MaterialApp`'s theme properties. |
63 | | - |
64 | | -```dart |
65 | | -import 'package:flutter/material.dart'; |
66 | | -import 'package:ui_kit/ui_kit.dart'; |
67 | | -import 'package:core/core.dart'; |
68 | | -import 'package:flex_color_scheme/flex_color_scheme.dart'; |
69 | | -
|
70 | | -void main() => runApp(const MyApp()); |
71 | | -
|
72 | | -class MyApp extends StatelessWidget { |
73 | | - const MyApp({super.key}); |
74 | | -
|
75 | | - @override |
76 | | - Widget build(BuildContext context) { |
77 | | - // These values would typically come from a state management solution |
78 | | - const activeScheme = FlexScheme.mandyRed; |
79 | | - const textScaleFactor = AppTextScaleFactor.medium; |
80 | | - const fontWeight = AppFontWeight.regular; |
81 | | -
|
82 | | - return MaterialApp( |
83 | | - theme: lightTheme( |
84 | | - scheme: activeScheme, |
85 | | - appTextScaleFactor: textScaleFactor, |
86 | | - appFontWeight: fontWeight, |
87 | | - ), |
88 | | - // ... other properties |
89 | | - ); |
90 | | - } |
91 | | -} |
92 | | -``` |
| 38 | +> **💡 Your Advantage:** This UI kit simplifies Flutter development by providing visual consistency, dynamic theming, and robust error presentation. It centralizes UI components, contributing to faster development and improved maintainability. |
93 | 39 |
|
| 40 | +</details> |
94 | 41 |
|
95 | 42 | ## 🔑 Licensing |
96 | 43 |
|
97 | | -This package is source-available and licensed under the [PolyForm Free Trial 1.0.0](LICENSE). Please review the terms before use. |
98 | | - |
99 | | -For commercial licensing options that grant the right to build and distribute unlimited applications, please visit the main [**Flutter News App - Full Source Code Toolkit**](https://github.com/flutter-news-app-full-source-code) organization. |
| 44 | +This `ui_kit` package is an integral part of the [**Flutter News App Full Source Code Toolkit**](https://github.com/flutter-news-app-full-source-code). For comprehensive details regarding licensing, including trial and commercial options for the entire toolkit, please refer to the main toolkit organization page. |
0 commit comments