How to Fix Text Showing Above the AppBar in Flutter App?

Is text showing above the AppBar in your Flutter app? Get the solution you need to fix this UI issue and make your app look professional. Click to learn more.

Fix Text Showing Above the AppBar in Flutter App

Well, if you are doing something missing and from that framework doesn’t affected but your design is showing something un wanted or unprofessional ui/ux.

How to Fix Text Showing Above the AppBar in Flutter App

Cause of missing points , one of simple example is that if you are using scaffold and body only without appbar property or safeArea property than this kind of things happening.

Check out: How to hide debug banner from the application main page in Flutter?

Error

Fix Text Showing Above the AppBar in Flutter App Error
import 'package:flutter/material.dart';


void main() {

 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,

     title: 'Flutter Demo',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: const MyHomePage(title: 'Flutter Demo Home Page'),

   );

 }

}


class MyHomePage extends StatefulWidget {

 const MyHomePage({super.key, required this.title});


 final String title;


 @override

 State<MyHomePage> createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

 @override

 Widget build(BuildContext context) {

   return Scaffold(

         body:  Text(

         'Hello world !',

       ),

// This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}

Solution

Fix Text Showing Above the AppBar in Flutter App Solved
import 'package:flutter/material.dart';


void main() {

 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,

     title: 'Flutter Demo',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: const MyHomePage(title: 'Flutter Demo Home Page'),

   );

 }

}


class MyHomePage extends StatefulWidget {

 const MyHomePage({super.key, required this.title});


 final String title;


 @override

 State<MyHomePage> createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

 @override

 Widget build(BuildContext context) {

   return Scaffold(

         body: const SafeArea(

       child: Text(

         'Hello world !',

       ),

     ), // This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}
import 'package:flutter/material.dart';


void main() {

 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,

     title: 'Flutter Demo',

     theme: ThemeData(

       primarySwatch: Colors.blue,

     ),

     home: const MyHomePage(title: 'Flutter Demo Home Page'),

   );

 }

}


class MyHomePage extends StatefulWidget {

 const MyHomePage({super.key, required this.title});


 final String title;


 @override

 State<MyHomePage> createState() => _MyHomePageState();

}


class _MyHomePageState extends State<MyHomePage> {

 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       title: Text(widget.title),

     ),

     body: const SafeArea(

       child: Text(

         'Hello world !',

       ),

     ), // This trailing comma makes auto-formatting nicer for build methods.

   );

 }

}
Share:

Ambika Dulal is a Flutter developer from Nepal who is passionate about building beautiful and user-friendly apps. She is always looking for new challenges and is eager to learn new things. She is also a strong believer in giving back to the community and is always willing to help others.

Leave a Comment

AO Logo

App Override is a leading mobile app development company based in Kathmandu, Nepal. Specializing in both Android and iOS app development, the company has established a strong reputation for delivering high-quality and innovative mobile solutions to clients across a range of industries.

Services

UI/UX Design

Custom App Development

Mobile Strategy Consulting

App Testing and Quality Assurance

App Maintenance and Support

App Marketing and Promotion

Contact

App Override

New Plaza, Kathmandu