Theming in Flutter

This page talks about few points I noted about Custom theming in a Flutter application.

#1 `ColorScheme`


1	`primary`	The color displayed most frequently across your app’s screens and components.
2	`primaryVariant`	A darker version of the primary color.
3	`secondary`	An accent color that, when used sparingly, calls attention to parts of the app
4	`secondaryVariant`	A darker version of the secondary color.
5	`surface`	The background color for widgets like `Card`
6	`background`	A color that typically appears behind scrollable content.
7	`error`	The color to use for input validation errors, e.g. for `InputDecoration.errorText`
8	`onPrimary`	A color that's clearly legible when drawn on Primary
9	`onSecondary`
10	`onSurface`
11	`onBackground`
12	`onError`
13	`brightness`	The overall brightness of this color scheme.

#2 Out of the Box Color Schemes

Each of these built-in color schemes apply different colors to these 13 properties.

ColorScheme.light
ColorScheme.dark
ColorScheme.highContrastLight
ColorScheme.highContrastDark

How to use these Color Schemes

By supplying a Color scheme to the ThemeData.from() factory constructor, entire app's theme can be configured.

return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData.from(colorScheme: ColorScheme.highContrastLight()),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Demo'),
    ),
    body: Center(child: Home()),
  ),
);

A Color Scheme can also be created using the Primary Swatch color.

return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData.from(colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber)),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Demo'),
    ),
    body: Center(child: Home()),
  ),
);

The remaining properties of the ColorScheme are set in the ColorScheme.fromSwatch constructor.

#3 Changing only the required colors - Using `copyWith`

Example taken from Flutter source theme_data.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(
          primarySwatch: Colors.blue,
        ).copyWith(
          secondary: Colors.green,
        ),
        textTheme: const TextTheme(
          bodyText2: TextStyle(color: Colors.purple),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('ThemeData Demo'),
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {},
        ),
        body: const Center(
          child: Text('Button pressed 0 times'),
        ),
      ),
    );
  }
}

The Color scheme is based on Colors.blue
The Color scheme's secondary color is overridden with Colors.green
The Body Text 2 Color is changed to Colors.purple

#4 How to create Custom themes

The theming example here is taken from Flokk. I just changed the state implementation from Provider to Riverpod.

`custom_theme.dart`

import 'package:flutter/material.dart';

enum ThemeType {
  FlockGreen,
  FlockGreen_Dark,
}

class AppTheme {
  static const ThemeType defaultTheme = ThemeType.FlockGreen;

  AppTheme({
    required this.isDark,
    required this.bg1,
    required this.surface,
    required this.bg2,
    required this.accent1,
    required this.accent1Dark,
    required this.accent1Darker,
    required this.accent2,
    required this.accent3,
    required this.grey,
    required this.greyStrong,
    required this.greyWeak,
    required this.error,
    required this.focus,
    required this.txt,
    required this.accentTxt,
  });

  bool isDark;
  Color bg1;
  Color surface;
  Color bg2;
  Color accent1;
  Color accent1Dark;
  Color accent1Darker;
  Color accent2;
  Color accent3;
  Color grey;
  Color greyStrong;
  Color greyWeak;
  Color error;
  Color focus;
  Color txt;
  Color accentTxt;

  factory AppTheme.fromType(ThemeType t) {
    switch (t) {
      case ThemeType.FlockGreen:
        return AppTheme(
          isDark: false,
          txt: Colors.black,
          accentTxt: Colors.white,
          bg1: const Color(0xfff1f7f0),
          bg2: const Color(0xffc1dcbc),
          surface: Colors.white,
          accent1: const Color(0xff00a086),
          accent1Dark: const Color(0xff00856f),
          accent1Darker: const Color(0xff006b5a),
          accent2: const Color(0xfff09433),
          accent3: const Color(0xff5bc91a),
          greyWeak: const Color(0xff909f9c),
          grey: const Color(0xff515d5a),
          greyStrong: const Color(0xff151918),
          error: Colors.red.shade900,
          focus: const Color(0xFF0ee2b1),
        );

      case ThemeType.FlockGreen_Dark:
        return AppTheme(
          isDark: true,
          txt: Colors.white,
          accentTxt: Colors.black,
          bg1: const Color(0xff121212),
          bg2: const Color(0xff2c2c2c),
          surface: const Color(0xff252525),
          accent1: const Color(0xff00a086),
          accent1Dark: const Color(0xff00caa5),
          accent1Darker: const Color(0xff00caa5),
          accent2: const Color(0xfff19e46),
          accent3: const Color(0xff5BC91A),
          greyWeak: const Color(0xffa8b3b0),
          grey: const Color(0xffced4d3),
          greyStrong: const Color(0xffffffff),
          error: const Color(0xffe55642),
          focus: const Color(0xff0ee2b1),
        );
    }
  }

