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() {

class Home extends 
StatelessWidget {

 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 {
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:

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


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


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.


Solution 3: eko

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

   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 ♥️