1

When I try to set status bar color using library (flutter_statusbarcolor_ns) or directly using direct flutter code:

 void _setStatusBarColor(Color color) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: color,
 ));
}

Status bar color is not getting set properly. It is working in ipad portrait mode perfectly but cutting in nearly half (or 60%) in ipad landscape mode.

Note: I tried many things including different libraries, checking flutter native codes, but no luck. Any help is appreciated.

2 Answers 2

4
+25

Rendering in flutter isn't subject to system calls or components, so 1 such solution may involve manually rendering the color you want and using the systemchrome setting simply for the brightness (should icons be white or black)

class StatusBarViewer extends StatefulWidget {
  final Widget child;
  const StatusBarViewer({required this.child, super.key});

  @override
  State<StatusBarViewer> createState() => _StatusBarViewerState();
}

class _StatusBarViewerState extends State<StatusBarViewer> {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      SafeArea(
        child: widget.child,
      ),
      Align(
        alignment: Alignment.topCenter,
        child: Container(
            width: MediaQuery.of(context).size.width, height: MediaQuery.of(context).viewPadding.top, color: Colors.blue),
      )
    ]);
  }
}

Something like this would allow you to have a "SafeArea" widget that you would naturally use elsewhere to handle changing the status bar, you could even do custom implementations of appbar to handle no using the safearea so you can custom fill it, but as you can see this works in an ipad simulator

vertical status bar horizontal status bar

Sign up to request clarification or add additional context in comments.

3 Comments

Solution worked, Thanks.
Awesome! If you can mark as answer as well to flag on the site as being answered for other users, that would be awesome
upvoted so you can get the bounty
1

The simplest solution you can have is Wrapping your MaterialApp in the main.dart with the ColoredBox widget, and giving a Color.

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

  @override
  Widget build(BuildContext context) {
    return ColoredBox( //added widget
       color: Color(0xffffffff), //add custom colors
       child: MaterialApp(
         title: 'Flutter Demo',
         debugShowCheckedModeBanner: false,
         theme: ThemeData(
           colorSchemeSeed: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       ),
    );
  }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.