top of page

[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".

Recent Posts

See All

[Flutter/Dart] Format string with TextField

What want to do I want to create an input form using TextField. For example, if the input content is a monetary amount, I would like to display it in 3-digit delimiters with a ¥ prefix. Rather than ha

Kommentare


Let's do our best with our partner:​ ChatReminder

iphone6.5p2.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Let's do our best with our partner:​ ChatReminder

納品:iPhone6.5①.png

It is an application that achieves goals in a chat format with partners.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png

Theme diary: Decide the theme and record for each genre

It is a diary application that allows you to post and record with themes and sub-themes for each genre.

google-play-badge.png
Download_on_the_App_Store_Badge_JP_RGB_blk_100317.png
bottom of page