If you are curious about how Flutter works, and wanted to try your hands on it, this article is aimed to help you achieve just that. We’ll show you, in a detailed step-by-step process, on how to build your first mobile application using Flutter.

Flutter is known for three things – fast development, to create expressive and flexible UI designs, and to offer full native performance. For using Flutter, you don’t need previous experience in Dart or mobile programming, but if you are familiar with object oriented code and basic programming concepts like variables, loops and conditionals, you should not have any problem in following the steps.

Though this information is available in Flutter codelab, we wanted to bring it right here for the convenience of our readers.

In this First Part, we will cover four areas:

Step 1: Creating a starter Flutter app
Step 2: Using an external package
Step 3: Adding a stateful widget
Step 4: Creating an infinite scrolling ListView

You will be building…

A simple app that generates proposed names for a startup company. At the functionality level, the user can select or unselect names, and can save their preferred names. When the user scrolls, more names are generated, and there is no limit on the scrolling.

You will need…

Two softwares
1. Flutter SDK
2. An Editor (Android Studio is widely used, but you can use your preferred Editor)

To run, you will need any of the following devices:

Android or iOS (physical device) connected to your computer and being set to developer mode
iOS simulator
Android Emulator

Step 1: Creating a starter Flutter app

You can begin by creating a simple, templated Flutter app by following these instructions. Then name your project as startup_namer instead of myapp.

Note: In case if you don’t see “New Flutter Project” in your IDE, ensure that you have the plugins for Flutter and Dart installed.

In this tutorial, you will mostly be editing lib/main.dart, where the dart code lives.

1. Replace the contents of lib/main.dart.
Delete all the code from lib/main.dart and replace it with the following code.

Tip: If your indentations go askew while pasting the code, you can fix them with Flutter tools.

Android Studio/IntelliJ IDEA: Right-click the code and select Reformat Code with dartfmt.
VS Code: Right-click and select Format Document.
Terminal: Run flutter format <filename>.

2. Now, run the app by clicking the green arrow in the IDE. You should be able to see ‘Hello World’ at the middle of the screen.

android               ios

            Android                                                                 iOS

Note: When you run it for the first time on a device, it may not load immediately and may take a while. After this, you can use Flutter’s Hot Reload feature to quicken the process.

Step 2: Using an external package

Since we are developing a name generator app, we will be using an extensive list of english words. For this, we’ll use an open-source package known as english_words, which contains several hundreds of widely used English words and some utility functions.

You can get the english_words package, and many other open source packages on pub.dartlang.org

1. Since the pubspec file manages the assets and dependencies for a Flutter app, add english_words (3.1.0 or higher) in pubspec.yaml. And then add the highlighted line provided below in the window.

pubspec.yaml

2. If you are viewing the ‘pubspec’ in Android Studio’s editor view, click on Packages get. As the name suggests, this will pull the package into your project, and you should be able to see the following in the console.

Packages get

Clicking on Packages get also auto-generates the pubspec.lock file with the list of all packages that are pulled into the project along with their version number.

3. Import the new package in lib/main.dart

new package

As you type, Android Studio throws up suggestions for libraries for the user to import. Then, it renders the import string in gray color to inform the developer that the imported library is unused (so far).

4. Use the English words package to generate the text instead of using the ‘Hello World’ string. Make the following changes.

UseCamelCase

Pascal Case, also known as ‘upper camel case’ turns the first letter of each word in the string to uppercase. For example, ‘usecamelcase’ becomes ‘UseCamelCase’.

5. Now, you can use the hot reload button (if the app is running) to update the app. Every time you click hot reload (or save the project) you should see different word pairs, randomly chosen, in the running app.

update the app

Code help: If the app is not working properly, you can use the code at the below provided links.

Pubspect.yaml

lib/main.dart

Step 3: Adding a Stateful Widget

Stateless widgets: Their properties cannot be changed, and all values are final. Means, they are immutable.

Stateful widgets: The state might change during the lifetime of the widget.

Here, we will be adding a stateful widget RandomWords, which creates its State class, RandomWordsState. You will then use RandomWords as a child inside the existing MyApp stateless widget.

1. To create a minimal state class, add the following to the bottom of main.dart

minimal state class

Notice the declaration State<RandomWords>. This indicates that we’re using the generic State class specialized for use with RandomWords. Most of the app’s logic and state resides here—it maintains the state for the RandomWords widget. This class saves the generated word pairs, which grows infinitely as the user scrolls

Since the RandomWordsState depends on RandomWords, you will be adding that next.

2. Add the stateful RandomWords widget to main.dart


RandomWords

 

You will notice that, after adding the state class, the IDE prompts that the class is missing a build method. So, let’s add a basic build method that generates the word pairs by moving the word generation code from MyApp to RandomWordsState.

3. Let’s add the build ( ) method to RandomWordsState

build method

4. Now, remove the word generation code from MyApp

word generation code

5. Restart the app. Now the app should be able to display word pairing each time you hot reload or save the project.

Note: If you come across the following message, restart the app.

Reloading…
Some program elements were changed during reload but did not run when the view was reassembled; you may need to restart the app (by pressing “R”) for the changes to have an effect.

Code help: If the app is not working properly, you can use the code at the below provided link. lib/main.dart

Step 4: Creating an infinite scrolling ListView

1. You will add a _suggestions list to the RandomWordsState class for saving the suggested word pairings. Also, you could add a biggerFont variable for larger font size.

suggestions list

2. Add the entire _buildSuggestions() function (shown below) to the RandomWordsState class (you can delete the comments, if you prefer).

buildSuggestions

As the_buildSuggestions() function calls _buildRow() once per word pair, this function displays each new pair in a ListTile. This allows you to make the rows more attractive in the next step.

3. Add a _buildRow() function to RandomWordsState

buildRow

4. Rather than directly calling the word generation library, update the build method for RandomWordsState to use _buildSuggestions ()

update build method

5. Now, update the build method for MyApp – changing the title and the home to be a RandomWords widget.

Replace the original method with the highlighted build method below.

RandomWords widget

6. When you restart your app, you should see a list of word pairing irrespective of how far you scroll.

restart your app

Code help: If the app is not working properly, you can use the code at the below provided link.

lib/main.dart

You have built a basic flutter app

To round it up, you’ve built a Flutter app from the scratch, added a third party library, experimented with hot reload, implemented a widget and an infinite scrolling list.

In part 2, we will look into steps on how to improve the app’s functionality by adding clickable heart icons to save the favorite pairings, add a new screen that contains the saved favorites, and modify the theme color.

 

Leave a Reply

Your email address will not be published. Required fields are marked *