Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .flutter-plugins-dependencies
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_foundation-2.4.2\\\\","shared_darwin_source":true,"native_build":true,"dependencies":[],"dev_dependency":false}],"android":[{"name":"path_provider_android","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_android-2.2.17\\\\","native_build":true,"dependencies":[],"dev_dependency":false}],"macos":[{"name":"path_provider_foundation","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_foundation-2.4.2\\\\","shared_darwin_source":true,"native_build":true,"dependencies":[],"dev_dependency":false}],"linux":[{"name":"path_provider_linux","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_linux-2.2.1\\\\","native_build":false,"dependencies":[],"dev_dependency":false}],"windows":[{"name":"path_provider_windows","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_windows-2.3.0\\\\","native_build":false,"dependencies":[],"dev_dependency":false}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2025-08-19 16:43:04.085679","version":"3.35.1","swift_package_manager_enabled":{"ios":false,"macos":false}}
{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"path_provider_foundation","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_foundation-2.4.2\\\\","shared_darwin_source":true,"native_build":true,"dependencies":[],"dev_dependency":false}],"android":[{"name":"path_provider_android","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_android-2.2.18\\\\","native_build":true,"dependencies":[],"dev_dependency":false}],"macos":[{"name":"path_provider_foundation","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_foundation-2.4.2\\\\","shared_darwin_source":true,"native_build":true,"dependencies":[],"dev_dependency":false}],"linux":[{"name":"path_provider_linux","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_linux-2.2.1\\\\","native_build":false,"dependencies":[],"dev_dependency":false}],"windows":[{"name":"path_provider_windows","path":"C:\\\\Users\\\\workstation\\\\AppData\\\\Local\\\\Pub\\\\Cache\\\\hosted\\\\pub.dev\\\\path_provider_windows-2.3.0\\\\","native_build":false,"dependencies":[],"dev_dependency":false}],"web":[]},"dependencyGraph":[{"name":"path_provider","dependencies":["path_provider_android","path_provider_foundation","path_provider_linux","path_provider_windows"]},{"name":"path_provider_android","dependencies":[]},{"name":"path_provider_foundation","dependencies":[]},{"name":"path_provider_linux","dependencies":[]},{"name":"path_provider_windows","dependencies":[]}],"date_created":"2025-09-23 20:59:08.235970","version":"3.35.1","swift_package_manager_enabled":{"ios":false,"macos":false}}
8 changes: 3 additions & 5 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# See https://www.dartlang.org/guides/libraries/private-files

# Files and directories created by pub
.dart_tool/
.packages
build/
pubspec.lock
coverage/
.flutter-plugins
.flutter-plugins-dependencies
115 changes: 30 additions & 85 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,99 +1,44 @@
# ui_kit
<div align="center">
<img src="https://avatars.githubusercontent.com/u/202675624?s=400&u=dc72a2b53e8158956a3b672f8e52e39394b6b610&v=4" alt="Flutter News App Toolkit Logo" width="220">
<h1>UI Kit</h1>
<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>
</div>

![coverage: percentage](https://img.shields.io/badge/coverage-24-green)
[![style: very good analysis](https://img.shields.io/badge/style-very_good_analysis-B22C89.svg)](https://pub.dev/packages/very_good_analysis)
[![License: PolyForm Free Trial](https://img.shields.io/badge/License-PolyForm%20Free%20Trial-blue)](https://polyformproject.org/licenses/free-trial/1.0.0)
<p align="center">
<img src="https://img.shields.io/badge/coverage-24%25-green?style=for-the-badge" alt="coverage">
<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>
<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>
</p>

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.
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.

## Getting Started
## ⭐ Feature Showcase: Consistent & Dynamic User Interfaces

Add this package to your `pubspec.yaml`:
This package offers a comprehensive set of features for building modern Flutter UIs.

```yaml
dependencies:
ui_kit:
git:
url: https://github.com/flutter-news-app-full-source-code/ui-kit.git
```
<details>
<summary><strong>🧱 Core Functionality</strong></summary>

## Features
### 🚀 State Widgets
- **`InitialStateWidget`:** A pre-built widget for displaying initial states, typically before user interaction or data loading.
- **`LoadingStateWidget`:** A widget for indicating progress during data fetching or other asynchronous operations.
- **`FailureStateWidget`:** A robust widget for showing user-friendly, localized error messages with an optional retry mechanism, leveraging `HttpException` extensions from `core`.

* **State Widgets:** A collection of pre-built widgets for common UI states:
* `InitialStateWidget`: For screens before user interaction.
* `LoadingStateWidget`: For displaying progress during data fetching.
* `FailureStateWidget`: For showing user-friendly error messages with a retry option.
* **Dynamic Theming:** Built with `flex_color_scheme`, allowing for dynamic, customizable, and consistent light/dark themes across the app based on user settings.
* **Localization Helpers:**
* An extension on `HttpException` to provide user-friendly, localized error messages.
* Custom `timeago` messages for concise relative time formatting.
* **Shared Constants:** Centralized constants for spacing (`AppSpacing`) to ensure consistent layouts.
* **Utilities:** Helper classes like `DateFormatter` for common date and time formatting tasks.
### 🎨 Dynamic Theming
- **`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`).
- **`AppSpacing` Constants:** Centralized constants for spacing to ensure consistent layouts and visual hierarchy.

## Usage
### 🌐 Localization Helpers
- **`HttpException` Extension:** An extension on `HttpException` (from `core`) to provide user-friendly, localized error messages, simplifying error presentation.
- **`timeago` Integration:** Custom `timeago` messages for concise relative time formatting, enhancing readability of timestamps.

### Displaying an Error
### 🛠️ Utilities
- **`DateFormatter`:** Helper class for common date and time formatting tasks, ensuring consistent date representations throughout the application.

Use the `FailureStateWidget` to easily display a localized error message from a shared exception. The widget automatically handles localization.

```dart
import 'package:flutter/material.dart';
import 'package:core/core.dart';
import 'package:ui_kit/ui_kit.dart';
class MyFeatureView extends StatelessWidget {
const MyFeatureView({super.key});
@override
Widget build(BuildContext context) {
return FailureStateWidget(
exception: NetworkException(),
onRetry: () {
// Logic to retry the failed operation
print('Retrying...');
},
);
}
}
```

### Theming

This package provides `lightTheme` and `darkTheme` functions that can be dynamically configured. To use them, pass them to your `MaterialApp`'s theme properties.

```dart
import 'package:flutter/material.dart';
import 'package:ui_kit/ui_kit.dart';
import 'package:core/core.dart';
import 'package:flex_color_scheme/flex_color_scheme.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// These values would typically come from a state management solution
const activeScheme = FlexScheme.mandyRed;
const textScaleFactor = AppTextScaleFactor.medium;
const fontWeight = AppFontWeight.regular;
return MaterialApp(
theme: lightTheme(
scheme: activeScheme,
appTextScaleFactor: textScaleFactor,
appFontWeight: fontWeight,
),
// ... other properties
);
}
}
```
> **💡 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.
</details>

## 🔑 Licensing

This package is source-available and licensed under the [PolyForm Free Trial 1.0.0](LICENSE). Please review the terms before use.

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.
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.
Loading