Flutter - Creating multi theme color app.

Flutter Theme :-
Theming app with multiple colors makes the app looks awesome. In this post, we will look at the implementation of multiple themes or colors.

As we have seen in many apps, providing the multicolor option in the app makes the user comfortable with the app, because the user can have own choice of app color. Even I used to think the app should support the multicolor, so I thought to create it in a flutter.

Before start, we need to add a dependency, open pubspec.yaml file and add the following line.


pubspec.yaml

dependencies:
 shared_preferences: ^0.5.2

We need a shared_preference package to manage or to check the current color of the app. As per the applied theme, we'll switch the theme.

Here, I have created the theme.pref.dart file to set/get the theme color from shared preference.
Every time when the app runs, shared preference will return the theme value that we have to set to ThemeData in MaterialApp() widget.

If you getting confused, don't worry we will see the code for better understanding.

Create theme_pref.dart file.

theme_pref.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class ThemePref {
  static void setTheme(String value) async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    await preferences.setString('color', value);
  }

  static Future<String> getTheme() async {
    SharedPreferences preferences = await SharedPreferences.getInstance();
    return preferences.getString('color');
  }
  static ThemeData getThemeData(String value){
    ThemeData data;
    switch(value){
      case 'red':
      data = ThemeData(
        primarySwatch: Colors.red
      );
      break;
      case 'blue':
      data = ThemeData(
        primarySwatch: Colors.blue
      );
      break;
      default:
      data = ThemeData(
        primarySwatch: Colors.red
      );
      break;
    }
    return data;
  }
}

As you can see the above code, I have created 3 functions to get the theme, to set theme and getThemeData() to return the theme data as per the color value.
We will look at the further implementation of theme_pref.dart. 

Now let create the next screen file from where we can change the theme and that will apply to the whole app.

Create next_screeen.dart file.

next_screen.dart

import 'package:blog/global_app.dart';
import 'package:flutter/material.dart';
import 'package:blog/theme_pref.dart';

class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Screen'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Change Theme'),
          onPressed: () async {
            await ThemePref.getTheme().then((color) {
              ThemePref.setTheme(color == 'red' ? 'blue' : 'red');
              GlobalApp.of(context).rebuild();
            });
          },
        ),
      ),
    );
  }
}

If you look at the above code, I think half of the code will get cleared to you. Theme pref class return the current color and then store the color in shared_preference.
Now let see about the global app file.

Create global_pref.dart file.

global_app.dart

import 'package:flutter/material.dart';

class GlobalApp extends StatefulWidget {
  final Function(BuildContext) builder;

  GlobalApp({@required this.builder});

  @override
  GlobalAppState createState() => GlobalAppState();

  static GlobalAppState of(BuildContext context) {
    return context.ancestorStateOfType(TypeMatcher<GlobalAppState>());
  }
}

class GlobalAppState extends State<GlobalApp> {
  @override
  Widget build(BuildContext context) {
    return widget.builder(context);
  }

  void rebuild() {
    setState(() {});
  }
}

In global_app.dart, I received the widget and created the rebuild() function to notify that the app state has been changed.
The global_app.dart file has a static of() function which will return the state to all other classes.

Now let see the final implementation.

main.dart

import 'package:blog/global_app.dart';
import 'package:blog/next_screen.dart';
import 'package:flutter/material.dart';
import 'theme_pref.dart';

void main() {
  runApp(GlobalApp(
    builder: (BuildContext context) {
      return FutureBuilder(
        future: ThemePref.getTheme(),
        initialData: 'red',
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return MaterialApp(
            debugShowCheckedModeBanner: false,
            theme: ThemePref.getThemeData(snapshot.data),
            home: Home(),
          );
        },
      );
    },
  ));
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme'),
      ),
      body: Center(
        child: FlatButton(
          child: Text('Next Screen'),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (BuildContext context) {
              return NextScreen();
            }));
          },
        ),
      ),
    );
  }
}

As you can see the above code, I have set the GlobalApp() as a parent widget instead of MaterialApp() widget and in next_screen.dart file I rebuild the GlobalApp.of(context).rebuild();  state of the whole app which causes the FutureBuilder() to get the latest theme from the shared preference.
This is why I have used FutureBuilder() with MaterialApp().

I have explained FutureBuilder() & Contaner() in detail, please check.

Thank you for reading.