Expect to add a pre-configured theme style in dark mode

[maxfrees]

Expect to provide this preset style

[rydmike]

Not sure I fully understand the question.

It is not very feasible to provide every style there is as premade design.

That said, you can certainly make something that looks similar to this with FlexColorScheme and even in the Themes Playground.

Not exact, nor can I know what design you want exactly, but it is in the same direction 😄

going to turn this into discussion as it is not really an issue. We can continue there and other can find it and learn from it as Q&A later too.

[maxfrees]

I expect to have a theme design with such a color scheme in the navigation above

[rydmike]

Ok that we can certainly do👍

Not at keyboard for another 10h or so, but as soon as I get a chance I will post an answer with an example and needed steps 🙂

[maxfrees]

thanks you

[rydmike]

Hi again @maxfrees, let's look at some basics first.

To use themes from the Themes Playground you need to:

1. Add flex_color_scheme to your pubspec.yaml. If you use Flutter 3.22 or later I recommend using the 8.0.0-dev.1 release, even if it is still a dev release. The final 8.0.0 release will not have any new additional features, just more quality assurance testing that is still incomplete.

• flex_color_scheme: ^8.0.0-dev.1
• The Themes Playground version for this 8.0.0-dev.1 release is here: https://rydmike.com/flexcolorscheme/themesplayground-dev/
• If you use Flutter 3.19, then stick to current stable release: 7.3.1

2. Then of course import the package where ever you are using its code

• import 'package:flex_color_scheme/flex_color_scheme.dart';

3. Use the playground and configure your light and dark mode themes.
4. Copy paste the config code from the Playground, to your app.
   A. Use the ThemeData config code in your MaterialApp's theme and darkTheme
   OR
   B. Use the option in Playground V8 to copy the theme config as a class that you can put in its own file. You can do that with option A too, that was only available in 7.3.1 version, but then you have to edit the config and create the setup yourself. V8 offers a config with this option separately. You sill have to put the code in an empty file of course. The configure MatieralApp to use these

Done, the theme you see in the Themes Playground app itself or on its small demo apps in the simulator is the new default style you get on on Material UI Widget in and Flutter MaterialApp.

Do note that if you make custom wrapped widgets, or style standard Material widget on widget level, those will override any theme style and you will NOT see the themed design. This is normal Flutter theme-widget behavior.

With custom or wrapped standard widgets, you can get them to have a theme response too if their defaults depend on properties from themeData and its component themes, with default fallbacks, as themes are null by default if not defined.

When you use any Material widget without any styling, that is when you now get the custom themed designed. The idea with the theme is of course to make all components look the way you need them to look like, so that you do not have to style them on widget level, you just theme your app and use the widgets without any additional styling. If you change light/dark mode your app and all widgets change to it.

You can of course also have multiple light themes and multiple dark themes. This requires som coding though. The Playground app has close to 60 light/dark themes and over 300 theme property values you can define, as you create the theme design, the Themes Playground app is modifying its own theme to follow the changes you make and it writes the flex_color_scheme code for it as you change things. If you keep the code view tool open on one side, you can see what config code it writes as you modify settings. and the Playground app's components and colors changes accordingly too

Let's look at an example...

Do your config in the Playground

When you are happy with the design, copy its code:

Screen.Recording.2024-10-16.at.21.14.19.mov

Put Copied Theme config code into your project

And configure you MaterialApp to use the theme!

Screen.Recording.2024-10-16.at.21.41.58.mov

import 'package:flex_color_scheme/flex_color_scheme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

