https://github.com/mohamedmagdy2301/settings_app_templete
This Flutter app demonstrates how to implement dynamic theming and localization using the BLoC(Cubit) state management library and shared preferences for persistent storage. Users can switch between light, dark, and system themes, as well as select their preferred app language.
https://github.com/mohamedmagdy2301/settings_app_templete
arabic-language dark dart english-language flutt light localization system-default theme
Last synced: 8 months ago
JSON representation
This Flutter app demonstrates how to implement dynamic theming and localization using the BLoC(Cubit) state management library and shared preferences for persistent storage. Users can switch between light, dark, and system themes, as well as select their preferred app language.
- Host: GitHub
- URL: https://github.com/mohamedmagdy2301/settings_app_templete
- Owner: mohamedmagdy2301
- License: mit
- Created: 2025-01-05T00:23:10.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-09T21:55:24.000Z (over 1 year ago)
- Last Synced: 2025-02-24T10:45:20.886Z (over 1 year ago)
- Topics: arabic-language, dark, dart, english-language, flutt, light, localization, system-default, theme
- Language: Dart
- Homepage:
- Size: 2.24 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# *"وَقُلْ رَبِّ زِدْنِي عِلْمًا"*
## Settings (Theming & Color Pallete and Localization) Flutter App Template
This Flutter app demonstrates how to implement **dynamic theming** and **localization** using the **BLoC** state management library and **SharedPreferences** for persistent storage. Users can switch between light, dark, and system themes, as well as select their preferred app language.
---
## Features
- **Dynamic Theming:**
- Light Mode
- Dark Mode
- System Default Theme
- **Dynamic Localization:**
- English
- Arabic
- System Default Locale
- **Color Palette Selection:**
- Customizable color options for the app interface
- **State Management:**
- BLoC (Cubit) for managing theme and localization states
- **Persistent Preferences:**
- SharedPreferences to save user settings locally
---
## Screenshots
### Ios
| System Default | English & Light | Arabic & Light |
|---|---|---|
|  |  |  |
### Android
| System Default | English & Dark | Arabic & Light |
|---|---|---|
|  |  |  |
---
## Color Palette
The app allows users to select from the following colors for personalization. These colors are used throughout the app interface for themes and highlights.
| Color Name | Preview | Hex Code |
|------------|----------------------|-------------|
| **Orange** |  | `#FFA500` |
| **Blue** |  | `#007BFF` |
| **Green** |  | `#28A745` |
| **Red** |  | `#DC3545` |
| **Indigo** |  | `#3F51B5` |
| **Purple** |  | `#800080` |
To customize these colors or add new ones, update the `list_colors.dart` file and the corresponding `ColorsState` in the `settings_cubit.dart`.
---
## Implementation Details
### 1. State Management
- **SettingsCubit** (in `settings_cubit.dart`) manages the app's theme, locale, and color states.
- It interacts with **SharedPreferences** to persist user preferences across app launches.
### 2. UI Components
- **SettingsScreen** (in `settings_screen.dart`) provides a user-friendly interface for selecting theme, language, and color preferences.
- Utilizes `BlocBuilder` to rebuild the UI whenever settings are updated.
### 3. Localization
- **AppLocalizations**: Provides translations for the selected language.
- **AppLocalizationsSetup**: Configures supported locales and localization delegates.
### 4. Persistent Storage
- **SharedPreferences** is used to store the user's selected theme, language, and color.
---
## How to Run the App
1. **Clone the repository**:
```bash
git clone
cd
```
2. **Install dependencies**:
```bash
flutter pub get
```
3. **Run the app**:
```bash
flutter run
```
---
## How to Use the App
1. Launch the app on an emulator or physical device.
2. Navigate to the **Settings Screen**.
3. Select:
- A theme (Light, Dark, or System Default).
- A language (English, Arabic, or System Default).
- A color for personalization.
4. Changes are applied immediately and persist across app launches.
---
## **Adding a New Color Palette**
To add a new color palette to the application, follow these steps:
### 1. **Add the New Color to the Enum**
In the `settings_cubit.dart` file, update the `ColorsPalleteState` enum by adding the new color. For example:
```dart
enum ColorsPalleteState { orange, blue, green, red, indigo, purple }
```
```dart
ColorsPalleteState _getColorsStateFromString(String colors) {
switch (colors) {
case 'blue':
return ColorsPalleteState.blue;
case 'red':
return ColorsPalleteState.red;
case 'green':
return ColorsPalleteState.green;
case 'indigo':
return ColorsPalleteState.indigo;
case 'orange':
return ColorsPalleteState.orange;
case 'purple': <--- Add This Line
return ColorsPalleteState.purple; <--- Add This Line
default:
return ColorsPalleteState.orange;
}
}
```
### 2. **Define the New Color in the Palettes**
Update the `lightPalettes` and `darkPalettes` in the `ThemePalette` file to include the new color:
#### Light Palette
```dart
ColorsPalleteState.purple: ThemePaletteModel(
primary: Colors.purple,
secondary: Colors.purpleAccent,
background: Color(0xFFECECEC), // Adjust as needed
text: Color(0xFF2D2D2D), // Adjust as needed
error: Color(0xFFE53935), // Adjust as needed
),
```
#### Dark Palette
```dart
ColorsPalleteState.purple: ThemePaletteModel(
primary: Colors.purple,
secondary: Colors.purpleAccent,
background: Color(0xFF121212), // Adjust as needed
text: Color(0xFFD1C4E9), // Adjust as needed
error: Color(0xFFEF5350), // Adjust as needed
),
```
### 3. **Add the Color to the Theme Extensions**
In the `themeExtensions` map, add an entry for the new color:
```dart
ThemeModeState.light: {
...,
ColorsPalleteState.purple: MyColors(primaryColor: Colors.purple),
},
ThemeModeState.dark: {
...,
ColorsPalleteState.purple: MyColors(primaryColor: Colors.purple),
},
```
### 4. **Update the Color List**
In the `list_colors.dart` file, add the new color to the `color` list:
```dart
List colorPalette = [
Colors.amber,
Colors.blue,
Colors.green,
Colors.red,
Colors.indigo,
Colors.purple, // Add your new color
];
```
### 5. **Test the Color**
Run the application and verify:
- The color is selectable in the palette widget.
- The light and dark themes reflect the correct color scheme.
---
## Dependencies
Add the following dependencies to your `pubspec.yaml` file:
```yaml
dependencies:
flutter:
sdk: flutter
flutter_bloc: ^8.1.0
shared_preferences: ^2.1.1
```
---
## Supported Locales
- **English** (`en`)
- **Arabic** (`ar`)
- **System Default Locale** (based on the device's language settings)
---
## Supported Themes
- **Light Theme**: Default light mode.
- **Dark Theme**: Default dark mode.
- **System Default**: Automatically adapts to the system theme.
---
## Contributing
We welcome contributions! Follow these steps to contribute:
1. **Fork the repository** and clone it to your local machine.
2. **Create a new branch**:
```bash
git checkout -b feature-branch
```
3. **Make changes** and commit them:
```bash
git commit -m "Add new feature"
```
4. **Push your changes**:
```bash
git push origin feature-branch
```
5. **Create a pull request** to merge your changes.
---
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.
---
## Contact
For any questions or inquiries, feel free to reach out:
- **GitHub:** [mohamedmagdy2301](https://github.com/mohamedmagdy2301)
- **Email:** [mohammedmego15@gmail.com](mailto:mohammedmego15@gmail.com)