How to set a new scaffold background color with opacity

[megatron-luctc]

My app is using a color A for primary, but I want to set a new background color A.withOpacity(0.05). I tried to set it in "scaffoldBackground", but the background turns to black, and it also makes app bar black.

[rydmike]

Hi @luctc,

Thanks for your question and sorry for the delay.

Yes you are correct it will get black, that is expected. Just to first recap, here is how you can set scaffold background.

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:

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.

Why does it get black?

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

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 that is on 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]

As a continuation of this topic. We could dig into how the background can be made transparent in Flutter and document it here. I have not looked at it in a while, but I have seen it done.

[rydmike]

Transparent Views

@luctc, regarding the transparent background for desktop windows, I found the issues in Flutter that track them:

• For Windows it is here: Transparent Backgrounds for Flutter Windows Desktop Applications. flutter/flutter#71735 (I opened it in 2020, forgot about that, lol 😃 )
• For macOS it is here: [macos] Transparent FlutterViewController flutter/flutter#59969
• For Linux here: Transparent Backgrounds for Linux flutter/flutter#66751

Multi Window Views

A bit related, but much bigger issue and development is the multi window support for Flutter apps. There is a project tracking it here https://github.com/orgs/flutter/projects/39/views/1 and an umbrella issue here flutter/flutter#142845.