Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tutorials

Design and Code Your First Flutter App

by
Read Time:10 minsLanguages:

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 build your first Flutter app. 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 the 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 you develop Flutter apps faster.

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

Build Your First Flutter App

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

Open Android Studio and create a new Flutter project.

Open Android Studio and create a new Flutter project.Open Android Studio and create a new Flutter 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 add everything and press Next and then Finish, 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. 

Flutter app screenFlutter app screenFlutter app screen

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 to the top of the code, we will see this line:

The starter app uses Material Design, which 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:

Flutter app with text widgets addedFlutter app with text widgets addedFlutter app with text widgets added

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.

Flutter app with styled textFlutter app with styled textFlutter app with 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

The 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 everything that Flutter can do. 

Here is an example:

Flutter app with colors and backgroundFlutter app with colors and backgroundFlutter app with colors and background

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:

Flutter app with button addedFlutter app with button addedFlutter app with button added

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 custom 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:

Flutter app with Roboto Mono fontFlutter app with Roboto Mono fontFlutter app with Roboto Mono font

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 the device’s orientation.

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

And here is what your app will look like:

Flutter app in vertical orientationFlutter app in vertical orientationFlutter app in vertical orientation

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.

Flutter app with drawerFlutter app with drawerFlutter app with drawer

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 achieve this look:

add a drawer in the scaffold and add content to the draweradd a drawer in the scaffold and add content to the draweradd a drawer in the scaffold and add content to the drawer

Conclusion

Flutter has simplified the process of app development with its widgets and its easy-to-use interface. There are endless possibilities when it comes to adding and modifying elements for 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 into a great app developer.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.