Tuesday, May 25, 2021

Design and Code Your First Flutter App

Design and Code Your First Flutter App

Designing an app with Flutter is quite simple and the process is easy to understand even if you are a beginner.

This guide will help you get started with your first app developed on Flutter. It will teach you some of the core UI and design elements that come together to make an app, like font, theme, orientation, snackbar, and drawer.

Getting Started With Flutter

Getting started with Flutter doesn’t require you to have extensive app developing experience. There are several Flutter tutorials to guide you through the complete process of creating an app here.

What makes Flutter programming even simpler is that all apps are written in the Dart language. So, you also don’t need to know the OS-specific programming languages like Swift or Java.

To get started, you will have to download and install Flutter SDK. Next, download and install Android Studio.

If you don’t have Android Studio, you can use any other IDE to develop a Flutter app. We are using Android Studio because it has many features that help develop Flutter apps faster.

Once it is installed, you are ready to start your project.

Build First Flutter App

After getting started with the Flutter and setting up the SDK and IDE, you have to create a project.

Open Android Studio and create a new Flutter project.

Next, you have to give your project a name, select its Flutter SDK path, set the location of the project and click Next. Now enter the project name. We would like to name it my design.

After you put everything and press Next and then Finish, the Android Studio will set you up with some starter code and launch the project. Here's what the starter code looks like:

 Now you can run the project to see how the app looks. 

Great! This was the first step to building your first Flutter app. So far it is a simple app with a top bar and a button in the middle.

The Material Design Package

Now, if we go back at the top of the code, we will see this line:

The starter app uses Material Design. Material Design is a design system created by Google. With Flutter, it is easy to create a Material Design app—we get to tap into a lot of pre-built material components and widgets.

To use Material Design in Flutter, import the material.dart package. These widgets take care of everything from font to alignment to theme. Of course, you don't have to use Material Design—the Flutter framework is designed in such a way that it creates layers of objects, and every part of the framework level is optional and replaceable.

Let's customize our app. We'll start with the text widgets.

The result will look like this:

The text widget will display the text in the default font which will break into lines based on the layout.

However, you can style the text using the Text.rich constructor. It will show a paragraph with differently styled text.

Here is the rich text code for reference:

(An extra tip: If you want to make your text react to touch events, use a Gesture Detector widget and wrap the text in that. I'll explain this in a follow-up post.)

Design Elements for a Flutter App

Here are the major design elements you might want to use in your first Flutter app:

Themes

Flutter UI is all about allowing people to create apps that are appealing and attractive. For starters, Flutter will give your app the default theme if no other theme is selected.

Now, you can play with the code and test all that Flutter can do. 

Here is an example:

And its code should look like this:

Here is another example of how you can change the color of the background and add different elements to improve your app:

Here is how its code goes:

Fonts

Flutter offers several custom fonts that you can apply to your app. These fonts can be applied to the entire app or to a specific widget.

To use customs fonts, you can import them into Flutter. Use this code to import the font of your choice:

After importing the fonts, you have to declare the font in the pubspec by including a font definition in the pubspec.yaml file.

You can download other free fonts from Google.

After this, you have two options:

  1. set a font as the default
  2. use a font in a specific widget

In the following code, you can see examples of how to do each of these options.

Here's what your app will look like:

This will apply the Roboto Mono font only to the text widget while Raleway stays the default font of the app. 

User Interface and Overall Layout

Flutter allows you to build different layouts according to the orientation of users’ devices. For example, you can build a grid view list with two columns in portrait mode and three in landscape mode.

First, create a grid with two columns.

Now, use the OrientationBuilder widget to adapt the layout based on device’s orientation.

The layout will now have three columns in horizontal orientation as compared to two in the vertical orientation. This is the complete code: 

And here is what your app will look like:

Adding a Drawer

You can also add drawers to display additional information on your application.

The drawer is added by using a drawer widget, combined with a scaffold. The drawer is wrapped in the scaffold widget.

For an example of how to add a drawer in the scaffold and add content to the drawer, look at the following code:

The above code will acheive this look:

Conclusions

Flutter has simplified the process of app development with its widgets and easy to use interface. There are endless possibilities when it comes to adding and modifying elements to your flutter app. This guide has covered some key elements that are an integral part of every app's design.

So, experiment a lot because only testing and practicing will turn you in a great app developer.


No comments:

Post a Comment