Building your first app in Flutter
Getting Started With “The I’m Rich App” Project in Flutter
Hello, there let us build our first app using Flutter. I am very excited and hope you are too!. In my previous blog, I gave a slight introduction of Flutter and now things are going to get real. Yes !!! we shall build our very first app in Flutter.
No, it's not the “Hello World App”. We are going to build the “I am Rich” app.
Yes, so this app will make you rich! is it so?
No!, so basically this app does nothing but just displays an image when you open the app, and then you have the title of the app named “I am Rich”, So if it doesn't make you rich then what has it got to do with the title.
The “I Am Rich” Story
So let me explain to you the story behind “I am Rich”. Basically in the early days of the App store, a guy named “Armin” launched an app called “I Am Rich” with the maximum possible price, which was $999.99. The app basically does nothing except for showing a picture of red ruby.
He decided to pitch it as an “Art & Lifestyle” app and suggested that very rich people will buy to show other people how rich they are. Although later it was removed from the app store nearly eight people had already bought this app! Sounds crazy?
Anyway, this is a perfect app to get started, in building our first flutter app as it will help us to learn the basic concepts of a Flutter app.
ANDROID STUDIO AND SETUP
Before we start, here are the prerequisite steps for you to set up your environment.
- Download and install Android Studio
- Install Flutter SDK
- Download Android Emulator/Use your smartphone to Run the App
So once you are ready, fire up your Android Studio.
Click on “Create New Flutter Project”, and then select Flutter Application and then click next to name your app. Make sure you name it “i_am_rich”, and leave the rest things as it is. Finally, click on “Finish”.
Once you do that, Android Studio will generate some boilerplate code for your Flutter project. Note that our source code (on which we will be working) will be present inside the lib/ folder and the main entry point will be the main function inside main.dart.
Clear the existing code in the main. dart file, and include the following code, to begin with :
Alright now coming to the code, the main function is our entry point which runs our MyApp widget. MyApp is a stateless widget which means the data is not directly stored/ maintained/changed from the MyApp widget; we will be doing that in various child widgets.
We provide a scaffold and set its background color to blueGrey, and include an AppBar.
Scaffold: It is a blank screen, basically implements the basic material design visual layout structure.
AppBar: It displays the toolbar widgets, icons, title, actions, etc. It is a fixed height widget at the top of the screen.
So we have created an empty app with the background color blueGrey and with an AppBar along with the Title “I Am Rich”.
Now it's time we include the image we want to display in our app. Firstly create a folder as assets in your project folder. Now download or place your image in this folder.
Your folder structure will look like this :
In order to use this image in our project, we need to first add them to the pubspec.yaml file! For those of you who are wondering about what is pubspec.yaml file, here is a description :
“Every pub package needs some metadata so it can specify its dependencies. Pub packages that are shared with others also need to provide some other information so users can discover them. All of this metadata goes in the package’s pubspec: a file named pubspec.yaml that’s written in the YAML language.” — Dart documentation
So let's add this line to our pubspec.yaml file,
assets:
-assets/doge.jpg
(The filename of the image is doge.jpg in my case) as you can see the flutter team has already commented on the code for our understanding and help. Please be careful with the indentation in writing the YAML code. After writing this line, click on Pub get, and then you are good to go.
Now we add the body inside the Scaffold. It will display the main or primary content in the Scaffold. Now update your existing code with the following code :
From the code, we can see that the body contains the Image widget, inside which we have the AssetImage, in which we specify the pathname of our image as a string.
Flutter provides us two options to include images in our project one is the above-mentioned AssetImage, we can also use the images directly from the internet without saving them into your project, using NetworkImage.
Once this is done, run your code, and we have our app ready! Tadaaaa :)
Congratulations !!! You built your first Flutter App.
I hope you liked the article. Flutter is really amazing.
The best way to start learning anything is by building something. You learn, you apply, and build. Feel free to reach out to me anytime if you want to discuss something. You can find the complete code in my Github Repo.
Thanks for reading!
If you enjoyed the article make sure to show me some love by hitting that clap 👏 button!. See you in my next article :)
Don’t forget to follow The Lean Programmer Publication for more such articles, and subscribe to our newsletter tinyletter.com/TheLeanProgrammer
