[flutter] What is MaterialApp and Material design

What is

MaterialApp and what are the main elements?

MaterialApp uses the material design app component, which is based on WidgetsApp.So, what is material design?

material design is a set of interface design language designed by google. In short, it is a language that is convenient for UI designers to design UI.In order to make it easier for developers to develop apps that conform to material design, google encapsulates some component libraries that conform to material design. Usually, an app conforming to material design has the following components (refer to other blogs to filter out some components that I think are more important)):

1. Floating Ball (FAB)

The floating ball is probably the most visible symbol of Material Design.A small round ball is fixed somewhere on the screen (usually in the lower right corner of the screen and is always on the screen), it is so prominent that you can't ignore it.At the same time, it is also the most important mainline operation on the current page. For example, in the mailbox page, FAB is likely to be the button to send an email.And there's only one FAB on a page, which makes the ball even more conspicuous.

FAB is the most prominent design on a page, but not every page needs a FAB.

2. App bars: bottom

The bottom app bar is used to display navigation and keystrokes at the bottom of the screen.The bottom app bar is similar to the Tab bar in iOS design, but different from the Tab bar is that the bottom app bar is usually not divided into several equal parts, but some functional icons such as FAB and navigation are placed, and the rhythm of the layout is paid attention to..

The icon on the bottom app bar must be more than 2 (not counting FAB)

The bottom app bar consists of the following parts: ①container; ②navigation drawer control; ③floating action button (FAB); ④action icon; ⑤more menu control.

3. App bars: top

The top app bar is similar to the navigation bar we use in iOS, but not exactly the same.The headers in the top app bar are not centered but left-aligned like a newspaper, because Material Design believes that reading should be in left-to-right order like in a newspaper.And at most one system icon can be placed on the left side of the icon, and multiple system icons can be placed on the right side.

The components included in the top application bar: ① top bar container; ② navigation drawer icon (optional); ③ title (optional); ④ system icon (optional); ⑤ more button (optional).

 

4 Banners

Banners are more than just ads. Banners are the first prominent area below the top bar, displaying prominent messages and associated optional actions.It can be a dialogue, a prompt or a design with graphics.

5. Bottom navigation

The design of the bottom navigation is similar to that of iOS. It also divides the bottom width into a click area for multiple icons, and is accompanied by auxiliary text information to facilitate users to understand the functions behind the icons.Bottom navigation is a great addition to the bottom app bar.

6. Cards

Card design is also a hallmark of Material Design.In fact, the card design can be understood as a small unit, and the logical relationship of information in this unit is closer.If there is too much information in a unit, it is easy for users to have a serial phenomenon when reading, and the card design can effectively avoid this problem.

The card design includes the following components: ① Container Card container.It holds all card elements, and the size of the container is determined by the space occupied by the elements.② Thumbnail (optional).Thumbnails can place avatars, icons and logos.③Title text (optional).The title text is usually the most important title in the card and is generally larger.④Subtitle (optional).Subheadings can place information such as article bylines or tag locations.⑤ Multimedia (optional).Cards can include a variety of media, including photos and videos.⑥Auxiliary text (optional).Usually it is the description information for multimedia.⑦ button (optional).8. Icon (optional).

7. Navigation drawer

The composition of the drawer navigation

①Container (optional); ②Header (optional), usually user personal information; ③Separation line (optional); ④Selected state; ⑤Selected state text; ⑥Inactive text; ⑦SmallTitle; ⑧ The underlying interface (inoperable).

There is also a layout part about Material design, but flutter's built-in scaffolding components will automatically help us typesetting and layout, so we only need to understand what important components of Material design are.