Let’s Flutter Ep 1 — Setup
Welcome at the beginning of Let’s Flutter series. To start we need to download a few things and install a few others. Luckily we can handle it together.
First thing, we need IDE, so let’s start from Android Studio.
Android Studio
IDE (Integrated development environment) is our work station. It helps us with basic tasks like editing code, compiling and much more.
We can download it from here.
Flutter plugin
After installing Android Studio open plugin preferences (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux). Select Browse repositories, then select the Flutter (by flutter.io) plugin and click Install. It will also ask you to install Dart plugin. Click accept.
Next, start a new Flutter project, select Flutter Application and then in place of Flutter SDK path choose your place on disk in which you want to install it and click Install. When SDK is installed choose next and then finish.
Run the app
Wait for the project to complete loading and then on top of your IDE, you should see something like this at the top of the screen:
If your target device menu informs you that there’s no devices, go to AVD Manager — it’s a phone icon with a little green droid on it. Then create a new device, no matter what phone and system version. After a new device has been created choose it in target selector drop-down list and click run.
Your app is installing on device and it could take a while, especially for the first time. Next go to lib/main.dart (choose file in your file inspector on the left). Edit that file, for example change the text that reads ‘You have pushed the button this many times’ to something different like ‘You have clicked the button this many times’ and click ‘Hot reload’ icon (it’s that yellow lightning).
Hurray! Our setup is done and we’re ready to go.
Now I encourage you to read all gray comments — it’s a text after two slashes like that:
// this is code commentAfter reading, you can remove it without any influence on the code.
You probably wonder what is MyApp and all that stuff. So…
MyApp is the first widget of our three widgets. Image below helps understand basic structure of our app. Four main widgets are most of the time used the same way in all apps and are explained below. Widgets like Center, Column, Text, will be explained in next article.
MaterialApp is a widget which helps us implement proper theming based on material design.
MyHomePage is StatefullWidget. It means that this widget holds a state — in our example couter value is a part of this widget state, so if you minimize the app and maximize it, your counter value will be present. It also takes care of creating Scaffold.
Scaffold is a widget which provides us with an easy way to implement things like:
- Drawers
- Snack bars
- Bottom Sheets
For the quick recap. In this episode, you have learned how to setup your IDE, run the app and what is a basic structure of most apps. In the next episode we will cover basic UI widgets which will help us build our first app in episode three!
If you have any questions or suggestions, leave a comment!
Stay with us and learn this powerful technology. See you in the next episode.
