Material Design

Material or Material Library is the designed language of Google. It includes components that are very important in Mobile App Development. We can easily recognize all components available in any app after learning it. All these components make a user interface (UI). Every component is used for an action, communication, or containment. Similarly, these are also used for selection & navigation.

Why to understand Material Design?

As a mobile app developer, it is an important concept to understand. Like in other domains, there are specific terms like there are terms for doctors, designers, etc. Similarly, in Mobile App Development, there are important terms that we must know being a Mobile App Developer. As discussed above, there are different components that make an app. We should know their specific names. For example, there is a container, text box, etc. The following website can be used to learn Material Design:

M3.material.io 

Components on a Mobile Screen

There are specific terms for multiple Mobile App Components on a mobile screen. So whenever we see any app we should be able to recognize its components such as buttons, carousel, App Bar, Lists, etc. If we know them then we can make them as well after learning Mobile App Development. We will get all theoretical detailed knowledge from the above website.

An alternate platform to understand Material Design

We can get all these components and their code from the official website of Flutter too. It all depends on us to choose a platform from where we easily understand them. Basically, these are guidelines to be followed. We should know when and where to use these components. What are the cons and pros related to components? The more we learn and explore the more beneficial for us. Let’s discuss some main components.

Action

As clear from its name, these are used to take an action or to get the desired result. For example, send button on WhatsApp. There are different buttons on it which are used according to our needs. We will also get its width height on m3.material.io which we must follow while making an app. There are also guidelines to understand which things should be followed and which ones to be avoided. Let’s discuss one of the most important action components i.e. button.

Buttons

We have different types of buttons e.g. Elevated Buttons, Filled buttons, Outlined Buttons, Text Buttons, etc. All related standard guidelines for buttons are provided on the website mentioned above. Remember, when and where to use buttons is to be decided with proper thinking. Do & don’t of buttons and all other components are also given which we need to learn as well.

Communication

We use communication components to provide important information. These include progress indicators, badges & snack bars. For example, you must have noticed in your email that specific numbers of messages are yet to be read. So we communicate similar things through these components.

Containment

These components contain information as well as an action. This means it has both action and communication components. It is like real containers that used to contain items. For example, carousel, bottom sheets, cards, etc. Similarly, dialog, divider, and list also come in this category.

Figma

Figma is a very effective tool for Mobile App Developers. It is used to make App Designs. It is a simple tool and it can be learned even in a day. If a client asks for an app then we can use Figma to design perspective screens for them. It is easy to finalize requirements with clients if we provide screens designed by Figma to them. 

Task:

Install android studio and dart!