Flutter: Building your first app
Updated: Jun 21, 2019
Introduction
Until this point, we have set up Flutter and ran the flutter sample app on our devices, but we have not understood the code behind this app. So, now we will build our first Flutter app from scratch. The app we are going to build is called "I Am Rich".
If you haven't heard of the story then, basically in the early days of the App Store a guy called "Armin" launched an app called "I Am Rich" with the maximum price possible, that was $999. The app basically does nothing except for showing a picture of red ruby. He decided to launch it as "Art & Lifestyle" app which he suggested that very rich people will buy to show to other people how rich they are.
But, this is a perfect app to get started building our first flutter app as it will help you to learn the basic concepts of a Flutter app. The IDE that I will be using for this project is VS Code. So, let's get started coding.
Creating the app
I have shown how to create a new flutter app both in Android Studio and VS Code in my previous article, so if you face any problem creating new Flutter app refer to my previous article.
So, first of all, create a new Flutter app called "i_am_rich". Now, navigate to the directory, "i_am_rich" and open it in your code editor [if you are using Android Studio then it will automatically open it for you].
The starting point of a Flutter app is the "main.dart" file present inside the "lib" folder in your project directory. We'll first select the entire code [ "command + A" (MAC) OR, "Ctrl + A"(Windows) ] present in the main.dart file and delete it, because we will be writing the code from the scratch.
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 a package containing the Material Design Widgets. For most of the apps where you will be designing the User Interface (UI), you have to import this package.
Now, let's define the main function and inside it, we have to add "runApp( )" function which will run the main screen of the app. Define a widget called "MaterialApp" which will contain the main screen UI of the app.
In Flutter every UI component is referred to as a Widget.
After defining the "MaterialApp" widget you will get a red mark on the "test" folder inside your project directory [ just under the "lib" folder ] because the main screen widget is defined as "MyApp" and not as "MaterialApp". So, right click and delete the "test" folder as we are not going to define any test for this project.
While writing Flutter code always end each statement with a comma ( , ) at the end, because there is a beautiful formatting present in flutter called "Dart Formatter" which will make your code more readable and organized.
1) In Android Studio, you can use this function by right clicking anywhere inside the code editor and selecting "Reformat Code by dartfmt".
2) In VS Code, you can use this function by using a keyboard shortcut " alt + shift + F ".
The "MaterialApp" widget can have many properties. We'll only use the "home" property to define the "Scaffold" which will basically cover the entire main screen of the app. If you want to know more about Scaffold then check out the documentation here.
This Scaffold contains a number of useful properties to make your app UI more beautiful. The first one we will be using is "appBar" property to define the "AppBar" widget. If you run the app now then you will see an empty app bar with blue background [which is the default color] and body with white background.
Now, let's fill up the app with a title and add a nice color to it. Inside AppBar widget, define a property called "text" which will take a "Text" widget containing a string, i.e., the title of the app "I Am Rich". In Dart, you can use either single quotes or double quotes to define a string. Also, set a color to the AppBar by defining the property called "backgroundColor" containing "Colors.blueGrey [900]", you can directly access any material color in flutter by using "Colors" class. So, you do not need to enter hex color codes anymore (as in Android App Development) to specify any material color in flutter.
TIPS: You can see that we are using a number of properties present in each widget, which vary from widget to widget. So, how can you remember all the properties and what will happen if you forget one. You don't need to remember any property of any widget, just use the keyboard shortcut "control + Space" to bring the list of properties available for that particular widget at that point of time.
Finally, we have to add the image of a diamond to the body of the Scaffold. First of all, create a new folder in the app directory called "images" and insert the image in this folder. You can download the image of diamond from here.
To import and use the image in your app you have to go the "pubspec.yaml" file present in the app directory. This is the package manager of Flutter.
Here, you can find the app name and description of your Flutter app. If you scroll down a little bit you will see a commented out "assets" which is showing a sample that how to add a path to your assets in pubspec. So, just uncomment it [using " command + / " (MAC) or, " Ctrl + / " (Windows)] and change the path to where you placed your diamond image.
You can either define the path just as " - images/ " or " - images/diamond.png ". But it is better to use the first one as if you have to use more than one image in your app then it will automatically import all the images present in your "images" folder. Now, press "Ctrl + S" to save the file which will automatically run "flutter packages get" command to get the packages. Make sure that it ends with "exit code 0", which means that the operation is successful.
It's time to add the image in the UI of the app. Define another property of the Scaffold called "body" and inside it place a widget called "Image" having a property "image", which takes an "AssetImage" as a widget containing the path of the image, i.e., " images/diamond.png ".
Also, add color to the Scaffold to make it more attractive.
So, our "I Am Rich" app is done.
If you need any detailed information about a widget or if you want to experiment with a new widget then head over to the "Widget catalog" by clicking here. This website contains all the widgets of Flutter well organized for your comfort.
What's coming next ?
In my next article, I will compare Stateful and Stateless widgets, which is a very important concept of Flutter. If you do not want to miss my next article and the articles that I will be publishing in the future, please subscribe to my blog.
There will be at least one article added to the blog every week. If you have any doubt regarding this article feel free to ask in the comments section below.