“Building a Dynamic Theme Switcher in Flutter: A Step-by-Step Guide”

Creating a Dynamic Theme Switcher in Flutter

In the past, customized devices were the epitome of coolness. With their unique colors, icons, and backgrounds, they made mobile devices stand out from the crowd. In this article, we’ll explore how to create a dynamic theme switcher in Flutter that allows users to select custom themes and even pick the dominant color from images.

Prerequisites

Before we dive into the tutorial, make sure you have the latest version of the Flutter SDK with null safety. Additionally, install the following dependencies:

• flutter_colorpicker: v1.0.3
• material_color_generator: v1.1.0
• palette_generator: v0.3.3+2
• provider: v6.0.3
• shared_preferences: v2.0.15

Creating the Flutter App

Start by creating a new Flutter project using the command below:

flutter create <foldername>

Replace <foldername> with your desired project name. This will create a standard counter project, which we won’t need. Instead, replace the code in main.dart with the following:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dynamic Theme Switcher',
home: Scaffold(
appBar: AppBar(
title: Text('Dynamic Theme Switcher'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}

Restoring the Previous State using ChangeNotifier

To persist the current state of the app, we’ll use the shared_preferences package. Create a new file called themes.dart and add the following code:

import 'package:flutter/material.dart';
import 'package:shared<em>preferences/shared</em>preferences.dart';

class AppTheme with ChangeNotifier {
static const String _key = 'theme';

SharedPreferences _prefs;
bool _darkTheme;

AppTheme() {
_initPrefs();
}

Future <em>initPrefs() async {
_prefs = await SharedPreferences.getInstance();
_darkTheme = _prefs.getBool(</em>key) ?? true;
notifyListeners();
}

void switchTheme(bool dark) {
<em>darkTheme = dark;
_prefs.setBool(</em>key, dark);
notifyListeners();
}

bool get darkTheme => _darkTheme;
}

Flutter Project User Interface

The user interface will consist of two parts: selecting personal color choices for different theme properties and colors from images. Create two fields, a list containing the images, and six variables with type Color (three each for two themes):

class _MyAppState extends State {
List _colors = [
Colors.red,
Colors.blue,
Colors.green,
];

List _images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
];

Color _primaryColor;
Color _secondaryColor;
Color _accentColor;

Color _darkPrimaryColor;
Color _darkSecondaryColor;
Color _darkAccentColor;
}

Selecting Color Choices from Theme Properties

Wrap the build method in a ChangeNotifierProvider. This will require using the provider package:

dart
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider<AppTheme>(
create: (_) => AppTheme(),
child: Consumer<AppTheme>(
builder: (context, theme, child) {
return MaterialApp(
title: 'Dynamic Theme Switcher',
theme: theme.darkTheme ? _darkTheme : _lightTheme,
home: Scaffold(
appBar: AppBar(
title: Text('Dynamic Theme Switcher'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
},
),
);
}


Using the Palette Generator Flutter Package

To get the dominant color of the image, use the palette_generator package. Create two instances, PaletteColor colors and int _currentIndex. Initialize them in an initState function and call another function _updatePalettes:

class _MyAppState extends State {
PaletteColor _colors;
int _currentIndex = 0;

@override
void initState() {
super.initState();
_updatePalettes();
}

void <em>updatePalettes() {
for (var i = 0; i < _images.length; i++) {
PaletteGenerator.fromImageProvider(
AssetImage(</em>images[i]),
size: Size(100, 100),
).then((palette) {
setState(() {
_colors = palette.dominantColor;
});
});
}
}
}

Final Result

With the above code, you should now have a dynamic theme switcher in Flutter that allows users to select custom themes and even pick the dominant color from images.

Note: This is just a basic example and may require modifications to fit your specific needs.