Eugene Saturow Head of Flutter

    Flutter Basic App Creating Tutorial: 5 Steps to Start Your Successful Product

    A Flutter basic app development can help your team understand whether the framework is an appropriate choice for a project, or present a simple product concept to investors without spending much time and money. In the article, we’ll offer the main steps to building the template app. 

    At Surf, we have successfully created 15+ Flutter-powered apps since the framework was first released in 2017. Our developers are ready to share some pieces of advice with business owners and their teams.

    Learn more about our developer team
    Meet Surf

    Step 1: Getting started to build your Flutter basic app 

    Set up the development environment before creating your Flutter basic app. Check the minimal system requirements, install an SDK and an editor. In this guide, we assume that you’ll be using Android Studio, but if it isn’t your preferred editor, try Visual Studio Code or another one instead.

    Install plugins. Open plugin preferences. Next, find a repository with an available copy of Flutter and Dart plugins and install them. 

    Detailed instructions for different devices. Source:

    Validate your setups with Flutter Doctor. It’s a utility that automatically checks your application for errors and warnings. It also provides you with a comprehensive list of everything that is wrong in the code, so it’s easy to find any potential problems before they cause issues later on down the line.

    It’s easy to make setups correctly when you use Flutter. The detailed tutorials will answer all possible questions to help your developer team create a successful product. The community is very active, and it is supported by Google—so the information is regularly actualized. 

    Step 2: Creating a basic application 

    To start your template app development, create a Flutter project called search_app as follows.

    flutter create search_app
    cd search_app

    The Dart code lives in lib/main.dart. You can edit the code from lib/main.dart to customize your own project name and start writing code. Here is an example.


    Then you are ready to run a simple app

    The steps below will help you work with the Flutter application functionality and understand more about its common logic. Having created a basic “Hello World” app, we will add some features for creating, showing and scrolling word pairings.

    Curious to see how a basic app turns to a powerful business tool?
    Read our case studies

    Step 3: Using an external package

    In this step, you’ll start using the open-source package “english_words. It contains a few thousand of the most used English words and some utility functions.

    With Flutter and Dart, your team gets numerous open-source packages and plugins to build the working process in the most efficient way. Developers all over the world contribute to the ecosystem, forming a strong community. 

    The Surf team is no exception. We create and share powerful tools for optimizing Flutter development while building software for business. To find out how it works, read our case study.

    Clicking the hot reload button will change what word is displayed on your screen each time you click it. If there are any words pairings saved from previous sessions, they’ll be replaced with new ones generated inside of Build Method which runs whenever MaterialApp needs rendering or toggling Platform settings via inspectors. 

    To implement the step, edit the code like described in codelabs.

    If everything was done right, instead of “Hello World” you’ll see a word pairing

    Step 4: Adding Stateful widget

    Stateful widgets maintain state that might change during the lifetime of the widget. To make a stateful widget, you need two classes: a StatefulWidget class and a State class. The StatefulWidget object won’t change, but the State object will stay around as long as the widget does.

    In lib/main.dart, after all of the code, press Enter a few times to start on a new line. In your IDE, type stful. The editor asks if you want to create a Stateful widget. Press Enter to accept. Two classes appear and the cursor is in the right place for you to enter the name of your stateful widget.

    Enter RandomWords as the name of your widget. The IDE will automatically make a State class when you use a RandomWords widget. It will be called _RandomWordsState. Adding an underscore in front of the name makes it private in Dart.

    Update the build() method in _RandomWordsState and replace return Container(); in that way:

    Remove the word-generation code from MyApp:


    Hot reload the app, and it will show a word pairing each time you reload or save it.

    Step 5: Adding a search box to filter the list by characters entered

    In this step, we’ll add a search box. With it, any characters  you enter will be filtered on the list.

    A similar functionality can be used in designing various business products: video streaming platforms, e-commerce, pharmacological, banking apps, etc. It can be customized for a businesses’ needs, making an app more convenient for users. 

    First, let’s add 100 different combinations of pairs to _suggestions array. 

    We’ll use these combinations for outputting to a scrollable list.

    Then add for the list a text field to search for the required combinations.

    To receive the text field values, we need to create an instance of the TextEditingController and add it to the text field. To make the list display the lines being looked for, you need to update the build method to redraw the display. You can do it by using the setState (() {}) method.

    You can also add a button next near the input field. The button will be used to update the list and fill it with new values.

    Below you can see the results.

    searching basic app flutter
    Scrolling a list of word combinations

    searching app flutter
    Word searching


    Now you know how to start a basic Flutter application and first setups. If you’re going to create a more complicated custom app or an MVP to present to investors, there can be more questions to clear up and  you’d better address them to experienced developers. As Flutter is a powerful tool, it would be a pity to underuse its possibilities.