Material-3 AppBar color

[bksubhuti]

We are now up to 3.2k active installs on tipitaka pali reader. (buddhist sun ~500).. and then other os's maybe 800.
I just implemented useMaterial3: true, and it works really nice. There is not much to do for this conversion, but make the cards a little tighter and some search filter chips were hardcoded as blue which we can fix. I didn't know material 3 this was possible until the play store console app recently updated.

The app title "TIpitaka Pali Reader" should have the app bar theme color (in m2 it does).
The book title should have the app bar theme color (in m2 it does).
I was wondering if there is a way to get the app bar back to have a material 3 style color other than white???

Much appreciation for you color theme package.

[bksubhuti]

What I would like is either the floating action button color or the bottom navbar color or the card color. However, I tried adding the colors based on those themes but they are white.

[rydmike]

Hi @bksubhuti,

With FlexColorScheme you can nowadays theme pretty much any widget to use any color from your theme's ColorScheme. In Material-3 the AppBar is surface colored by default, but you can set it to primary like in Material-2.

Change it either via the older API and more limited color options directly in FlexThemeData or FlexColorScheme:

theme: FlexThemeData.light(
  scheme: FlexScheme.barossa,
  appBarStyle: FlexAppBarStyle.primary,  
  useMaterial3: true,
),

Or via the newer FlexSubThemesData API:

theme: FlexThemeData.light(
  scheme: FlexScheme.barossa,
  subThemesData: const FlexSubThemesData(
    appBarBackgroundSchemeColor: SchemeColor.primary,
  ),
  useMaterial3: true,
),

Note that FlexThemeData.light is just newer shorthand for FlexColorScheme.light(...).toTheme, so the above can just as well be written as:

theme: FlexColorScheme.light(
  scheme: FlexScheme.barossa,
  subThemesData: const FlexSubThemesData(
    appBarBackgroundSchemeColor: SchemeColor.primary,
  ),
  useMaterial3: true,
).toTheme,

With the newer API above you can use any of your theme's ColorScheme color as AppBar color.

Material 3 AppBar Info
Do be aware that Material3 also uses elevation tint on the AppBar, which is based on ColorScheme.surfaceTint, which equals primary by default. To avoid the elevation tint elevation and scroll under elevation to zero. Or set the app bar elevation tint color to Colors.transparent. If you want to use elevation and show a shadow on App Bar in M3, you need to set its shadowColor to Colors.black.

You will need to define desired color separately the AppBar's light and dark themes.

ColorScheme M3 info
In Material 2, the role of secondary color is basically moved to the tertiary color. When you change to Material 3 form Material 2, what often works is to put your Material 2 secondary color as tertiary color, and add a new color for secondary color. Typically (by default in M3) this color is a more muted, less colorful version of your primary color.
With Material 3 using a seeded color scheme usually works best and then locking the primary color down to your seed color to use it as brand color in light mode. If this brand color is important in dark mode, it can often be used as the primaryVariant color

---

Latest version of Themes Playground where you can try different themes and see what code it makes for the theme and even copy paste the code can be found here: https://rydmike.com/flexcolorscheme/themesplayground-latest/

The FlexColorScheme docs also contain a lot of useful theming guidance, not only info on how to use FlexColorScheme package and its API, see https://docs.flexcolorscheme.com/

The ColorScheme in Material3 is quite a complex topic. It is a good idea to study it further in the Material 3 guide https://m3.material.io/styles/color/the-color-system/key-colors-tones

[bksubhuti]

