One week ago, released its first bêta version at the MWC in Barcelona. The main purpose of this article is to show you how to develop a first fully functional application with Flutter. Flutter This article will be a little bit longer than usual, because it will go through install process and also teach how Flutter works. We will develop an application displaying to the user a list of posts retrieved from the . JSONPlaceholder API What is Flutter? Flutter is an SDK that allows you to develop native applications for Android, iOS or the next OS of Google: Fuschia. It uses Dart as main language. programming Installing required tools Git, Android Studio and XCode In order to get Flutter, you will need to clone the official repository. You will also need Android Studio if you want to develop applications for Android, and XCode if you want to develop applications for iOS. IntelliJ IDEA You will also need IntelliJ IDEA (OK, it is not required, but much more useful). Once installed, add the Dart and Flutter plugins to IntelliJ IDEA. Retrieve Flutter All you have to do is to clone the official repository of Flutter: git clone -b beta https://github.com/flutter/flutter.git Then, you will have to add the path to the bin folder of the repository to your PATH environment variable. That’s it, you are now able to develop applications with Flutter. Even if it’s enough, I really went quickly through the installation procedure in order not to make this article longer than needed. If you want a more complete guide, go to the . official documentation Creating the first project Let us now open IntelliJ IDEA and create a first project. In the left panel, choose Flutter (if it is not available, please install Flutter and Dart plugins to your IDE). We will name it as follow: : feedme Project name : A sample JSON API project Description : net.gahfy Organization : Kotlin Android language : Swift iOS language Running the first project and discovering Flutter The editor of IntelliJ opened a file named , which is the main file of the application. If you do not already know Dart, don’t panic, it is not required for the rest of this story. main.dart Now, plug an Android or iOS phone in your computer, or run an emulator. You are now able to run the application by clicking on the run button (with a green triangle) at the top right: Click on the bottom floating action button in order to increment the number displayed. We will not go deeply into he code for now, but we will instead discover some fun features with Flutter. Flutter Hot Reload As you can see, the primary color of this application is blue. Let us change this color to red. In the file, look for the following code: main.dart In this part, replace by . Flutter allows you to hot reload your application, meaning that nothing will be modified from the current state of the application, but our new code will be applied. Colors.blue Colors.red In the application, click on the + bottom floating action button to increment the counter. Then, on the top right of IntelliJ, click on the Hot Reload button (with a yellow lightning). You will see that the primary color is now red, but the counter remains with same number. Developing our final application Let us now remove all the content of the file. What a better way to learn. main.dart Minimal application The first thing we will do now is to develop the minimal application, meaning the minimum code to be able to run it. As we will use Material Design for the design of our application, the first thing to do is to import package containing the Material Design Widgets: Let us now create a class extending to make an instance of our application (we will go deeply into what a is later in this article): StatelessWidget StatelessWidget IntelliJ IDEA displays MyApp underlined in red. Actually is an abstract class requiring the implementation of the method. To do so, move your cursor on MyApp and then press Alt+Enter. StatelessWidget build() Now that we implement the method we can see that it must return a instance. We will return a as we are building the application here. To do so, add the following code in the method: build() Widget MaterialApp build() The documentation of tells us that at least , , or must be initialized. We will only define property here. It will be the home screen of your application. Because we want our application to be a basic Material Design layout, we will set as an empty : MaterialApp home routes onGenerateRoute builder home home Scaffold The last thing to do is to tell that when we run main.dart we want to run the application. To do so add the following line right after import statements: MyApp You will now be able to run your application. It is only a white screen without any content. So the first thing we will do now is to add the user interface of the application. Developing the User Interface Few words about states We may develop two kind of user interface. A user interface which is not regarding to the current state of the application, or a user interface regarding it. When talking about states, we are meaning that the user interface may change when an event is triggered. And this exactly what we will do: Display the circular progress bar- Run the action to retrieve posts Launching application event:- - If success, display the list of posts retrieved- If failure, display a Snackbar with failure message on an empty screen End of API request: For now, we only used which are, as you can guess, not regarding the state. So lets start by initializing a . StatelessWidget StatefulWidget Initializing StatefulWidget Let us add a class extending to our application: StatefulWidget As we can see, we have to implement the method which returns a object. So let us create a class extending : createState() State State As we can see we will have to implement method returning a Widget. In order to do so, let us first create an empty widget ( ) : build() Row We actually return a object as the toolbar of our application will not change nor depend on the current state. Only its body will depend on the state. Scaffold Let us now create a method that will return the Widget to display regarding the current state, and a method that will return the Widget containing the centered circular progress bar: If you run the application now you will see a circular progress bar in the center. Displaying the list of posts We will start by defining the object as it is define in the JSONPlaceholder API. To do so, let us create a file with the following content: Post Post.dart We will now define a class in the same file to degine the current state of the application: PostState All we have to do now is to define a method in the class to get the list of from the API. We will see how to do this later because for now we will only return a static list of asynchronously: PostState Post Post Now that it is done let us go back to our class in the file to see how to use the class we just defined. We will start by initializing a property in the class: PostPageState main.dart postState PostPageState If IntelliJ IDEA displays underlined in red, this means that the class is not defined in the current file. So you will have to import it. To do so, move the cursor to the red underlined part and press Alt+Enter, then choose Import. PostState PostState Now, let us define a method for returning a Widget when we successfully get the list of : Post All we have to do now is to edit the method to display this Widget if we successfully get the list of Post: getCurrentStateWidget() Last thing to do, and maybe the most important one, is to run the request in order to retrieve the list of Post. To do so, we will define a method and call it when initializing the state: _getPosts() Et voilà. You can run the application in order to see the result. Actually, there is almost no chance that you see the circular progress bar, even if it is actually displayed. This is because retrieving the list of Post is so fast that it is disappearing almost instantly. Retrieving the list of Post from the API In order to be sure that the circular progress bar is actually displayed, let us retrieve the post from the JSONPlaceholder API. If we take a look at the , we can see that it returns a JSON array of Post. post service of the API So we will have to start by adding a static method to Post class in order to convert a JSON array of Post to a list of : Post We now only have to edit the method retrieving the list of in the class to actually retrieve it from the API: Post PostState You now can run the application and you will see the circular progress bar more or less briefly depending on your internet connection. Displaying the list of posts For now, we only display the number of posts retrieved but not the list of Post as we expect. To be able to display it, let us edit the method of the class: _getSuccessStateWidget() PostPageState If you run the application again you will see the list of posts. Handling errors We have one last thing to do: handling the errors. You can try to run the application in flight mode, and you will see that you will see the circular progres bar indefinitely. We have to return an empty error state: Now, when an error occurs, an empty screen is displayed. Feel free to change the content in order to display en error empty state screen. But we sayed that we want to display a Snackbar with ability to retry when an error occurs. To do so, let us develop a and a method in the class: showError() retry() PostPageState As we can see we need a in order to get the which is allowing us to make the Snackbar appear and disappear. But we have to use the of a object in order to get the . To do so, we will have to edit the method of the class: BuildContext ScaffoldState BuildContext Scaffold ScaffoldState build() PostPageState Feel free to now run your application in flight mode, the Snackbar should be displayed. If you leave flight mode and then click on RETRY, you should see the list of Post. Summary So we learned that developing a fully functional application with Flutter is not something that much hard. Every elements of Material Design are provided, and you developed an application with it on both Android and iOS platforms. All the source code of this project is available on the . Feed-Me Flutter project on GitHub If you liked this article, feel free to to get notified about next ones. follow me on Twitter

Google

Initialized

Instantly

Twitter

Yellow

Too Long; Didn't Read

Making security fun one episode at a time

Develop your first Application with Flutter

Too Long; Didn't Read

Companies Mentioned

Gahfy 🇫🇷 🇹🇭

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Develop your first Application with Flutter

Too Long; Didn't Read

Companies Mentioned

Gahfy 🇫🇷 🇹🇭

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES