How to set a new scaffold background color with opacity

Hi @luctc,

Thanks for you question and sorry for the delay.

The FlexColorScheme.light/dark and FlexThemeData.light/dark all have a scaffoldBackground color property. If you know and have fixed color with a given opacity you can just assign it to that property.

If you want to based the scaffold background theme color, on some color being computed by FCS and apply som opacity to it, you can extract it and feed it back into the theme with `copyWith``

Here we extract the surface color and give it an opacity 0.5:

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

FlexColorScheme fcs = FlexColorScheme.light(
  scheme: FlexScheme.materialBaseline,
  blendLevel: 2,
  subThemesData: const FlexSubThemesData(),
  useMaterial3: true,
);
ColorScheme scheme = fcs.toScheme;
Color scaffoldColor = scheme.surface.withOpacity(0.5);
ThemeData theme() =>
    fcs.toTheme.copyWith(scaffoldBackgroundColor: scaffoldColor);

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme(),
      home: Scaffold(
        appBar: AppBar(),
        body: Builder(builder: (BuildContext context) {
          return Center(
            child: Text(
              'Hello World!\n'
              'scaffoldBackgroundColor\n'
              '${Theme.of(context).scaffoldBackgroundColor}',
              textAlign: TextAlign.center,
            ),
          );
        }),
      ),
    );
  }
}

Result looks like this:

Screenshot 2024-02-29 at 23 49 43

To get the color value to show the correct value in the text above, you have to wrap the body in a Builder, so that it gets the theme from the context MaterialApp above it. If the body has another widget that does the presentation then it is already in context where the theme is applied and no builder needed, since the new widget has one.

The Scaffold and its background color itself is automatically in another context, it includes a builder wrapper so the background color with opacity will be used show on it without a builder after home. The builder above was only used to get the color shown in the text presentation.

The window itself that the scaffold is painted on, is not transparent though, it is black and you see it showing through the 50% transparent almost white scaffold background.

So there is not a big point in making the scaffold background transparent, unless you are stacking many on top of each other and want so show what is behind the one top of another one.

However, making the scaffold background transparent will not show you the desktop behind the window. That is a totally separate issue and topic, outside of theming. At least it is so currently.

Transparent backgrounds on the app container window has been issue forever in the Flutter repo. I have not checked the latest status of it. Maybe it is even supported somehow now, but not via themes.

rydmike / flex_color_scheme

How to set a new scaffold background color with opacity #218