flutternavigationbarflutter-showmodalbottomsheetbottom-navigation-bar

What is the default color used for NavigationBar in flutter

I have a NavigationBar in my app and occasionally I will show a modal bottom sheet. I would like the bottom sheet to have the same color as the NavigationBar. What is the default color for the NavigationBar, hence for the modal bottom sheet?

showModalBottomSheet<void>(
  context: _scaffoldKey.currentContext!,
  builder: (BuildContext context) {
    return BottomSheetComponent(marker: marker);
  },
  clipBehavior: Clip.hardEdge,
)
Solution

  • You can see the default colors of a Flutter widget from the docs or from the source code.

    From the documentation, the backgroundColor property of NavigationBar is described as:

    The color of the NavigationBar itself.

    If null, NavigationBarThemeData.backgroundColor is used. If that is also null, then if ThemeData.useMaterial3 is true, the value is ColorScheme.surface. If that is false, the default blends ColorScheme.surface and ColorScheme.onSurface using an ElevationOverlay.

    You can get ColorScheme from Theme.of(context).colorScheme. For example, to get the ColorScheme.onSurface value you can do this:

    Theme.of(context).colorScheme.onSurface

    If you're asking about the source of the tinted color that applies on the NavigationBar, that is from the surfaceTintColor property.