[Flutter/dart] Consideration Andorid AppBar design

It is inevitable to improve the design when creating a smartphone app.

This time, I would like to consider about the design of Android apps, especially AppBar.

Color is white or background color

With Flutter's default settings, the App Bar is painted in the main color. But what you want to show the most is the content under the App Bar.

So, I think it's better to set the AppBar color to white or background color.

Even famous apps often have the same color as white or background.

The color of AppBar can be changed with theme of MaterialApp

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(

      primaryColor: MyStyle.colorMain, //main color (defined elsewhere)
      buttonColor: MyStyle.colorMain,
      appBarTheme: AppBarTheme( //here！
        color: Colors.white,
        iconTheme: IconThemeData(
            color: MyStyle.colorMain
        ),
        textTheme: TextTheme(
          headline6: MyWidget.customTextStyle(
            TextStyle(
              color: Colors.black,
              fontSize: 20
            )
          )
        ),
        elevation: 1
      ),
      visualDensity: VisualDensity.adaptivePlatformDensity,
    ),

The color of the icon can be changed with iconTheme, and the color of the text can be changed with textTheme, so adjust accordingly.

Don't you think the right one can focus on the content?

Make the shadow under the AppBar smaller

As you can see from the above example, there is often no boundary between the AppBar and the content below it, or even if there is, a thin line.

The shadow of this boundary can be set with a property called elevation (see code above), and by default 4 is entered. Personally, I think this is too big.

left：elevation=4　right：elevation=1

It's a small difference, but don't you think the right one is more sophisticated? ??

Title is necessary？

Actually, I haven't answered this yet, but is it okay if there is no title in AppBar?

The same thing is written in Bottom Navigation, and in many cases you can see it without title in AppBar.

In particular, if the content below is gorgeous or takes up space, the AppBar is the same as the background color, and without text to leave a margin.

Pintarest has no title, and Instagram has no characters in Bottom Navigation (see the example above). Well, there are many apps that write titles.

Also, there are many apps that put the app name and icon image on the title of the main page (Instagram, Twitter, etc.).

Colclusion

Color is white or background color, elevation is small or none.

Lastly

It's the opinion of an individual developer who is not a designer.

By the way, the app mentioned as an example is "a shopping list app that you don't forget to add to the list".