Flutter Question posted in
The official Flutter documentation can be found here.

How can I make the app bar visible on the flutter?

I want to create an app bar.

I created an app bar and set the color

I can’t see the app bar

Did I set it up wrong? I wonder what the problem is.

This is my code. and simulator picture

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.green),
      debugShowCheckedModeBanner: false,
      home: const RootPage(),
    );
  }
}

class RootPage extends StatefulWidget {
  const RootPage({super.key});

  @override
  State<RootPage> createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}
Tags:

2

Answers


  1. 0

    You need to define the Parameters of AppBar like the below so that your app bar will appear’s as you want.

    AppBar(foregroundColor: Colors.red,
       title: const Text('Your Title'),
    Login or Signup to reply.
  2. 0

    The app bar is actually there, but in Material 3 the color of the app bar by default blends with the background when it’s not elevated. If you start placing widget on the title, for example, you can notice it being rendered:

    AppBar(
  title: Text('My Screen'),
)

    Material 3 App Bar with Title Text

    Or you can put elevation to see the app bar starting to get tinted by the primary color:

    AppBar(
  elevation: 2.0,
)

    Material 3 App Bar with Elevation

    If you were familiar with the way the app bar is rendered in Material 2, which has the theme primary color by default, you might be looking for this explanation:

    After upgrading to Flutter 3.16, the app bar, background color, button size, and spaces change

    If you decided to set useMaterial3: false in your ThemeData, the app bar will appear as the primary color even without having any further configurations set:

    MaterialApp(
  theme: ThemeData(
    // ...
    useMaterial3: false,
  ),
)

    Material 2 App Bar

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search