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

Flutter: iPad status bar color cut in half

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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'),
       ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search