Flutter Question posted in
The official Flutter documentation can be found here.

Flutter black bars on Safe Area

I can’t get rid of black bars outside the safe area on Android.

Here’s how it looks:
Screenshot of a basic Flutter app in landscape, showcasing two black bars on the left and at the bottom

And here’s my code:

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test',
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.light,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text('Test'),
        ),
        body: const Center(
          child: Text('Test'),
        ),
      ),
    );
  }
}

Obviously my app is way more complex than that, but this simple example clearly demonstrates the issue. I took a landscape screenshot because it also highlights an other black bar on the left, where the camera is.

What I would like is for Flutter to be smart enough to overflow the background outside the safe area, but keep all content as it is. There’s also the case of bottom navigation bars (tab bars on iOS), those should extend their background past the safe area, but keep all content above.
Weirdly, the top of the app in portrait correctly overflows under the camera safe area, but not the bottom or landscape left and right… 🤷

I saw solutions such as changing the colors of the bar using something like SystemChrome.setSystemUIOverlayStyle, but I don’t think that’s a good fix (more of a hack TBH) because this color should change depending on the content of the screen, and setting a static color there leads to a lot more work to update it. Plus imagine if I wanted to do a gradient as a background color, that wouldn’t help at all. So I’m really looking for a definitive layout-based solution.

How should I update this code to get the correct appearance?

Tags:

4

Answers


  1. 0

    SystemChrome.setSystemUIOverlayStyle has been deprecated so the alternative is setEnabledSystemUIMode. Read about different UI modes here and choose one of your needs. I think you can use edgeToEdge mode to make a full-screen display.

    void main() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    // your app code 
}
    Login or Signup to reply.
  2. 0

    In the case of iOS, you have to remove safearea from that page. Because if you are using safearea the system status bar and bottom bar color will not be changed. Then use

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: Colors.white, // navigation bar color
    statusBarColor: Colors.pink, // status bar color
    
  ));

    If you want to change the color accordingly,then it is better to use transparent color.

    Login or Signup to reply.
  3. 0 
        void main() {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
}

    Add this in your main.dart file

    Login or Signup to reply.
  4. 0

    here’s a simplified version of your MyApp class that ensures the background extends beyond the safe area while keeping the content within it

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

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

  @override
  Widget build(BuildContext context) {
   Set the system UI overlay style for a fullscreen experience
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));

    return MaterialApp(
      title: 'Test',
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Stack(
        children: [
          // Background container with gradient
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: [Colors.blue, Colors.white],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              ),
            ),
          ),
          // Content within SafeArea
          SafeArea(
            child: Scaffold(
              backgroundColor: Colors.transparent,
              appBar: AppBar(
                title: const Text('Test'),
                backgroundColor: Colors.transparent,
                elevation: 0,
              ),
              body: const Center(
                child: Text('Test'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

    Key Points:

    System UI Overlay Style: Makes the status bar and navigation bar
    transparent

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search