Flutter Material Surface Container

[dickermoshe]

Where would I find the surface-container color in flutter? Is it part of the M3 spec?

[harshhhh15]

The surface color in Flutter is not a part of the M3 (Material Design 3) specification. It is a common color used in many UI frameworks, including Flutter, to represent the background color of a surface, such as a card or a dialog box.

In Flutter, the surface color is typically defined as a theme color. You can access it using the Theme.of(context).scaffoldBackgroundColor property, which returns the surface color for the current theme.

Here is an example of how to use the surface color in Flutter:

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).scaffoldBackgroundColor,
      child: Center(
        child: Text('Hello World'),
      ),
    );
  }
}

In this example, the background color of the Container is set to the current surface color using the Theme.of(context).scaffoldBackgroundColor property. This ensures that the widget's background color matches the surface color of the current theme.

[guyluz11]

It looks like this is a work in progress from the Flutter side, you can upvote this issue to increase priority https://github.com/flutter/flutter/issues/115912

[dickermoshe]

This is a great work around https://github.com/flutter/flutter/issues/115912#issuecomment-1642004055