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.
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.
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_appThe 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.
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.
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.
Conclusion
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.
