After installing Dart and Flutter in our system, we are ready to go. We’ll see how a beginner can use Flutter to design beautiful Application that will run in web, mobile and desktop at the same time, from a single codebase.
Not only that, we can build the same mobile application that will run in iOS and Android at the same time.
Moreover, Flutter is extremely beginner friendly software development kit, or framework. All you need to have a basic idea about object oriented programming and Dart language which acts as a tool for Flutter.
Firstly, let’s check that we have the latest flutter and dart in our system.
Secondly, use your terminal and issue the following commands one after another.
dart --version
...
flutter --versionFinally, it comes up with the following output for the Dart programming language that we need for Flutter.
dart --version
Dart SDK version: 2.14.4 (stable) (Wed Oct 13 11:11:32 2021 +0200) on "linux_x64"Next, we get informed about our latest Flutter version.
flutter --version
Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18116933e7 (8 weeks ago) • 2021-10-15 10:46:35 -0700
Engine • revision d3ea636dc5If you’re a beginner, and having little, or no knowledge of Dart programming, one question will definitely come to your mind.
Does Flutter require coding?
The answer is yes.
To start with you don’t have to code a lot. But as you progress, you’ll see that good Dart programming knowledge will help you to adopt Flutter fast. Moreover, you can build complex Flutter apps quite easily.
However, all said and done, let’s learn to design Flutter Application step by step. Slowly, but definitely.
At the very beginning you don’t have to code. We must have a good idea about what Widgets are and how do they play important role in building any Flutter Application.
Therefore, in this section we’ll only learn two things to use Flutter as a beginner.
- What is Widget in Flutter
- How we can use Widget to build our first Flutter Application.
Let’s answer the first question first.
Widget is a class that describes how the Flutter application should look like.
Consider the Center Widget. We can use Center Widget to keep its child Widget in the middle of the screen.
As we progress, we’ll learn that every Widget either has a child Widget, or has multiple Widgets as its children.
That means, the parent Widget that initially comes up with a child Widget may have multiple Widgets as its children. Then each child belonging to the children Widgets may have more Widgets as its child or children. And the Widget tree gets bigger as we go down.
This Widget tree starts with a ROOT widget. As a result, the “main.dart” file is our entry point where we declare: run the application.
import 'package:flutter/material.dart';
void main() {
runApp(
const OurFirstApp(),
);
}OurFirstApp is the custom Widget that we’ll build with other Flutter Widgets, such as Center, Container and Text.
As a result the code looks like the following.
class OurFirstApp extends StatelessWidget {
const OurFirstApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: const EdgeInsets.all(5),
child: const Text(
'Wlcome to our first flutter application',
textDirection: TextDirection.ltr,
),
),
);
}
}Now we go through the above code line by line to understand how it works.
Firstly, the custom Widget OurFirstApp that we’ve declared and passed through runApp() method, is a class which extends StatelessWidget.
As we progress, we’ll see what is StatelessWidget, and what is StatefulWidget. But at present, let’s concentrate on the term “extends”.
It means, our custom Widget OurFirstApp can use many properties and methods of a StatelessWidget that Flutter gives us to use to build our Application.
As a result, the next thing that attracts our attention is build() method that passes an object “context”. Moreover, it returns a Center Widget.
From here we see that a small Widget tree has grown.
Secondly, the Center Widget has a child Widget Container which again has a child Widget Text that passes a String value through its constructor. Not only that, it has a named parameter “textDirection” that declares that the direction of Text should from left to right.
Now we can run our first Flutter Application, and see the screenshot.
By the way, if we’re absolute beginners without having any prior programming knowledge, we’ve already encountered a few unknown words, such as class, constructor, method, named parameter, etc.
Therefore, it is advisable, that we should learn the basic Dart programming language and after that we start learning Flutter. As a result, we’ll pick up Flutter quite easily.
In the next section, we’ll learn what are basic Widgets that we always need in building a Flutter Application. Then we’ll dive deep to learn and understand more complex layout and design techniques.
Leave a Reply