/// The [AppTheme] defines light and dark themes for the app.
///
/// Theme setup for FlexColorScheme package v8.
/// Use same major flex_color_scheme package version. If you use a
/// lower minor version, some properties may not be supported.
/// In that case, remove them after copying this theme to your
/// app or upgrade package to version 8.0.0-dev.1.
///
/// Use in [MaterialApp] like this:
///
/// MaterialApp(
///  theme: AppTheme.light,
///  darkTheme: AppTheme.dark,
///  :
/// );
sealed class AppTheme {
  // The defined light theme.
  static ThemeData light = FlexThemeData.light(
    scheme: FlexScheme.sepia,
    surfaceMode: FlexSurfaceMode.level,
    blendLevel: 5,
    subThemesData: const FlexSubThemesData(
      interactionEffects: true,
      tintedDisabledControls: true,
      scaffoldBackgroundBaseColor: FlexScaffoldBaseColor.surfaceContainerLowest,
      useM2StyleDividerInM3: true,
      inputDecoratorSchemeColor: SchemeColor.primary,
      inputDecoratorIsFilled: true,
      inputDecoratorBackgroundAlpha: 26,
      inputDecoratorBorderSchemeColor: SchemeColor.primary,
      inputDecoratorBorderType: FlexInputBorderType.outline,
      inputDecoratorRadius: 12.0,
      inputDecoratorUnfocusedHasBorder: false,
      inputDecoratorFocusedBorderWidth: 1.0,
      inputDecoratorPrefixIconSchemeColor: SchemeColor.onPrimaryFixedVariant,
      alignedDropdown: true,
      navigationRailUseIndicator: true,
      navigationRailLabelType: NavigationRailLabelType.all,
    ),
    keyColors: const FlexKeyColors(
      useSecondary: true,
      useTertiary: true,
      keepPrimary: true,
      keepSecondary: true,
      keepTertiary: true,
    ),
    tones:
        FlexSchemeVariant.chroma.tones(Brightness.light).higherContrastFixed(),
    visualDensity: FlexColorScheme.comfortablePlatformDensity,
    cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
  );
  // The defined dark theme.
  static ThemeData dark = FlexThemeData.dark(
    scheme: FlexScheme.sepia,
    surfaceMode: FlexSurfaceMode.level,
    blendLevel: 5,
    subThemesData: const FlexSubThemesData(
      interactionEffects: true,
      tintedDisabledControls: true,
      blendOnColors: true,
      scaffoldBackgroundSchemeColor: SchemeColor.surfaceContainerLow,
      useM2StyleDividerInM3: true,
      inputDecoratorSchemeColor: SchemeColor.primary,
      inputDecoratorIsFilled: true,
      inputDecoratorBackgroundAlpha: 45,
      inputDecoratorBorderSchemeColor: SchemeColor.primary,
      inputDecoratorBorderType: FlexInputBorderType.outline,
      inputDecoratorRadius: 12.0,
      inputDecoratorUnfocusedHasBorder: false,
      inputDecoratorFocusedBorderWidth: 1.0,
      inputDecoratorPrefixIconSchemeColor: SchemeColor.primaryFixed,
      alignedDropdown: true,
      navigationRailUseIndicator: true,
      navigationRailLabelType: NavigationRailLabelType.all,
    ),
    keyColors: const FlexKeyColors(
      useSecondary: true,
      useTertiary: true,
      keepPrimary: true,
      keepSecondary: true,
      keepTertiary: true,
    ),
    tones:
        FlexSchemeVariant.chroma.tones(Brightness.dark).higherContrastFixed(),
    visualDensity: FlexColorScheme.comfortablePlatformDensity,
    cupertinoOverrideTheme: const CupertinoThemeData(applyThemeToAll: true),
  );
}

Use the light and dark themes above from this file:

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Copy Playground',
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      themeMode: themeMode,

You of course need a switch in yor app that can toggle between light and dark mode. This example does not cover how to make one, it is just normal Flutter code. If you do not have one one and leave out the out the themeMode: themeMode, you app will switch light/dark mode when you switch the operating system light/dark mode. In many cases that is good enough. In this demo I made, you can force light or dark, or choose to follow operating system mode.

In the above example, I was using this demo app that is including amng all the examples in the package source code on GitHub.

This is for the 8.0.0 dev release, using the own file config:

Main file:
https://github.com/rydmike/flex_color_scheme/blob/version-8-0-0/example/lib/example_copy_paste_from_playground/main.dart

Separate file for the theme:

https://github.com/rydmike/flex_color_scheme/blob/version-8-0-0/example/lib/example_copy_paste_from_playground/app_theme.dart

If you use the older style where the config is all in the MaterialApp you can use the current ölast stable release 7.3.1, example:

https://github.com/rydmike/flex_color_scheme/blob/master/example/lib/example_copy_paste_from_playground/main.dart

Relevants docs

These docs are still for FlexColorScheme 7.3.1, but all concepts are still the same. The only new thing is really option to copy code premade for use in separate file. Before you had to write that file wrapper yourself if you wanted it. I do recommend this way, as it looks cleaner 😄

• https://docs.flexcolorscheme.com/playground#code-generation
• https://docs.flexcolorscheme.com/playground#copy-setup-code

And also for the copy-theme-to test demo app:

• https://docs.flexcolorscheme.com/copy_playground

To learn more about how to make themes user configurable and offer the choice between a few themes, checkout the tutorial docs and all its steps.

https://docs.flexcolorscheme.com/tutorial1

Version 8.0.0

The main difference between 7.3.1 and 8.0.0-dev.1 is that 8.0.0-dev.1 release support all the new ColorScheme colors that were added in Flutter 3.22.0 and it also has a large number of new features.

https://docs.flexcolorscheme.com/whats_new

[maxfrees]

Thank you for your great work