I was able to manually change the appbar color .. in the appbar background color property.
But I was not able to use some of the pastel pinks that come with my theme.. I didn't know which one to use.. but tried more or less all of them. I could get highlightcolor to work.

        appBar: Mobile.isPhone(context)
            ? AppBar(
                backgroundColor: Theme.of(context).highlightColor,
                title: Row(

but trying to get that pastel pink was not successful..
i tried using the themes and colors but got the same canvas color

backgroundColor: Theme.of(context).bottomAppBarTheme.color backgroundColor: Theme.of(context).floatingActionButtonTheme.backgroundColor etc
I was unable to get that color based on the theme.
I'll look into the docs you said. There are not many places where the appbar is used actually. But I'd like to know why I'm still getting the canvas color when these items are sure to be used in the buttons. and bottom app bar.
I like the pastel stuff.. but I want a slight color on the app bar.

I appreciate your response.. I'll play a little more tomorrow. We are quite busy with studying for final exams. but I took a break to try this theme thing. The themes were easy to change to material 3.

[bksubhuti]

I jumped on the playground.. but it is a little complex. I looked at the app bar.. and it seemed to change color to the pastel version of the primary color. But that was only in the playground.. by default (in the theme without doing anything), I only get white for the appbar.

[bksubhuti]

I think the easiest thing to do .. would be to just keep everything standard with the theme and change the app bars to a matching pastel version of the primary.. but finding that pastel of the theme is not working for me.

[bksubhuti]

also same with almost anything I choose..

AppBar(
                backgroundColor: Theme.of(context).cardColor,
                title: Row(

[bksubhuti]

Through some trial and error.. I was able to find out that below worked.
backgroundColor: Theme.of(context).primaryColorLight,
I should probably just have less of a choice and more custom themes.. I have always wanted to
Make burmese burgandy
Siam orange
Forest Brown
Thai tan
Sayalay (nun) pink
Mahayana blue
etc. to be fun..
I think I can do this now. I'll keep you posted.
Then I assume, that I can just have the backgroundcolor of the appbar as NULL and let the theme do the work.

[rydmike]

What you are doing earlier above:

AppBar(
  backgroundColor: Theme.of(context).cardColor,
  title: Row(

is not theming, what you are doing above is trying to assign colors from ThemeData to an AppBar widget's background color.

You can certainly do that, but it is not theming the application and its components and it will not change the default color of all AppBar:s in your app to the specified color, only for the given AppBar, of course if that is the intent, then that is fine too of course.

Consider theming the AppBar
What I showed you above earlier was how to set the default color for all AppBars in your app using ThemeData. If you want to have a consistent theme depending color in your application on all AppBars in your app, then theme the AppBar as I showed earlier. I recommend the newer API where you can select any of the ColorScheme colors as its color. In Material2 it was always primary by default, so use that if you still want that in Material3.

---

Another issue with your color assignments to the AppBar above is that unless you have defined color values for the component themes in ThemeData, they will all be null by default, this is just how Flutter works when using Material 2 and 3.

So for example:

backgroundColor: Theme.of(context).bottomAppBarTheme.color;

or

backgroundColor: Theme.of(context).floatingActionButtonTheme.backgroundColor; 

Unless your app has specified colors for those component theme colors in ThemeData, they will be null and not have any color value, so the color of the AppBar will not change. (Based on waht I saw from your theme setup you had not specified any custom theme colors for bottomAppBarTheme.color or floatingActionButtonTheme.backgroundColor, so those color value are null).

Depending on how you have made your ThemeData object with FlexColorScheme, certain component theme colors will indeed have color values, but they will not if you have kept them at defaults. At default values they will be null, and the color they get depends on the colors in the ColorScheme in your ThemeData.

Different Material widgets use different colors for different parts of the widget in question from the ColorScheme (Theme.of(context).colorScheme). The default color mappings from the ColorScheme follow the Material2 or Material3 design specifications, depending on which mode you use. With component themes you can change these mappings to other another ColorScheme color than the default one, or you can even give it a completely custom color value. Although FlexColorScheme on purpose restricts you to your theme's active ColorScheme colors.

To design a theme, you typically start with defining a ColorScheme. FlexColorScheme includes many tools to make defining a complete color scheme easier. It is especially tricky and demanding in Material3 mode that uses a lot of color that should have certain relations to each other and meet good contrast criteria too. Due to the demanding nature of making a Material3 ColorScheme using key color(s) seed generated ColorScheme is recommended. You can include the seed colors as color in your resulting ColorScheme if you want to, but default the exact seed colors do not typically end up in the produced ColorScheme, this is just how the M3 color algorithms work. With FlexColorScheme you can however lock the seed colors in so you can get them as your actual primary, secondary and tertiary colors. With Flutter's vanilla ColorScheme.fromSeed you can only use one seed color, the primary. FlexColorScheme allows you to use own seed colors for all three main colors.

Using your active theme colors

If you want to use the colors that your theme has defined, you should use them from
Theme.of(context).colorScheme and then whichever of all the 30 ColorScheme colors you want to use from your theme.

Seed generated ColorScheme

To get beautiful ColorScheme using one of the seed strategies is recommended, because defining them all by hand is very tedious. FlexColorScheme will define all the ColorScheme values from the few input defaults as well (also when using the colors API) using its own legacy color aglorithms for them. However, the results are a bit different and better when you using the newer Material-3 color computation algos and my own additions to them to make them even more powerful and flexible.

Here is an example.

theme: FlexThemeData.light(
  // This with predefined `scheme` color, but works with custom `colors` API too. As a 3rd
  // option FlexColorScheme can also accept a full predefined `ColorScheme` as input via
  // its `colorScheme` property.
  scheme: FlexScheme.barossa,
  // This will make your app bars primary colored in both M2 and M3 mode.
  appBarStyle: FlexAppBarStyle.primary,  
  // Enable seed generated color scheme, this also works if you defined your colors
  // with the `colors` property instead of `scheme`.
  keyColors: const FlexKeyColors(
    // Used `scheme` or `colors`, primary color is always used as key color to seed
    // generate the `ColorScheme` below we also use secondary and tertiary colors as
    // input to the seed generation.
    useSecondary: true,
    useTertiary: true,
    // Keep the primary, secondary and tertiary as defined in scheme/colors, but 
    // use them as key seeds for each palette. This is only a good idea if the
    // used colors are designed to be used for the active theme mode light or dark.
    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,
  ),
  // This defines the strategy of the used M3 color scheme seeding algorithm.
  // It impact how colorful, bright, pastel-like or matte the produced colors are
  // It also controls how M3 surface tint is made and which tonal palette tone
  // is mapped to which `ColorScheme` color. It comes with a large number of premade
  // configs, feel free to try them, but you can also make your own setups with the API.
  //
  // Seed generated color schemes includes their own M3 take on surface tint and blends. If
  // you also use `surfaceMode` and `blendLevel` they are added on top of what the seed 
  // generated M3 `ColorScheme` already added and it might become a bit too much.
  // If so, reduce the `blendLevel` value, if set to `0` you get the result as produced 
  // by the seed generation. Different M3 tone strategies have different surface tint, like
  // using more or less `blendLevel`.
  tones: FlexTones.candyPop(Brightness.light),
  useMaterial3: true,
),

Well anyway, I guess that is enough for now. No worries, I'll keep providing guidance until it clicks. One next step would be to show you some examples using your code. If it is still open source I can certainly do that. 😄 🙏🏻

[bksubhuti]

okay.. I understand a little more. I wanted to play with it and see how it looked "hardcoding it to the app bar". I plan on making custom themes like you showed in an example. I'll let you know when that happens. At least I understand what it looks like and can go from there.

I think early on.. when we first worked on this.. we didn't have that "flex" .. and that is why you made coloredText for me.
I'll look into the custom themes and maybe even faking a material2 as you said .
I'm not so smart.. but I think I can make it work as you say. The flex themes have been looking good and seeing people customize their app with the provided color themes gives me much joy because they they make the app "their own" when they change the default colors. So many merit to share with you on this application. I'll try tomorrow and then close the issue.

[rydmike]

You can hard code the color into the example AppBar by giving it e.g. these colors:

backgroundColor: Theme.of(context).colorScheme.primary,
foregroundColor: Theme.of(context).colorScheme.surface, // or alt try `onPrimary`.

It is not themed globally then, but the AppBar in question will depend on those theme colors and will change with the theme light/dark and alternative user selectable theme options you might be offering, as those themes colorScheme changes. So from that point of view, it will use app theme colors, but it will not be themed to by default used those colors. Which I recommend to do, if you always want a certain given same style on all AppBar:s in the app.

If some or one AppBar needs to be different from the global desired/designed theme, then the above will still work as an override for that specific AppBar.

---

Themes Playground

https://rydmike.com/flexcolorscheme/themesplayground-latest/

You can put your custom colors into the Themes Playground too. You don't have to, but you can if you want see them there and experiment with them. Then you can configure and style everything else too the way you want it to look visually in the Playground.

If set the view to show the code on right side, and select a panel where you modify some aspects, you can observe what code it adds/changes for each operation, a nice way to learn the API, if so desired.

Themes Playground will generate the needed theme code, when you are done, you can copy-paste that code and only use the parts are new/different from your current FCS theme setup.

A simple way to learn more about using Themes Playground to configure FlexColorScheme API is to study recent Tweet thread guides that you can easily find here: https://docs.flexcolorscheme.com/tweets

Starting e.g. with version 7.0 guide, click on the embedded tweet link: https://docs.flexcolorscheme.com/tweets#version-7
(Version 5 and 6.1 tweet threads also contain still valid and useful principle and background information, but the app looked a bit different back then).

And version 7.2 https://docs.flexcolorscheme.com/tweets#version-72

There are also some guides, like understanding ColorScheme
https://docs.flexcolorscheme.com/tweets#colorscheme-guide

A long theme story examples, with videos:
https://docs.flexcolorscheme.com/tweets#a-theme-story

A platform agnostic theme example (screenshots):
https://docs.flexcolorscheme.com/tweets#platform-agnostic-theme

[bksubhuti]

yes.. our code is FOSS except where data liimits.
https://github.com/bksubhuti/tipitaka-pali-reader
Some things are broken though. I'm not sure if it will compile and need a .env file in the root for firebase.
FIREBASE_API_KEY=
There is also a db that needs to be downloaded listed in the readme file. then run split bash.
But that can be removed and remove the sign in code.
Perhaps you know how to read the flex code anyway without building.

I'd like to have some custom theme colors (especially the fun monk and nun names) and use the nonstandard material 3 appbar with a hybrid of appbar but it matching the pastel stuff. like this Theme.of(context).primaryColorLight, or the same as the floating action button. Something that sort of matches.
However, I have put this on the shelf for the next 16 days because of big exams coming up.
Please keep this open.

We have a flexdata file in our data folder. I'm not sure how it works.
I'll have to look at this after oct 28th. I thought it would be quicker.. but not for my level.

[bksubhuti]

okay.. i don't think i'll be able to sleep until this is finished.. haha..
So where do I put the code to make modify the theme that I think I can make?
https://github.com/bksubhuti/tipitaka-pali-reader/blob/master/lib/data/flex_theme_data.dart

One of the developers seems to have made a theme for orange 2 (or maybe it is yours..?). There is another toledo purple. I guess if you give me one theme that has a a color and a lighter version for the appbar, then I can duplicate it.

But if I make the appbar color red in the theme.. it does not show up..
class MyThemes {
static const orange2Name = 'Orange 2';
static const FlexSchemeColor myScheme1Dark = FlexSchemeColor(
primary: Color(0xFF9E7389),
primaryContainer: Color(0xFF775C69),
secondary: Color(0xFF738F81),
secondaryContainer: Color(0xFF5C7267),
// Again we use same secondaryVariant color as optional custom app bar color.
appBarColor: Color(0xFF5C7267),
);

static const FlexSchemeColor myScheme1Light = FlexSchemeColor(
primary: Color(0xFF4E0028),
primaryContainer: Color(0xFF320019),
secondary: Color(0xFF003419),
secondaryContainer: Color(0xFF002411),
// The built in schemes use their secondary variant color as their
// custom app bar color, it could of course be any color, but for consistency
// we will do the same in this custom FlexSchemeColor.
appBarColor: Colors.red,
);
}

I don't understand much of this file which is located here. it seems like there are many steps to this.

[bksubhuti]

I created more themes with my names.. but I still don't understand the subtheme way to make an appbar appear.
I see there is a playground output code.. section.. this is far more complex than I need. But.. I want to set it for each custom theme.. not globally. I'll fix the colors later.. I was just playing to make names.

The Theme change notifier code is here. I'd also like to make a switch for useMaterial3 as well.. based off of my hacky Prefs.useMaterial3 sort of global variable on user prefs.

//returns // flexschemedata
  get darkTheme => FlexColorScheme.dark(
        // As scheme colors we use the one from our list
        // pointed to by the current themeIndex.
        colors: myFlexSchemes[Prefs.themeIndex].dark,
        // Medium strength surface branding used in this example.
        surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        textTheme: _textTheme,
        useMaterial3: true,
      ).toTheme;

  ThemeData get themeData =>
      //ThemeData get themeData=>  myFlexSchemes[Prefs.themeIndex].light().toTheme();
      FlexColorScheme.light(
        // As scheme colors we use the one from our list
        // pointed to by the current themeIndex.
        useMaterial3: true,
        colors: myFlexSchemes[Prefs.themeIndex].light,
        // Medium strength surface branding used in this example.
        surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        textTheme: _textTheme,
      ).toTheme;

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

FlexSchemeColor myFlexColorLight = FlexSchemeColor.from(
  primary: Colors.brown,
);

/*
const FlexSchemeColor myScheme1Light = FlexSchemeColor(
  primary: Color(0xFF4E0028),
  primaryVariant: Color(0xFF320019),
  secondary: Color(0xFF003419),
  secondaryVariant: Color(0xFF002411),
  // The built in schemes use their secondary variant color as their
  // custom app bar color, it could of course be any color, but for consistency
  // we will do the same in this custom FlexSchemeColor.
  appBarColor: Color(0xFF002411),
);

const FlexSchemeColor myScheme1Dark = FlexSchemeColor(
  primary: Color(0xFF9E7389),
  primaryVariant: Color(0xFF775C69),
  secondary: Color(0xFF738F81),
  secondaryVariant: Color(0xFF5C7267),
  // Again we use same secondaryVariant color as optional custom app bar color.
  appBarColor: Color(0xFF5C7267),
);

*/

class MyThemes {
  static const orange2Name = 'Orange 2';
  static const FlexSchemeColor myScheme1Dark = FlexSchemeColor(
    primary: Color(0xFF9E7389),
    primaryContainer: Color(0xFF775C69),
    secondary: Color(0xFF738F81),
    secondaryContainer: Color(0xFF5C7267),
    // Again we use same secondaryVariant color as optional custom app bar color.
    appBarColor: Color(0xFF5C7267),
  );

  static const FlexSchemeColor myScheme1Light = FlexSchemeColor(
    primary: Color(0xFF4E0028),
    primaryContainer: Color(0xFF320019),
    secondary: Color(0xFF003419),
    secondaryContainer: Color(0xFF002411),
    // The built in schemes use their secondary variant color as their
    // custom app bar color, it could of course be any color, but for consistency
    // we will do the same in this custom FlexSchemeColor.
    appBarColor: Color(0xFF002411),
  );
}

// Create a custom flex scheme color for a light theme.
const FlexSchemeColor myScheme1Light = FlexSchemeColor(
  primary: Color(0xFF4E0028),
  primaryContainer: Color(0xFF320019),
  secondary: Color(0xFF003419),
  secondaryContainer: Color(0xFF002411),
  // The built in schemes use their secondary variant color as their
  // custom app bar color, it could of course be any color, but for consistency
  // we will do the same in this custom FlexSchemeColor.
  appBarColor: Color(0xFF002411),
);
// Create a corresponding custom flex scheme color for a dark theme.
const FlexSchemeColor myScheme1Dark = FlexSchemeColor(
  primary: Color(0xFF9E7389),
  primaryContainer: Color(0xFF775C69),
  secondary: Color(0xFF738F81),
  secondaryContainer: Color(0xFF5C7267),
  // Again we use same secondaryVariant color as optional custom app bar color.
  appBarColor: Color(0xFF5C7267),
);

// You can build a scheme the long way, by specifying all the required hand
// picked scheme colors, like above, or can also build schemes from a
// single primary color. With the [.from] factory, then the only required color
// is the primary color, the other colors will be computed. You can optionally
// also provide the primaryVariant, secondary and secondaryVariant colors with
// the factory, but any color that is not provided will always be computed for
// the full set of required colors in a FlexSchemeColor.

// In this example we create our 2nd scheme from just a primary color
// for the light and dark schemes. The custom app bar color will in this case
// also receive the same color value as the one that is computed for
// secondaryVariant color, this is the default with the [from] factory.
final FlexSchemeColor myScheme2Light =
    FlexSchemeColor.from(primary: const Color(0xFF4C4E06));
final FlexSchemeColor myScheme2Dark =
    FlexSchemeColor.from(primary: const Color(0xFF9D9E76));

// For our 3rd custom scheme we will define primary and secondary colors, but no
// variant colors, we will not make any dark scheme definitions either.
final FlexSchemeColor myScheme3Light = FlexSchemeColor.from(
  primary: const Color(0xFF993200),
  secondary: const Color(0xFF1B5C62),
);

// Create a list with all color schemes we will use, starting with all
// the built-in ones and then adding our custom ones at the end.
final List<FlexSchemeData> myFlexSchemes = <FlexSchemeData>[
  // Use the built in FlexColor schemes, but exclude the placeholder for custom
  // scheme, a selection that would typically be used to compose a theme
  // interactively in the app using a color picker, we won't be doing that in
  // this example.
  ...FlexColor.schemesList,
  // Then add our first custom FlexSchemeData to the list, we give it a name
  // and description too.
  const FlexSchemeData(
    name: 'Toledo purple',
    description: 'Purple theme, created from full custom defined color scheme.',
    // FlexSchemeData holds separate defined color schemes for light and
    // matching dark theme colors. Dark theme colors need to be much less
    // saturated than light theme. Using the same colors in light and dark
    // theme modes does not look nice.
    light: myScheme1Light,
    dark: myScheme1Dark,
  ),
  // Do the same for our second custom scheme.
  FlexSchemeData(
    name: 'Olive green',
    description:
        'Olive green theme, created from primary light and dark colors.',
    light: myScheme2Light,
    dark: myScheme2Dark,
  ),
  // We also do the same for our 3rd custom scheme, BUT we create its matching
  // dark colors, from the light FlexSchemeColor with the toDark method.
  FlexSchemeData(
    name: 'Oregon orange',
    description: 'Custom orange and blue theme, from only light scheme colors.',
    light: myScheme3Light,
    // We create the dark desaturated colors from the light scheme.
    dark: myScheme3Light.toDark(),
  ),
  const FlexSchemeData(
    name: MyThemes.orange2Name,
    description: FlexColor.mangoDescription,
    light: FlexSchemeColor(
      primary: FlexColor.mangoLightPrimary,
      primaryContainer: FlexColor.mangoLightPrimaryContainer,
      secondary: FlexColor.mangoLightSecondary,
      secondaryContainer: FlexColor.mangoLightSecondaryContainer,
      tertiary: FlexColor.mangoLightTertiary,
      tertiaryContainer: FlexColor.mangoLightTertiaryContainer,
      appBarColor: FlexColor.mangoLightTertiary,
      error: FlexColor.materialLightError,
      swapOnMaterial3: true,
    ),
    dark: FlexSchemeColor(
      primary: FlexColor.mangoDarkPrimary,
      primaryContainer: FlexColor.mangoDarkPrimaryContainer,
      secondary: FlexColor.mangoDarkSecondary,
      secondaryContainer: FlexColor.mangoDarkSecondaryContainer,
      tertiary: FlexColor.mangoDarkTertiary,
      tertiaryContainer: FlexColor.mangoDarkTertiaryContainer,
      appBarColor: FlexColor.mangoDarkTertiary,
      error: FlexColor.materialDarkError,
      swapOnMaterial3: true,
    ),
  ),
  const FlexSchemeData(
    name: 'Mahayana blue',
    description: 'Mahayana Blue Color grey blue',
    light: FlexSchemeColor(
      primary: Color(0xFF00296B),
      primaryContainer: Color(0xFFA0C2ED),
      secondary: Color(0xFFD26900),
      secondaryContainer: Color(0xFFFFD270),
      tertiary: Color(0xFF5C5C95),
      tertiaryContainer: Color(0xFFC8DBF8),
    ),
    dark: FlexSchemeColor(
      primary: Color(0xFFB1CFF5),
      primaryContainer: Color(0xFF3873BA),
      secondary: Color(0xFFFFD270),
      secondaryContainer: Color(0xFFD26900),
      tertiary: Color(0xFFC9CBFC),
      tertiaryContainer: Color(0xFF535393),
    ),
  ),
  const FlexSchemeData(
    name: 'Pa-Auk Burgundy',
    description: 'Paauka Color Burgundy',
    light: FlexSchemeColor(
      primary: Color.fromARGB(255, 61, 10, 41),
      secondary: Color(0xFFD26900),
      swapOnMaterial3: true,
      appBarColor: FlexColor.mangoDarkTertiary,
    ),
    dark: FlexSchemeColor(
      primary: Color.fromARGB(255, 61, 10, 41),
      secondary: Color(0xFFD26900),
      swapOnMaterial3: true,
      appBarColor: FlexColor.mangoDarkTertiary,
    ),
  ),
  const FlexSchemeData(
    name: 'Sayalay Pink',
    description: 'Pink Color of Nun',
    light: FlexSchemeColor(
      primary: Color.fromARGB(255, 209, 158, 190),
      secondary: Color.fromARGB(255, 72, 49, 69),
    ),
    dark: FlexSchemeColor(
      primary: Color.fromARGB(255, 209, 158, 190),
      secondary: Color.fromARGB(255, 72, 49, 69),
    ),
  ),
];

[rydmike]

Yes FlexColorScheme (FCS) contains many different APIs to adjust things, it can certainly be confusing. But no worries, lets look at what seems to be relevant for your use case.

Since you are using the colors API, and a list of them, we have good option via it. This is btw a very good and simple way to define key custom colors and color theme options that users can choose from, nicely done! 😄

So let's take a look how to develop it a bit. You have this:

FlexColorScheme.light(
  // As scheme colors we use the one from our list
  // pointed to by the current themeIndex.
  colors: myFlexSchemes[Prefs.themeIndex].light,
  // Medium strength surface branding used in this example.
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
).toTheme;

And since I see that a lot of your colors definitions contain custom appBarColor values, then to use that as your active AppBar color, all you need to do is to tell FlexColorScheme to use that custom color for the AppBarTheme it will make. This is done with the appBarStyle property.

FlexColorScheme.light(
  // As scheme colors we use the one from our list
  // pointed to by the current themeIndex.
  colors: myFlexSchemes[Prefs.themeIndex].light,
  // Use the custom color for app bar define in `FlexSchemeData.appBarColor` as
  // themed color of the AppBar.
  appBarStyle: FlexAppBarStyle.custom,
  // Medium strength surface branding used in this example.
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
).toTheme;

The appBarStyle enum is intended to work as quick toggle between a few popular options. It also offers the possibility to make it an option that is easy to offer as a user configurable selection as well, like it the Theme Playground. Or to just select your preferred fixed selection.

If you have not set the appBarStyle value to anything, the Material mode defaults are used. In Material 2 that means AppBar will be Theme.of(context).colorScheme.primary colored in light mode and M2 default surface color (#121212) in dark mode. In Material 3 mode the AppBar color will become Theme.of(context).colorScheme.surface colored.

If the colors property in FlexColorScheme or FlexThemeData uses a FlexSchemeColor that does not define a color for appBarColor, then it will be equal to the FlexSchemeColor.tertiary color, and if FlexSchemeColor did not define a FlexSchemeColor.tertiary color, a color based on FlexSchemeColor.secondary is used, and if it is not defined a color based on FlexSchemeColor.primary.

Always using and defining an appBarColor in FlexSchemeColor for both light and dark themes, in the colors property in FlexColorScheme or FlexThemeData, and setting appBarStyle to FlexAppBarStyle.custom is a simple and good way of customizing the themed AppBar color to any desired color for both light and dark mode individually.

Optional more ThemeData looking API FlexThemeData

When I talk about FlexThemeData it is just an alternative newer API (already very old too) that makes e.g `FlexColorScheme.light(...).toTheme look a bit nicer and familiar to Flutter devs. You could replace the above with:

FlexThemeData.light(
  // As scheme colors we use the one from our list
  // pointed to by the current themeIndex.
  colors: myFlexSchemes[Prefs.themeIndex].light,
  // Use the custom color for the app bar defined in `FlexSchemeData.appBarColor` as
  // the themed color of the AppBar.
  appBarStyle: FlexAppBarStyle.custom,
  // Medium strength surface branding used in this example.
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
);

To make it look more "Flutter" like.

Using Themes Playground

Above you are using surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,, but since you have not defined any blendLevel it is actually not doing anything, since blendLevel defaults to zero. So it is not really needed in the config.

Too see and understand what blend level does, you can use Themes Playground, to modify it and see what happens and find a setting you like by looking at the API code it makes.

You can copy or just enter a single property you like, to your theme setup, no need to go all in and copy/paste everything, you can just use it to experiment and find new styles you like and add them as needed. This is what I meant with using the Themes Playground to learn how to utilize FlexColorScheme better.

Here is an example with the blendLevel:

Screen.Recording.2023-10-14.at.16.47.17.mov

You can even offer it a user configurable option if you want to 😄

Using sub themes with FlexColorScheme

Using sub-themes with FlexColorScheme or FlexThemeData is needed to customize all the components (Flutter Material UI widget) individually. Things like their ColorScheme depending colors, their corner border radius, elevations and a number of other key design features. You can customize the look of you app extensively by using component themes.

FAB example

Say you like the FloatingActionButton to always be circular, like it was in M2 by default, you can do this in M3 or actually regardless of M2/M3 mode by giving it a custom style:

Screen.Recording.2023-10-14.at.16.53.00.mov

Text field example

Maybe you want to customize the input decorator on the TextField to use primary with opacity and more rounded corners, like it was when using FCS in M2 mode also in M3 mode?
You can do that and many more adjustments to the text input style.

Screen.Recording.2023-10-14.at.16.59.36.mov

Seeded Material3 ColorScheme

To get the most out of Material-3 styling, I do recommend using a ColorScheme generated and computed by the Material 3 color system tools. FlexColorScheme offers that out of the box, with a lot more configuration options and flexibility than vanilla Flutter theming and ColorScheme does.

If you do not enable it, FlexColorScheme will still in M3 mode make color schemes that are highly compatible with Material 3 color system, using your custom colors as input and computing suitable colors for ColorScheme colors based on them. This is done for colors that did not exist in Material2 ColorScheme. But you get much better M3 color system fidelity if you enable seeded ColorScheme. For example in light mode like this:

Screen.Recording.2023-10-14.at.17.23.09.mov

So something like this for your example:

FlexThemeData.light(
  // As scheme colors we use the one from our list
  // pointed to by the current themeIndex.
  colors: myFlexSchemes[Prefs.themeIndex].light,
  // Use the custom color for the app bar defined in `FlexSchemeData.appBarColor` as
  // the themed color of the AppBar.
  appBarStyle: FlexAppBarStyle.custom,
  // Medium strength surface branding used in this example.
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 4,
  appBarStyle: FlexAppBarStyle.primary,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 10,
    inputDecoratorSchemeColor: SchemeColor.primary,
    inputDecoratorBackgroundAlpha: 16,
    inputDecoratorRadius: 12.0,
    fabUseShape: true,
    fabAlwaysCircular: true,
  ),
  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
);

In dark mode you could try just this:

FlexThemeData.dark(
  // As scheme colors we use the one from our list
  // pointed to by the current themeIndex.
  colors: myFlexSchemes[Prefs.themeIndex].dark,
  // Use the custom color for the app bar defined in `FlexSchemeData.appBarColor` as
  // the themed color of the AppBar.
  appBarStyle: FlexAppBarStyle.custom,
  // Medium strength surface branding used in this example.
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 10,
  appBarStyle: FlexAppBarStyle.primary,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 15,
    inputDecoratorSchemeColor: SchemeColor.primary,
    inputDecoratorBackgroundAlpha: 38,
    inputDecoratorRadius: 12.0,
    fabUseShape: true,
    fabAlwaysCircular: true,
  ),
  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
  ),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
);

Using a bit differently tuned blend levels and alpha in dark mode, and also removing:

    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,

However if you in your colors have very good custom dark colors defined for primary, secondary and/or tertiary for all your offered color schemes, you can certainly use the keep option to get those color instead of the seed generated one for those particular colors.

You can also experiment and try different color scheme seed generation strategies with tones. If not defined, the Material3 default one is used, but FlexColorScheme offers many additional useful options.

For example tones: FlexTones.ultraContrast(Brightness.light), can be used to make themes with more contrast, especially in dark mode. The seed generation will always use your colors as input, but the different seed generation option can change the mood of the color theme or be used as an accessibility feature.

You can even make your own custom FlexTones with the API.

Material 3

Personally I don't think it is good idea to offer a toggle between Material-2 (legacy) and Material-3 anymore. In next version of Flutter, Material-3 will be default when you create ThemeData, to opt out of Material-3, you will have to set useMaterial3: false explicitly.

Material-2 mode will also be deprecated, and when that happens, maybe a year after it is deprecated, Material-2 mode support will be removed from Flutter completely.

Material-3 theming in Flutter is however very powerful and offers a lot more customizing capabilities than Material-2 mode ever did. You can in fact make Material-3 to look like Material-2 by customizing the theme of all Widgets in Material-3 mode. This is in fact available as a pre-built theming example in Themes Playground among several others:

Screen.Recording.2023-10-14.at.17.42.02.mov

The premade design are just examples that one can study to see how it is done, or use as staring points for own design. 😄

[bksubhuti]

Wow.. I'm very impressed.. I'm starting to digest and understand the playground and the app data. and the FlexThemeData.light()
Before, I was just cutting and pasting.. take note.. I made the appbar color red, so I would know it was working or not. Obviously an eyesore. Through your discussions. I think I need to do this globally according to our current code and the theme selector.
Although I think I have plenty of time to do m2 switch and get away with it.. so that the users can feel comfortable, Your fake m2 will do the trick. Your embedded videos work really well for me.
I have noticed that if I do end up with a appbar, which I can do, the colors for the writing and focus get out of wack and contrast to read is lost. I guess I had to get to this stage to understand that.
Changing this and that to make it work will be too much trouble.
Therefore.. through this conversation.. I think it is best to stay standard, and have an m2 switch (fakestyle), .
I guess I either need to swap the switch with the subtheme or just swap out the whole light class with the prefs.them

So this code below works..
(The code output had scheme.. and I replaced with colors which worked).
So all I need to do is return this, or the standard one based on the switch and my problem is solved.
Then the users can double the theme choices. Your help was much appreciated.
This works as I would like. I also know how to have a mix version by making m3 with a subtheme with a mostly transparent appbar.

So.. I think you can close the issue.. the code below works for me after I make a switch.

 ThemeData get themeData {
    if (Prefs.useM3) {
      return FlexColorScheme.light(
        // As scheme colors we use the one from our list
        // pointed to by the current themeIndex.
        useMaterial3: true,
        colors: myFlexSchemes[Prefs.themeIndex].light,
        // Medium strength surface branding used in this example.
        surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        textTheme: _textTheme,
      ).toTheme;
    } else {
      return
          //ThemeData get themeData=>  myFlexSchemes[Prefs.themeIndex].light().toTheme();
          FlexThemeData.light(
        colors: myFlexSchemes[Prefs.themeIndex].light,
        appBarStyle: FlexAppBarStyle.primary,
        appBarElevation: 4.0,
        bottomAppBarElevation: 8.0,
        tabBarStyle: FlexTabBarStyle.forAppBar,
        subThemesData: const FlexSubThemesData(
          interactionEffects: false,
          tintedDisabledControls: false,
          blendOnColors: false,
          useTextTheme: true,
          useM2StyleDividerInM3: true,
          adaptiveRemoveElevationTint: FlexAdaptive.all(),
          adaptiveElevationShadowsBack: FlexAdaptive.all(),
          adaptiveAppBarScrollUnderOff: FlexAdaptive.all(),
          defaultRadius: 4.0,
          elevatedButtonSchemeColor: SchemeColor.onPrimary,
          elevatedButtonSecondarySchemeColor: SchemeColor.primary,
          inputDecoratorSchemeColor: SchemeColor.onSurface,
          inputDecoratorBackgroundAlpha: 13,
          inputDecoratorBorderSchemeColor: SchemeColor.primary,
          inputDecoratorUnfocusedBorderIsColored: false,
          fabUseShape: true,
          fabAlwaysCircular: true,
          chipSchemeColor: SchemeColor.primary,
          chipRadius: 20.0,
          popupMenuElevation: 8.0,
          alignedDropdown: true,
          tooltipRadius: 4,
          dialogElevation: 24.0,
          useInputDecoratorThemeInDialogs: true,
          datePickerHeaderBackgroundSchemeColor: SchemeColor.primary,
          snackBarBackgroundSchemeColor: SchemeColor.inverseSurface,
          appBarScrolledUnderElevation: 4.0,
          tabBarIndicatorSize: TabBarIndicatorSize.tab,
          tabBarIndicatorWeight: 2,
          tabBarIndicatorTopRadius: 0,
          tabBarDividerColor: Color(0x00000000),
          drawerElevation: 16.0,
          drawerWidth: 304.0,
          bottomSheetElevation: 10.0,
          bottomSheetModalElevation: 20.0,
          bottomNavigationBarSelectedLabelSchemeColor: SchemeColor.primary,
          bottomNavigationBarSelectedIconSchemeColor: SchemeColor.primary,
          bottomNavigationBarElevation: 8.0,
          menuElevation: 8.0,
          menuBarRadius: 0.0,
          menuBarElevation: 1.0,
          navigationBarSelectedLabelSchemeColor: SchemeColor.onSurface,
          navigationBarUnselectedLabelSchemeColor: SchemeColor.onSurface,
          navigationBarSelectedIconSchemeColor: SchemeColor.onSurface,
          navigationBarUnselectedIconSchemeColor: SchemeColor.onSurface,
          navigationBarIndicatorSchemeColor: SchemeColor.secondary,
          navigationBarBackgroundSchemeColor: SchemeColor.surfaceVariant,
          navigationBarElevation: 0.0,
          navigationRailSelectedLabelSchemeColor: SchemeColor.onSurface,
          navigationRailUnselectedLabelSchemeColor: SchemeColor.onSurface,
          navigationRailSelectedIconSchemeColor: SchemeColor.onSurface,
          navigationRailUnselectedIconSchemeColor: SchemeColor.onSurface,
          navigationRailIndicatorSchemeColor: SchemeColor.secondary,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        useMaterial3: true,
        // To use the Playground font, add GoogleFonts package and uncomment
        // fontFamily: GoogleFonts.notoSans().fontFamily,
      );
    }
  }

[bksubhuti]

If you are in Sri Lanka or near it .. give a buzz.. my username is my google email. If you google our app you will find my website too. americanmonkDOTorg, I love your dedication for your theme and helping others. Your theme will be even more popular with this future m3 enforcement. We are a study monastery in elephant land and a hot climate. I have spent half my time in myanmar and Sri lanka if you need travel advice. We always have extra food.. you can stop by for lunch if I'm there or not. (but let me know first).

[rydmike]

Happy if you are learning more about theming and are now able to get the result you want. 😄 🙏🏻

You don't need to go all in on using the Material3 made Material2 style, just to get the AppBar color fixed to be as it was before, as shown in other examples. Of course to know how to make what you had before I would need to try it in M2 and M3 mode, but correct appBarStyle selection in light and dark mode should be able to fix to be same as before.

Basically setting appBarStyle to FlexAppBarStyle.primary in light mode and FlexAppBarStyle.surface in dark mode, should be what you had before, since you had not customized it. The appBarColor in FlexSchemeData does not matter if you never used appBarStyle set to FlexAppBarStyle.custom.

Also do note that "Material2" look alike style made by FCS built in sample, is not the same as as the FCS Material2 defaults you had before. The example is more of default standard Material2 style. The old FCS default for Material2 contained a number of opinionated own custom defaults, so you will see a lot of differences if you use that.

It is possible to configure Material3 mode to be like previous FCS M2 defaults, but there is no preconfigured example for it. The examples I added above should actually already be closer to what you had before than the full "native" old Material2 default design. What you might need to add is custom FAB color, since it defaults to primaryContainer in M3 but to secondary in M2. Many small detail changes like that. Buttons also have new default color mappings in M3. But as said you can change all of this to be whatever you want, just use Themes Playground to observer the difference, and copy just the single config line to get what you want, no need to learn the API when doing that.

By the way, I'm not sure what you meant with:

"I have noticed that if I do end up with a AppBar, which I can do, the colors for the writing and focus get out of wack and contrast to read is lost."

It is not something that I have observed when using FlexColorScheme. I have not tried building your app, so I have not looked at its details recently.

[rydmike]

I'm going to close this issue, and move it to be preserved just as discussion in the FAQ section, where others can find it and learn from it too. We can continue the discussion there! 😄

[bksubhuti]

You can see that the top nav bar is black in M3 mode. However, merely changing the appbar color will give a dark color on black writing. (pali, aṭṭhakatha, ṭīka, añña) Furthermore, the selected itme disappears totally. I think you can "visualize" what problem I had by just changing the app bar style which also affects this screen. So that was when I just decided to have the standard kept. I might also have a "light" and "transparent" appbarstyle.custom option as well.. that works.

[rydmike]

Hi again @bksubhuti 😄

Sorry, I can't really see what you mean from the screen shot above, it looks incomplete.

Perhaps you are referring to the AppBar not having foreground and background colors that makes the foreground text and items on it legible?

If you are setting AppBar colors and theming it with FSC, it will set the foreground color to a good default contrast color by design for the selected and used background color. This is not automatic in Flutter, FCS is just designed to do that correctly for you behind the scenes.

However, if you are setting AppBar colors yourself manually on AppBar widget level, you will need to set both foreground and background color, to colors with good contrast compared to each other. This is mentioned at the start of this comment: #199 (comment). It is just how Flutter works.

There are so many examples of what you can do already with AppBar, and you can do any color design you want on it. I'm not sure I can describe it in much more detail than what has already been said. Please study the replies and go through the details in them, maybe you missed some parts in them.

---

What I can do is of course, is if you tell me or even better show me exactly how you want it too look and what colors you want where, with one concrete example, I can show you how to make that one example. At the moment I think I have already done so many times, but I am not sure you have tried them correctly.

Recommended Theme Code Example

Based on what I think you had before when using FCS in M2 mode, something like this for your app may work well for light mode when using Material-3 and keep the app looking close to what it did like before in FCS Material-2:

FlexThemeData.light(
  colors: myFlexSchemes[Prefs.themeIndex].light,
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 1,
  appBarStyle: FlexAppBarStyle.primary,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 10,
    blendOnColors: false,
    useTextTheme: true,
    useM2StyleDividerInM3: true,
    elevatedButtonSchemeColor: SchemeColor.onPrimaryContainer,
    elevatedButtonSecondarySchemeColor: SchemeColor.primaryContainer,
    inputDecoratorSchemeColor: SchemeColor.primary,
    inputDecoratorBackgroundAlpha: 23,
    inputDecoratorRadius: 10.0,
    fabUseShape: true,
    fabAlwaysCircular: true,
    fabSchemeColor: SchemeColor.secondary,
    alignedDropdown: true,
    useInputDecoratorThemeInDialogs: true,
    appBarScrolledUnderElevation: 0.0,
  ),
  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,
  ),
  tones: FlexTones.candyPop(Brightness.light),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
);

In dark mode you could try the one below. The colors will be a bit different than what you had in FCS M2 mode, but they should look OK.

FlexThemeData.dark(
  colors: myFlexSchemes[Prefs.themeIndex].dark,
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 2,
  subThemesData: const FlexSubThemesData(
    blendOnLevel: 20,
    useTextTheme: true,
    useM2StyleDividerInM3: true,
    elevatedButtonSchemeColor: SchemeColor.onPrimaryContainer,
    elevatedButtonSecondarySchemeColor: SchemeColor.primaryContainer,
    inputDecoratorSchemeColor: SchemeColor.primary,
    inputDecoratorBackgroundAlpha: 28,
    inputDecoratorRadius: 10.0,
    fabUseShape: true,
    fabAlwaysCircular: true,
    fabSchemeColor: SchemeColor.secondary,
    alignedDropdown: true,
    useInputDecoratorThemeInDialogs: true,
  ),
  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
  ),
  tones: FlexTones.candyPop(Brightness.dark),
  visualDensity: FlexColorScheme.comfortablePlatformDensity,
  textTheme: _textTheme,
  useMaterial3: true,
);

The above are both using seed generated M3 ColorScheme to make it work and look better in Material-3 mode. It works with your colors as input too. As mentioned in previous comments, if you have custom designed dark mode colors, you can indeed lock them down too, to their defined values, by using this instead for keyColors:

  keyColors: const FlexKeyColors(
    useSecondary: true,
    useTertiary: true,
    keepPrimary: true,
    keepSecondary: true,
    keepTertiary: true,
  ),

Further below, I show how to make the above definitions in Themes Playground, most of it anyway:

Material 3

As I tried to explain, the color system and color defaults between Material2 and Material3 are completely different.

Developers making Google Material-3 design using app should basically study and read this entire site: https://m3.material.io/.

Of course, the look used in theM3 design guide, is the pure "M3" design. When you design your own Material-3 mode using app in Flutter, you don't have to stick with these defaults. You can change and customize them to look as you want them to look. Themes Playground can be used to customize a lot of features, but no everything, something have to be added with its API or using copyWith on the produced ThemeData to modify it even further if so desired, but for most common uses cases it is often enough.

In Material-3 shapes are also very different from M2. However, since you have used FCS M2 custom design defaults before, many shapes are the same in M3 as it was in FCS opinionated defaults for M2, since its custom M2 design tried to emulate M3 shape design, way before M3 was public and ready to be used in Flutter.

We can use Themes Playground to demonstrate this:

Using e.g. the built in Rosewood color theme scheme: FlexScheme.rosewood, as an example:

It will look like this in FCS when using Material 2 mode

FCS Light M2	FCS Dark M2

The FCS defaults are quite different from "raw" real Material-2 design, which would look more like this:

Vanilla Light M2	Vanilla Dark M2

When you enable Material-3 and do not seed generate the color scheme, but use it as it was defined for M2 mode, the demo app will look like this:

Light M3	Dark M3

When you enable Material3 based seed generation the ColorScheme will change to this, using only the primary color as seed color and the M3 color algo:

The demo app using these colors will look like this:

Light M3	Dark M2

You can change it to use, also secondary and tertiary input colors (your custom colors) as seed inputs, and lock the seed colors down to be used for their namesake colors. You can also use a seed generation strategy the makes more colorful colors that default M3, e.g. Candy pop, but feel free to try others:

If you do this, the demo app will look like this:

Light M3	Dark M2

FAB

After this, more things you may want to do is set the shape of FAB back to circular, and tell it to use secondary color as it did in M2:

TextField

Also the TextField was much rounder before in FCS M2, you might want that back in your M3 styled app:

You will need to set the fill color and opacity separately for dark mode.

Buttons

Buttons have new color mapping, basically the FilledButton is more like what ElevatedButton used to look like in M2. maybe use it instead for same style and give ElevatedButton a bit more prominent style, or keep as is:

AppBar

Then AppBar, if you want primary color in M3 mode on it in light mode, then set it here:

To not get any scroll under elevation tint, keep both scroll under elevation and elevation at 0.

You will need to define your dark mode AppBar separately, here I don't know what you want, but I recommend keeping defaults, which is dark surface color, and also keeping the default scroll under elevation tint. It is very useful when using a dark AppBar background in dark mode. It is also very useful, when keeping a light AppBar in light mode, but if you go with primary color there, then removing it is appropriate.

Result

Doing all this will make the demo app look like this:

Light M3	Dark M2

This is just one example of customizations you can do. You can experiment with Themes Playground and copy code from it.

Just remove the scheme or colors it has defined in its code and keep your own custom colors (colors: myFlexSchemes[Prefs.themeIndex].light/dark,) and copy everything else to get the same design. Or just copy a single changed property to your theme defs.

The theme setup code presented earlier above, contain all the above customization, but uses your colors.

---

More M3 AppBar

In pure Material-3 design the AppBar is intended to be background colored (colorScheme.surface color), and it changes color slightly when you scroll things under it to create a separation between the background and the AppBar. The surface colored AppBar is inspired from modern iOS design and the slight scroll under tint is a M3 addition.

This is an example of what that looks like:

Screen.Recording.2023-10-15.at.20.29.38.mov

You can read about it in the Google Material3 guide here:
https://m3.material.io/components/top-app-bar/guidelines#4eab4f50-4a3e-4189-bce2-a46514cde1da

[bksubhuti]

You have made more information available.. I appreciate it.
Actually .. i think i was quick to say, "It is okay to close the issue." I didn't actually switch theme colors and switch back in real-time.. my switching was done just in proof of concept mode and called for a "restart" each time.

So when I plugged in the prefs and a switch.. The screen with the switch would work, but it would close the screen and move to home..(which I didn't notice at first) the themedata and theme changed though.. However, when I went back into the screen it would assert... the assertion message is below.

Exception has occurred.

_AssertionError ('package:flutter/src/animation/animation_controller.dart': Failed assertion: line 487 pos 7: '_ticker != null': AnimationController.reverse() called after AnimationController.dispose()
AnimationController methods should not be used after calling dispose.)

The above message is directly correlated with changing the theme as I described in previous code. Changing the color as we always had does not affect this. The switch or even a button that changes the theme of m3 or m2-fake will cause this. Or even doing useMateria: false/true will do this too. If I disconnect the button but leave the ui, it does not give the assertion.

So I think I might be doing something wrong.
I pushed the code to my repo related files are here:
https://github.com/bksubhuti/tipitaka-pali-reader/blob/master/lib/services/provider/theme_change_notifier.dart
https://github.com/bksubhuti/tipitaka-pali-reader/blob/master/lib/ui/widgets/change_theme_widget.dart
https://github.com/bksubhuti/tipitaka-pali-reader/blob/master/lib/ui/screens/settings/settings.dart

The animation might be related to the settings screen for a separate settings expansion panel becaues there is some scroll controller to push expaneded menu to be visible, when it is expanded.

I noticed that the code from the playground had the heading scheme: and then a hard coded standard theme you had. However, that did not work for me.. and it seemed to accept and implement colors: in my code for the indexing.

if (Prefs.useM3) {
      return FlexColorScheme.light(
        // As scheme colors we use the one from our list
        // pointed to by the current themeIndex.
        useMaterial3: true,
        colors: myFlexSchemes[Prefs.themeIndex].light,
        // Medium strength surface branding used in this example.
        surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
        textTheme: _textTheme,
      ).toTheme;
 } else {
      return
          //ThemeData get themeData=>  myFlexSchemes[Prefs.themeIndex].light().toTheme();
          FlexThemeData.light(
        colors: myFlexSchemes[Prefs.themeIndex].light,
        appBarStyle: FlexAppBarStyle.primary,
        appBarElevation: 4.0,
   /// more code from playground here.

However.. your playground is also your fcs "testingplayground" and you do everything that could possibly break your theme and it survives. So maybe the code and the way I'm doing things is causing this error.

[bksubhuti]

About the making the appbar and m3.. I think I'm getting mroe and more used to it. I don't want to get too involved in tweaking themes.. However it might be good to have a very transparent appbar to produce a very slight color .. and I know how to do that with "custom". In that way, I don't have to worry about contast issues and make sure all aspects of posible contrast issues are fixed.

I have the m3 on my phone and I'm getting used to it now. However, I think other users will feel the same as I do about the m3. "It looks cool, but. a strong jump."

I'm totally into have themes that have as little info as needed and just specifying the root color. I think that is what you call seeds.

[rydmike]

The actual issue, is actually already closed. These discussions have already been moved to the more general FAQ and discussions section 😄

[bksubhuti]

actually.. it is probably something I'm doing wrong on provider.. I'll have to put this all on hold.. I 'm losing my study time.. I'll get back to you later on this.

[rydmike]

I updated my fork of your repo with your latest changes. I am however unable to build the app on macOS, iOS or Android in debug mode. It clearly needs some more configs and setups that I do not get when I fork the repo. This is not unusual, and done for many projects, but since it is info I do not have (or just don't know what more configs I need to build it), I cannot build the repo to actually try it and see wha the cause might be, but I don't think it is related to theming.

[bksubhuti]

I think it will be related to something else. And my skilled helper could not look at it for me.. he might be able to do so in 2 days.

In an old thread..but part of our discussion i said you need the db found here https://drive.google.com/file/d/1II8XYSQw0JzZxJk2J4QT9XyN2SnqT9qm/view?usp=share_link
Drop it in assets/database
and you need to run split.sh
and you also need a .env (notice the dot-env) on the root of the project (not lib) which contains
FIREBASE_API_KEY=I-removed-the-key

you probably need flutter clean and flutter pub update as well but I did update the yaml file.
new info.. :
However.. probably best to remove the code in the main.
I'm not so skilled in git branches, so we just push to the master. (need master) as default.

  if (await InternetConnection().hasInternetAccess) {
    FirebaseAuth.initialize(apiKey!, VolatileStore());
    Firestore.initialize(projectId);
    if (Prefs.email.isNotEmpty) {
      try {
        await FirebaseAuth.instance.signIn(Prefs.email, Prefs.password);
        Prefs.isSignedIn = true;
        debugPrint('login success');
      } catch (e) {
        Prefs.isSignedIn = false;
        Prefs.email = '';
        Prefs.password = '';
        debugPrint(e.toString());
      }
    }
  }

However, I'm trying to forget about this nagging item so I can study and pick it back up on October 28th. But maybe you know the feeling of it calling you. I'm not so bright in programming, but I PM'd the project this far.

[bksubhuti]

I pushed a fake .env file and pulled into a new fresh test directory. I copied the split db files and built linux and apk release builds with no errors. The release desktop version works.. but it closes the settings view. Debug desktop will assert.

[rydmike]

Got it running too :D

[bksubhuti]

It will get bigger after the db indexes and we populate the fts tables. I actually ran the android .. and everything worked in debug mode. It might be a problem with desktop. Windows also has problems. I have found that sometimes old projects have the OS c support files.. Sometimes those files get old and they might not be updated in git. The best thing to do is to delete that dir and then add macOS with flutter again. You will have to rename the project folder without dashes directory when you genrate macOS becuase we used an older naming convention. run flutter create --platforms=windows,macos,linux . and then rename the containing folder back. This might help. I have a volunteer in Sri Lanka bulid and release mac for me so I don't know mac.

[rydmike]

I still of course have no idea of what you want it to look like, but I can take a peek at what the theme_change_notifier.dart looked like before you made any mods with M3 etc and see what it looked like then, and make some recommendation based on that 😄

[bksubhuti]

okay.. The app works in android emulator as expected. It is a desktop problem.

I would like to know how to make a specific theme that has a slight tint appbar with my current way of adding colorSchemes by index. I think I would have to do that globally for the light (getThemeData) . If I have to do globally (and that might be best) I could just expand the themes settings panel and put another switch for light appbar.
The issue at hand is in the settings (theme).. change theme (use m3). (but it does not give issues in Android and works fine as expected).

[rydmike]

I used the theme from this commit, to look at what you had before:

https://github.com/bksubhuti/tipitaka-pali-reader/blob/5989a0db8926229df6c677401a438785140fba2d/lib/services/provider/theme_change_notifier.dart

LIGHT M2	DARK M2

I'll continue below with some examples.

[bksubhuti]

You will see that onchange of switch is causing the settings view to pop. Then return to the settings.. It causes assert.
Android Emulator works as expected.
This is directly related to the switching of themes to use material 3 and fake material 3 on linux or win.

2023-10-16.21-29-27.mp4

[bksubhuti]

I'm able to reproduce this on android. Change to landscape mode or make a tablet. Then you will invoke a different view..
Tab view with navigationRails.
It might be an issue with the tabbed interface and that is why the desktop fails. Global Search for themeData. You can see that the tabview uses theme data but not from fcs. It might be good to open a new issue with this. It is a separate issue.

[rydmike]

I made s mega PR concerning the M3 theming and a bunch of other nit fixes and minor style tweaks.

Use it or abuse it as yo see fit.
bksubhuti/tipitaka-pali-reader#215
We could have a video call and discuss some of the theme style if you want to make adjustments and understand it better.

Yes I did see a number of bugs concerning navigation, but they are not theme related. The theming will not impact your navigation. The navigation bugs needs more study, but first all lint issues should also be fixed, all 106 of them 😄

[rydmike]

Unrelated, but here was good new question about using true black in dark mode and generally tuning of dark mode style, that I just answered. It became a little Themes Playground tutorial on the topic, thought it might interest you as well. 😄
#201

[rydmike]

I made some additional comments in the merged PR, just to let you know that I will, "soonish", create an umbrella list of issues in the app repo that I might be able to assist with a bit now and then.

bksubhuti/tipitaka-pali-reader#215 (comment)