Flutter Theme Mode using Provider

admin@crackerworld.in Avatar

Flutter Theme Mode using Provider:Nowadays almost all the mobile application uses a dark theme, for example, Instagram, Whatsapp, Youtube, etc. It’s easy to implement in Flutter,

we will be learning how to implement the dark theme and light in our app using the provider package

As we all now Dark theme is trending and most of the popular app has the feature to turn into the dark mode.

Dark Mode:

The dark mode is characterized by darker backgrounds and lighter text/icons. It’s designed to reduce the amount of light emitted by screens, which can be beneficial in various scenarios:

  • Reduced Eye Strain: Dark mode can be easier on the eyes, especially in low-light environments. The lower brightness of dark backgrounds can help reduce eye strain and visual fatigue.
  • Better for OLED Displays: OLED displays can individually turn off pixels to display true black. In dark mode, using black backgrounds can result in energy savings and better contrast.
  • Preserving Night Vision: When using devices in the dark, such as during bedtime, the dark mode can help preserve your night vision and make it easier to transition to a dark environment.
  • Energy Efficiency: For devices with OLED or AMOLED screens, the dark mode can save battery life since individual pixels can be turned off, using less power.
  • Aesthetics: Many users find dark mode visually appealing and modern. It can also reduce the glare of a bright screen, creating a more immersive experience.
Light Mode:

Light mode is the traditional color scheme with light backgrounds and dark text/icons. It offers its own set of advantages:

  • Readability: Light mode often provides better readability, especially in well-lit environments. The high contrast between dark text and light backgrounds can make text stand out more clearly.
  • Familiarity: Light mode is the default mode in most applications and websites. Users who are accustomed to this mode may find it more comfortable and familiar.
  • Accessibility: Light mode is generally more accessible for individuals with certain visual impairments, as the high contrast between text and background can enhance legibility.
  • Consistency with Branding: For some apps and websites, the light mode may align better with their branding and design aesthetics, providing a cleaner and more professional look.
Step 1: Add the dependencies

Add dependencies to pubspec.yaml file.

Step 2: Create folders and dart files inside the lib folder like Shared Preferences, Pages, and Theam, and inside these folders, we create the dart files for better understanding and good practice for the projects.

Step 3: Create a model class for provider

We are accessing the preference value through the provider so whenever there is any change the notifyListeners() UI will be updated if we have attached the provider to the screen.

Step 4: Add the provider to Material app

Step 5:Flutter Theme Mode using Provider


Flutter Theme Mode using Provider
Flutter Theme Mode using Provider

For More: State Management System Bloc Shopping Cart

Tagged in :

admin@crackerworld.in Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts