Creating a new Flutter app – Dos & Don’ts

With Google releasing Flutter 2.0, we anticipate the shift of several apps to the Flutter framework. To create a new Flutter app, it is necessary to be aware of how to develop or improve a mobile app using its framework. This begins with understanding the basics.

This how-to guide is in two parts and will help you get started with Flutter. 

Flutter

Flutter has been designed to work with 

• iOS and Android 
• Web and Desktop (Mac, Windows, and Ubuntu) — Even support PWA 
• Auto 
• Raspberry Pi (POC stage)

This official Flutter tutorial from Google compares Native Development, Hybrid App Development, React Native Development, and finally, Flutter App Development.

This provides the skeletal structure of how Flutter is different from the other tools available for app development today. 

Create a New Flutter App – Setting up

Based on the OS in use, Flutter is easy to install. This tutorial helps you get started and create a new flutter app. GitHub also has tutorials and resources for installing Flutter. 

We recommend setting up Flutter before installing Dart. This is because as you set up Flutter, Dart will simultaneously be installed. Once Flutter is installed, it will decide which version of Dart will be used. Having multiple versions of Dart on the system is unnecessary.

If mobile app development is new territory, we recommend downloading Xcode and Android Studio (and toolchain), as well. Post setting up Flutter, scaffolding a new project is a single command.

Learning Dart

Flutter uses Dart to build applications. To learn how and why Dart came about, there are plenty of reading materials available here. Additionally, you can also keep up with developments in Dart through their medium page.

The official documents of Dart are a good place to start learning. They also offer a tour and language samples. Post this, the only thing to do is practice. 

To get better with syntax, work on DartPad until you achieve more proficiency. Dartbyexample is another great resource. 

Getting the hang of Flutter – Creating the Flutter App

Once you are fairly confident about your proficiency in Dart, it is time to take on the basics of Flutter before you create a new flutter app. We recommend starting with this Flutter tutorial that has a technical overview of the architecture and features. 

1. Scaffold a new Flutter app with 

flutter create app_name

2. Open the project on Android Studio
3. Download the emulator and an Android version
4. Run the project 

Based on this, it is important to understand how to structure the project directory. Additionally, it is prudent to be aware of the purpose of different files. 

After Flutter has been set up and is up and running it is time to set up the package file: pubspec, written in YAML. 

Widgets, widgets, widgets 

When you hear widgets are everywhere, you don’t quite get it until you create a flutter app and see it on Flutter. This is the official catalog of widgets on Flutter under multiple categories. 

There are also plenty of guides available online that demonstrate what these widgets are and how to use them. 

There are two types of widgets: stateless and stateful.

Stateless Widgets 

Their state doesn’t change. For instance, a button or an image. Its state does not change when an action is performed on the screen. The official documentation by Google for stateless widgets is here to provide a better understanding.

Stateful Widgets

When a widget is required to sustain some state like a current page in PageView or the currently selected tab in a BottomNavigationBar, Stateful widgets are your go-to. For example, Stateful Widgets such as Checkbox, Radio, Slider, InkWell, Form, and TextField, are popular and used in several apps.

IBefore you create a Flutter app, t is important to know that the Stateful widget has a State build method that calls each time we explicitly call setState. The official documentation for the stateful widgets put out by Google is here. 

Interactive Widgets

When creating an application you hope to deploy on a platform, apart from widgets that display information or categorize them, it is essential to create widgets that are interactive. 

These include provisions for the user’s input through multiple ways such as gestures, taps, etc. We recommend going over the official Flutter guide on adding interactive elements before starting. 

Layouts

By now you would have understood that Flutter pretty much runs on its widgets. This extends to layouts as well. Layout widgets form rows, columns, and grids. While these are not visible on the finished app, they help in arranging the visible widgets based on design and specifications. 

The official Flutter documentation for layout is comprehensive and gives a holistic idea of the concept. 

Powerful basic Widgets such as Text, Column, Row, Stack, and Container help in creating the look and feel desired in the app being built.

Flutter recently started support for Material Design. With several widgets that support Material Design such as MaterialApp, AppBar, Scaffold, etc building apps has never been easier. Additionally, Flutter also includes the iOS-centric Cupertino component package that includes widgets such as CupertinoApp, CupertinoNavigationBar, etc.

Until now we have covered the structural framework of building an app on Flutter. If you have gained a good amount of familiarity until now, we suggest using the Flutter Cookbook to explore and create a new Flutter app in-depth. This means applications that have Multiple screens, images, network dependency, etc. 

The basics of creating an App on Flutter

When creating a new Flutter app it is important to understand the following elements: 

Forms

The Form widget on Flutter helps to build forms that efficiently manage the essentials of a Form, i.e., State of a Form, Validation, etc. Check out the complete guild for forms in this official documentation.

Gestures

Gestures help obtain user inputs. Additionally, they provide time while making the app responsive. Some of the pre-built widgets within Flutter used for this purpose are as follows: 

1. Adding Material Ripple Effect. The tutorial and documentation are here.
2. Handle Taps. The tutorial and documentation are here.
3. Swipe to Dismiss. The tutorial and documentation are here. 

Images

Images are an indispensable part of interactive apps. Flutter has an in-built Image widget to display an image within the app from multiple sources. These include displaying images from the network, images with Placeholder and Fade-in Animation, local storage with cached images.

Using Lists

The List widget can be used to accommodate more data. This can be oriented either vertically or horizontally. Flutter has two basic widgets: GridView and ListView. 

In some cases, the items would need to be displayed as a grid. In such cases, the GridView widget is most suited. 

In other instances, it is essential to create a list that scrolls horizontally rather than vertically. This can be accomplished using the ListView widget that supports horizontal lists. Additionally, ListView helps in placing predefined arbitrary items in a List. This allows passing custom items through Widgets to its children. The official documentation for basic lists is here.

Sometimes, the requirement could be for lists that display different types of content. For instance, it could be a list comprising of a series of headings with items listed under each heading.

Here’s how you can create such a structure with Flutter:

1. Create a data source with different types of items.
2. Convert the data source into a list of widgets.

This is the official documentation for mixed lists. 

While creating lists it is essential to make it easy for users to view the list of items. This might necessitate having to hide the app bar as the user scrolls down the list. This is pertinent if the app displays an app bar taking up a lot of vertical space.

This is done using the Scaffold widget and adding an appBar property to this widget. This ensures that the fixed app bar remains above the body of the scaffold. You can find the official documentation to floating appBars here. 

In certain cases, a List has more items than the viewport of the screen. In these cases, it building all the items at once does not make sense. For such situations, Flutter has the ListView. A builder that makes use of the Lazy rendering approach to create useful list items.

The next part of this series will go into the dynamic elements within an app and how to tackle them. 

Josh Software

We specialize in helping clients get ahead by leveraging emerging software and technology. Josh Software is a recognized leader in Flutter app development. Start your Flutter development journey with us today. 

Reach out to us in case of any queries.