{"id":23955685,"url":"https://github.com/mohamedmagdy2301/settings_app_templete","last_synced_at":"2025-10-08T21:43:36.007Z","repository":{"id":271038468,"uuid":"912222392","full_name":"mohamedmagdy2301/settings_app_templete","owner":"mohamedmagdy2301","description":"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.","archived":false,"fork":false,"pushed_at":"2025-01-09T21:55:24.000Z","size":2351,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T10:45:20.886Z","etag":null,"topics":["arabic-language","dark","dart","english-language","flutt","light","localization","system-default","theme"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohamedmagdy2301.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-01-05T00:23:10.000Z","updated_at":"2025-01-23T21:51:17.000Z","dependencies_parsed_at":"2025-09-07T03:37:53.237Z","dependency_job_id":null,"html_url":"https://github.com/mohamedmagdy2301/settings_app_templete","commit_stats":null,"previous_names":["mohamedmagdy2301/setteing_app_templete","mohamedmagdy2301/settings_app_templete"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohamedmagdy2301/settings_app_templete","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmagdy2301%2Fsettings_app_templete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmagdy2301%2Fsettings_app_templete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmagdy2301%2Fsettings_app_templete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmagdy2301%2Fsettings_app_templete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohamedmagdy2301","download_url":"https://codeload.github.com/mohamedmagdy2301/settings_app_templete/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmagdy2301%2Fsettings_app_templete/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273993038,"owners_count":25203792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arabic-language","dark","dart","english-language","flutt","light","localization","system-default","theme"],"created_at":"2025-01-06T15:51:24.896Z","updated_at":"2025-10-08T21:43:30.963Z","avatar_url":"https://github.com/mohamedmagdy2301.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cdiv align=\"center\"\u003e\n\n# *\"وَقُلْ رَبِّ زِدْنِي عِلْمًا\"*\n\n\u003c/div\u003e\n\n## Settings (Theming \u0026 Color Pallete and Localization) Flutter App Template\n\nThis 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.\n\n---\n\n\n## Features\n\n- **Dynamic Theming:**\n  - Light Mode\n  - Dark Mode\n  - System Default Theme\n\n- **Dynamic Localization:**\n  - English\n  - Arabic\n  - System Default Locale\n\n- **Color Palette Selection:**\n  - Customizable color options for the app interface\n\n- **State Management:**\n  - BLoC (Cubit) for managing theme and localization states\n\n- **Persistent Preferences:**\n  - SharedPreferences to save user settings locally\n\n---\n\n## Screenshots\n\n### Ios\n| System Default | English \u0026 Light | Arabic \u0026 Light |\n|---|---|---|\n| ![Screenshot](s2.png) | ![Screenshot](s1.png) | ![Screenshot](s3.png)  |\n### Android\n| System Default | English \u0026 Dark | Arabic \u0026 Light |\n|---|---|---|\n| ![Screenshot](Screenshot3.png) | ![Screenshot](Screenshot1.png) | ![Screenshot](Screenshot2.png)  |\n\n---\n\n## Color Palette\n\nThe app allows users to select from the following colors for personalization. These colors are used throughout the app interface for themes and highlights.\n\n| Color Name | Preview              | Hex Code    |\n|------------|----------------------|-------------|\n| **Orange** | ![Orange](https://via.placeholder.com/20/FFA500?text=+) | `#FFA500` |\n| **Blue**   | ![Blue](https://via.placeholder.com/20/007BFF?text=+)   | `#007BFF` |\n| **Green**  | ![Green](https://via.placeholder.com/20/28A745?text=+)  | `#28A745` |\n| **Red**    | ![Red](https://via.placeholder.com/20/DC3545?text=+)    | `#DC3545` |\n| **Indigo** | ![Indigo](https://via.placeholder.com/20/3F51B5?text=+) | `#3F51B5` |\n| **Purple** | ![Purple](https://via.placeholder.com/20/800080?text=+) | `#800080` |\n\nTo customize these colors or add new ones, update the `list_colors.dart` file and the corresponding `ColorsState` in the `settings_cubit.dart`.\n\n---\n\n## Implementation Details\n\n### 1. State Management\n- **SettingsCubit** (in `settings_cubit.dart`) manages the app's theme, locale, and color states.\n- It interacts with **SharedPreferences** to persist user preferences across app launches.\n\n### 2. UI Components\n- **SettingsScreen** (in `settings_screen.dart`) provides a user-friendly interface for selecting theme, language, and color preferences.\n- Utilizes `BlocBuilder` to rebuild the UI whenever settings are updated.\n\n### 3. Localization\n- **AppLocalizations**: Provides translations for the selected language.\n- **AppLocalizationsSetup**: Configures supported locales and localization delegates.\n\n### 4. Persistent Storage\n- **SharedPreferences** is used to store the user's selected theme, language, and color.\n\n---\n\n## How to Run the App\n\n1. **Clone the repository**:\n   ```bash\n   git clone \u003crepository-url\u003e\n   cd \u003crepository-folder\u003e\n   ```\n\n2. **Install dependencies**:\n   ```bash\n   flutter pub get\n   ```\n\n3. **Run the app**:\n   ```bash\n   flutter run\n   ```\n\n---\n\n## How to Use the App\n\n1. Launch the app on an emulator or physical device.\n2. Navigate to the **Settings Screen**.\n3. Select:\n   - A theme (Light, Dark, or System Default).\n   - A language (English, Arabic, or System Default).\n   - A color for personalization.\n4. Changes are applied immediately and persist across app launches.\n\n---\n \n## **Adding a New Color Palette**\n\nTo add a new color palette to the application, follow these steps:\n\n### 1. **Add the New Color to the Enum**\nIn the `settings_cubit.dart` file, update the `ColorsPalleteState` enum by adding the new color. For example:\n```dart\nenum ColorsPalleteState { orange, blue, green, red, indigo, purple }\n```\n```dart\n\n  ColorsPalleteState _getColorsStateFromString(String colors) {\n    switch (colors) {\n      case 'blue':\n        return ColorsPalleteState.blue;\n      case 'red':\n        return ColorsPalleteState.red;\n      case 'green':\n        return ColorsPalleteState.green;\n      case 'indigo':\n        return ColorsPalleteState.indigo;\n      case 'orange':\n        return ColorsPalleteState.orange;\n      case 'purple':                        \u003c--- Add This Line\n        return ColorsPalleteState.purple;   \u003c--- Add This Line\n      default:\n        return ColorsPalleteState.orange;\n    }\n  }\n```\n\n### 2. **Define the New Color in the Palettes**\nUpdate the `lightPalettes` and `darkPalettes` in the `ThemePalette` file to include the new color:\n\n#### Light Palette\n```dart\nColorsPalleteState.purple: ThemePaletteModel(\n  primary: Colors.purple,\n  secondary: Colors.purpleAccent,\n  background: Color(0xFFECECEC), // Adjust as needed\n  text: Color(0xFF2D2D2D), // Adjust as needed\n  error: Color(0xFFE53935), // Adjust as needed\n),\n```\n\n#### Dark Palette\n```dart\nColorsPalleteState.purple: ThemePaletteModel(\n  primary: Colors.purple,\n  secondary: Colors.purpleAccent,\n  background: Color(0xFF121212), // Adjust as needed\n  text: Color(0xFFD1C4E9), // Adjust as needed\n  error: Color(0xFFEF5350), // Adjust as needed\n),\n```\n\n### 3. **Add the Color to the Theme Extensions**\nIn the `themeExtensions` map, add an entry for the new color:\n```dart\nThemeModeState.light: {\n  ...,\n  ColorsPalleteState.purple: MyColors(primaryColor: Colors.purple),\n},\nThemeModeState.dark: {\n  ...,\n  ColorsPalleteState.purple: MyColors(primaryColor: Colors.purple),\n},\n```\n\n### 4. **Update the Color List**\nIn the `list_colors.dart` file, add the new color to the `color` list:\n```dart\nList\u003cColor\u003e colorPalette = [\n  Colors.amber,\n  Colors.blue,\n  Colors.green,\n  Colors.red,\n  Colors.indigo,\n  Colors.purple, // Add your new color\n];\n```\n\n### 5. **Test the Color**\nRun the application and verify:\n- The color is selectable in the palette widget.\n- The light and dark themes reflect the correct color scheme.\n\n---\n\n## Dependencies\n\nAdd the following dependencies to your `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n  flutter_bloc: ^8.1.0\n  shared_preferences: ^2.1.1\n```\n\n---\n\n## Supported Locales\n\n- **English** (`en`)\n- **Arabic** (`ar`)\n- **System Default Locale** (based on the device's language settings)\n\n---\n\n## Supported Themes\n\n- **Light Theme**: Default light mode.\n- **Dark Theme**: Default dark mode.\n- **System Default**: Automatically adapts to the system theme.\n\n---\n\n## Contributing\n\nWe welcome contributions! Follow these steps to contribute:\n\n1. **Fork the repository** and clone it to your local machine.\n2. **Create a new branch**:\n   ```bash\n   git checkout -b feature-branch\n   ```\n3. **Make changes** and commit them:\n   ```bash\n   git commit -m \"Add new feature\"\n   ```\n4. **Push your changes**:\n   ```bash\n   git push origin feature-branch\n   ```\n5. **Create a pull request** to merge your changes.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n---\n\n## Contact\n\nFor any questions or inquiries, feel free to reach out:\n\n- **GitHub:** [mohamedmagdy2301](https://github.com/mohamedmagdy2301)\n- **Email:** [mohammedmego15@gmail.com](mailto:mohammedmego15@gmail.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamedmagdy2301%2Fsettings_app_templete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamedmagdy2301%2Fsettings_app_templete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamedmagdy2301%2Fsettings_app_templete/lists"}