How to show Flutter AppBar without trailing space

Issue

When I add an AppBar to my program, it shows a blank space under the AppBar that is essentially a blank row. When I remove the AppBar, the space row is not present. The space row is very noticeable and spoils the look of the App. Is there a way that I can have the AppBar without the space and without using my own widget to achieve it?

Code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Calculator',
        home: Scaffold(
            appBar: AppBar(title: Text("Flutter Calculator")),
            body: (HomeScreen())));
  }
}

Solution

The problem appears to have been caused by the addition of a SafeArea without “top:” being set to false. Hopefully this is the solution. Not sure why the default appears to be for SafeArea to add padding. I would have thought it better to add a padding property, but what would I know, I’m just learning Flutter?

Relevant Code is below, and the problem now appears to be rectified. I previously showed a minimal AppBar to reduce the amount of code to illustrate the problem. The full AppBar is now shown. Appears to be a complicated way to just set the height of the AppBar, but what would I know? However, as a Flutter beginner, it has taken me some hours to reach what I hope is the solution. The main point being however in para 1 above.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: PreferredSize(
                preferredSize: Size.fromHeight(35.0),
                child: AppBar(
                    automaticallyImplyLeading: false, // hides leading widget
                    centerTitle: true,
                    title: Text("Flutter Calculator by Brian"))),
            body: (HomeScreen())));
  }
}


class HomeScreen extends StatefulWidget {
  @override
  HomeScreenState createState() => new HomeScreenState();
}


class HomeScreenState extends State<HomeScreen> {`

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: SafeArea(
            top: false,
            bottom: false,
            child: Material(

Answered By – Brian Oh

Answer Checked By – Pedro (FlutterFixes Volunteer)