2

I have the following screen

enter image description here

and this is the code:

return Scaffold(
      backgroundColor: Palette.light,
        body: RefreshIndicator(
            onRefresh: () => MatchesController.refresh(matchesState, matchId),
            child: CustomScrollView(
              slivers: [
                MatchAppBar(matchId: matchId),
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                      return widgets[index];
                    },
                    childCount: widgets.length,
                  ),
                )
              ],
            )),
        bottomNavigationBar: SafeArea(child: BottomBarMatch(match: match)),

the problem is that I want to use SafeArea and bottomBarMatch and Scaffold have different colors.

I would like that space below the bottom bar to be of the same color of the bottom bar. If I move the SafeArea one layer up I would instead see it black (system color, I guess)

alexlipa
  • 1,131
  • 2
  • 12
  • 27

4 Answers4

2

1 . Wrap BottomNavBar into SafeArea

SafeArea(
        child: BottomNavBar(

2 . Set BottomNavigationBar with elevation: 0

3 . Wrap BottomNavigationBar into Container and then make top shadow :

   BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              blurRadius: 1,
              offset: const Offset(0.0, -0.75),
            ),



child: BottomNavigationBar(
          elevation: 0,
Hùng Phạm
  • 21
  • 2
1

Instead using SafeArea widget, I recommend adding the padding

MediaQuery.of(context).padding.bottom

to your BottomBarMatch widget

Give this padding to the white colored widget of your BottomBarMatch widget and you'll get the same safe area but inside the BottomBarMatch

Roaa
  • 1,212
  • 7
  • 11
1

To deal with this issue I created a custom safe area widget as follows:

class ColoredSafeArea extends StatelessWidget {
  final Widget child;
  final Color color;

  const ColoredSafeArea({Key key, @required this.child, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color ?? Theme.of(context).colorScheme.primary,
      child: SafeArea(
        child: child,
      ),
    );
  }
}

This allows you to set a safe area, as well as the background colour behind the top status bar and the area 'underneath' the safe area on large screen devices.

In your case, you could wrap the entire widget tree in a ColoredSafeArea widget, setting the color to white, or any color of your choice.

dingo
  • 443
  • 3
  • 16
0

Update: This issue is fixed with Flutter 3.10.0 now.

See: https://github.com/flutter/flutter/pull/123746

bone
  • 1