  ThemeData get themeData {
    var t = ThemeData.from(
      textTheme: (isDark ? ThemeData.dark() : ThemeData.light()).textTheme,
      colorScheme: ColorScheme(
        brightness: isDark ? Brightness.dark : Brightness.light,
        primary: accent1,
        primaryVariant: accent1Darker,
        secondary: accent2,
        secondaryVariant: accent2.withOpacity(0.5),
        background: bg1,
        surface: surface,
        onBackground: txt,
        onSurface: txt,
        onError: txt,
        onPrimary: accentTxt,
        onSecondary: accentTxt,
        error: error,
      ),
    );

    // We can also add on some extra properties that ColorScheme seems to miss
    return t.copyWith(
      inputDecorationTheme: const InputDecorationTheme(),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      highlightColor: accent1,
      toggleableActiveColor: accent1,
      textSelectionTheme: TextSelectionThemeData(
        selectionColor: greyWeak,
        selectionHandleColor: Colors.transparent,
        cursorColor: accent1,
      ),
    );
  }
}

The enum defines two themes - Light & Dark.
The AppTheme class defines properties to hold a variety of colors. It also has a factory constructor AppTheme.fromType() .
To use Custom theme, we need a ThemeData object which will be passed to MaterialApp(). So, the AppTheme class also has a getter themeData that creates a ThemeData object by configuring textTheme and colorScheme. Few other properties of ThemeData are also changed by using copyWith().
The ColorScheme class requires 13 properties to be passed. This is where the colors from AppTheme are used.

`main.dart`

import 'package:custom_theme/custom_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class ApplicationTheme extends StateNotifier<AppTheme> {
  ApplicationTheme({themeType = ThemeType.FlockGreen})
      : _themeType = themeType,
        _theme = AppTheme.fromType(themeType),
        super(
          AppTheme.fromType(AppTheme.defaultTheme),
        );

  ThemeType _themeType;
  AppTheme _theme;

  AppTheme get theme => _theme;

  /// Switch between Light & Dark themes
  void changeTheme() {
    _themeType = _themeType == ThemeType.FlockGreen
        ? ThemeType.FlockGreen_Dark
        : ThemeType.FlockGreen;

    _theme = AppTheme.fromType(_themeType);

    state = _theme;
  }
}

final themeProvider = StateNotifierProvider<ApplicationTheme, AppTheme>(
    (ref) => ApplicationTheme());

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, _) {
        final AppTheme appTheme = ref.watch(themeProvider);

        // Build a ThemeData object using the current theme
        final ThemeData theme = appTheme.themeData;

        return MaterialApp(
          debugShowCheckedModeBanner: false,
          theme: theme,
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Custom Theme'),
            ),
            body: const Center(
              child: Home(),
            ),
            floatingActionButton: FloatingActionButton(
              onPressed: () {
                ref.read(themeProvider.notifier).changeTheme();
              },
              child: const Icon(Icons.refresh),
            ),
          ),
        );
      },
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) {
        final AppTheme appTheme = ref.watch(themeProvider);

        return Stack(
          children: [
            Container(
              width: 300,
              height: 300,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20),
                color: appTheme.bg2,
              ),
              child: const Center(
                child: Text(
                  'Hello World',
                  style: TextStyle(fontSize: 36),
                ),
              ),
            ),
          ],
        );
      },
    );
  }
}

Riverpod is being used to hold Custom Theme Object.
ApplicationTheme is a wrapper to AppTheme class. It has a property _theme , which is its State.
The method changeTheme() is used to switch between light & dark themes. This sets the state property, which then informs the dependent widgets to rebuild.

Here, we define a StateNotifierProvider - themeProvider.

final themeProvider = StateNotifierProvider<ApplicationTheme, AppTheme>(
    (ref) => ApplicationTheme());

ryandam9 / custom_theming_in_flutter Goto Github PK

custom_theming_in_flutter's Introduction

Theming in Flutter

#1 `ColorScheme`

#2 Out of the Box Color Schemes

How to use these Color Schemes

#3 Changing only the required colors - Using `copyWith`

#4 How to create Custom themes

`custom_theme.dart`

`main.dart`

Links

custom_theming_in_flutter's People

Contributors

Watchers

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

ryandam9 / custom_theming_in_flutter Goto Github PK

custom_theming_in_flutter's Introduction

Theming in Flutter

#1 ColorScheme

#2 Out of the Box Color Schemes

How to use these Color Schemes

#3 Changing only the required colors - Using copyWith

#4 How to create Custom themes

custom_theme.dart

main.dart

Links

custom_theming_in_flutter's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

#1 `ColorScheme`

#3 Changing only the required colors - Using `copyWith`

`custom_theme.dart`

`main.dart`