An Introduction to Flutter: A Beginner’s Guide
I’ve been hearing about how amazing Flutter is and I’ve decided to try it out to learn something new.
Flutter is an open-source cross-platform mobile development framework developed by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia, and the web.
It was a good experience learning flutter and after that I keep on moving further learning more about flutter. The process wasn’t smooth enough some of the details were not explained properly. Also, since everything was new to me (the platform itself, programming language, approaches, and even mobile app development), the lack of those details was painful.
I noticed that reading the documentation on Dart, Flutter, and all of its widgets wouldn’t be a good idea as it would be too time-consuming. So I thought it would be amazing to have a short guide for the beginners to get started with flutter.
About The Guide
In this post, I’ll try to explain the basic details. We’ll start from scratch and create applications sorting out every step we do. We will have a look at all basic widgets.
First of all let’s start with installing Flutter and setting up an editor.
One of the best things about Flutter is that it lets you use your favorite IDE for development. Flutter is relatively easy to set up and depending on what OS you’re using; you can check out the steps in this official Flutter tutorial: https://flutter.dev/docsget-started/install. It has first-class support for Android Studio, IntelliJ IDEA, and VS Code.
I’ll keep it short, to save your time. For the most curious of you, I’ll put useful links around the text.
Creating the app
1. Invoke View > Command Palette.
2. Type “flutter”, and select the Flutter: New Project.
3. Enter a project name, such as FlutterDemo, and press Enter.
4. Create or select the parent directory for the new project folder.
5. Wait for project creation to complete and the main.dart file to appear.
First of all, you should run the above command to check if there are any dependencies you need to install to complete the setup. By default, it contains some sample code, remove all the content, and start coding.
You must have heard about widgets in Flutter. Most of you might be thinking about what are widgets? How can we use it?
Remember, in Flutter everything is a Widget.
Widgets are the basic building blocks of a Flutter app’s user interface. Widgets describe what their view should look like given their current configuration and state. When the state of the widget changes, widget rebuilds its description to show the minimal changes in the widget tree to transition from one state to another.
Widgets form a hierarchy based on the composition they work with. Each widget can be nested inside another widget and inherits properties from its parent widget. The root widget handles the state of the app.
Widgets come in two flavors: stateless widget and stateful widget. Check out the documentation.
Stateless Widgets are those whose state does not change. As the name suggests it does not change its state whenever and action is performed on the screen. Example: button, an image, or an icon…
Stateful Widgets are those whose state changes whenever any action is performed on the screen. The stateful widgets get to rebuild and change their states. StatefulWidgets can hold the current state of a Widget. Instead of a widget build method, a Stateful widget has a State build method which calls each time we explicitly call setState. Example: pageview, bottom navigation bar, radio button….
We are going to take a look at a few basic widgets:
For starters, let us create our first app.
What is Scaffold?
A Scaffold Widget provides a framework that implements the basic material design visual layout structure of the flutter app. It provides APIs for showing drawers, snack bars, and bottom sheets. Have a look at its constructor and the properties it has.
Container
The Container widget is used to contain a child widget with the ability to apply some styling properties.
For more properties of Scaffold and Container — Check out my Github.
Row, Column & Stack
Row:
A row is a widget used to display child widgets in a horizontal manner.
Column:
A Column is a widget used to display child widgets in a vertical manner.
Stack:
The Stack widget allows us to put up multiple layers of widgets onto the screen. The widget takes multiple children and orders them from bottom to top. So the first item is the bottommost and the last is the topmost.
Here we will take an example for Stack using different widgets like AssetImage, Text, Rows, and Column.
Adding an AssetImage in Flutter:
- Create an assets/images folder in the root folder of your app.
- Add image to assets/images/stack.jpg folder.
3. Register the assets folder in pubspec.yaml
4. Use the image in code
- Get the asset in an Image widget with
Image.asset('assets/images/stack.jpg').
In the following example, we have used stack and added a row, an asset image, and a column as children of the stack widget.
- Positioned and Align widgets are used to set the position & alignment of a widget.
With all these basic widgets you will get an idea about how widgets in flutter are used.
If you have reached this far, give yourself a pat on your back!
