Layout Design Without Appbar Using Flutter Android App

Posted By Bajarangi soft , Posted On 12-10-2020

we have some specific design details to make our app screen without the App Bar to make the application full screen. But if you direct remove the App bar from your project you will see that all the body content goes at the top of screen and stuck there. Without the app bar the content starts above from status bar and this looks pretty bad for our application. So here flutter gives us solution using their SafeArea widget.

Layout Design Without Appbar Using Flutter Android App

Layout Design Without Appbar

Complete Code For Layout Design Without Appbar In Flutter
main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.black,
            body: SafeArea(
                child:Center(
                  child: Column(
                    children: [
                      Text('Hello Guys !!!', style: TextStyle(fontSize: 40,color: Colors.white),)
                    ],
                  ),
                )
            )
        )
    );
  }
}