Back to top

A Step by Step Guide to Building Your First Flutter App: Part 1

If you are curious about how Flutter works, and want 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 deselect 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 your app, 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.

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

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.

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.

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

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.

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.

(left) Android, (right) iOS

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



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

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

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

4. Now, remove the word generation code from MyApp

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.


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 take effect.

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


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.

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

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

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

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.

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

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


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.

Post a Comment