I am relatively new to flutter so I don't know why my appbar appears like this app screenshot

Here is the main.dart file

import 'package:testapp/test_page.dart';
import 'package:flutter/material.dart';

void main() {
runApp(Home());
}

class Home extends 
StatelessWidget {

@override
 Widget build(BuildContext 
context) {
return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Test App',
  theme: ThemeData(primaryColor: Colors.purple),
  home: TestPage(),
);
}
}

Here is my testpage.dart

import 'package:flutter/material.dart';

class TestPage extends 
StatelessWidget {
@override
Widget build(BuildContext 
context) {
return Scaffold(
  primary: false,
  appBar: AppBar(
    title: Text(' Test app'),
  ),
  body: Center(child: Text('Example Test')),
);
}
}

I tried using SafeArea it didn't work. Thank you


Solution 1: Mehrdad

change the primary value to true and tell me result:

Scaffold(
primary: true, // this line
appBar: AppBar(......

Edit:

MaterialApp cant be a child of statelessWidget. use it as the main Widget

runApp(MaterialApp(
  ......
))


Solution 2: Rahul Sharma

You have primary property set to false.

Whether this scaffold is being displayed at the top of the screen.

If true then the height of the appBar will be extended by the height of the screen's status bar, i.e. the top padding for MediaQuery.

https://api.flutter.dev/flutter/material/Scaffold/primary.html


Solution 3: eko

here is what i solved similar issue. Simply wrap your Scaffold widget with SafeArea Widget

SafeArea(
   child: Scaffold()
)

You can find more detail about SafeArea Widget in this link Flutter SafeArea Widget

Hope it will help

Happy coding


Solution 4: Becca

Thank you much guys, I created a new project then I realised it was caused by a bug from one of the libraries I installed. It's totally fixed now ♥️