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

Flutter fullscreen app – status bar still taking space

i am trying to make a full screen flutter app.

Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,

  ));
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: green),
        useMaterial3: true
      ),
      home:  Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Colors.red,
      ),
    );
  }
}

it hide the status bar but still taking space as black.The red color container not taking the space of status bar.
enter image description here

Tags:

2

Answers


  1. 0

    Please try it using the following way :

    void main() async {
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        extendBody: true, 
        body: const YourMainWidget(),
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    I also have a fullscreen app, this is what my code looks like:
    (Make sure to not use SafeArea() widget)

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

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => Bloc1(),
        ),
        BlocProvider(
          create: (context) => Bloc2(),
        ),
      ],
      child: MaterialApp(
        home: Scaffold(
          extendBody: true,
          extendBodyBehindAppBar: true,
          body: HomeScreen(),
        ),
      ),
    );
  }
}

    Try to use SystemChrom.setEnabledSystemUiMode inside your build method, not on main(). Also, set extendBodyBehindAppBar to true.

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

Back To Top
Search