How Flutter and Dart work Together

Beginning Flutter with Dart

https://leanpub.com/beginningflutterwithdart

How Flutter and Dart work together? We know that Flutter works on the Dart platform, uses Dart programming language, but to understand Widget library, we should know the language basics of Dart.
If we have an introduction to class and object-oriented programming paradigms, in the light of new insights, we can define Flutter more precisely.
Flutter is a tool that builds native cross-platform (here cross-platform means for iOS and Android platforms, both) mobile applications with one programming language Dart and one code-base.
Flutter has its own SDK or Software Development Kit that converts our code to native machine code. SDK also helps us to develop our application more eloquently.
Due to the presence of the SDK Flutter works as a framework or Widget library that produces reusable User Interface or UI that builds different types of blocks, utility functions and packages.
Although Dart is an object-oriented programming language, for Flutter its role is more focused on front-end specific. It means with the help of Dart we will build different types of User Interfaces.
As we progress we will understand this core concepts more and more while building our first Flutter application. Understanding Dart language basic is important as it helps Flutter to build UI as code. Since Flutter is mainly different types of Widget trees, we have to write different types of code in Dart.
The advantage of Flutter is that it provides iOS specific code, as well as Android specific code from a single code-base. When we run a Flutter application on our smartphone, we actually see a bunch of Widgets. From the top to the bottom of the mobile screen Flutter divides its Widgets accordingly.
We may think these Widgets as controls that we create by writing code in Dart. In fact, we do not have to do the low level plumbing each time. Flutter framework and Widget libraries provide us the required assistance.
All we need to do is to memorize common rules of building basic Widgets, and moreover, we need to understand the core Dart language basic like function, class and object-oriented style of programming, different types of parameters and their roles in Flutter Widgets, etc.
As we have said, any Flutter application is a bunch of Widgets, we also mean that what we see on the mobile application is Widget trees. However complex application it appears to be, it is actually a bunch of Widget trees.
Since there is no Visual Editor code assistance, there is no drag-and-drop facility. We have to code the entire application. Although it sounds daunting at the beginning, in reality, it is not. Because Flutter SDK has come up with almost every kind of solutions, we just need to add those functionalities.
We will find different types of buttons, text boxes, text decorations available. The Flutter API comes up with two distinct facilities; one is Utility functions, and the other is Widget libraries. They are written in Dart, and Dart complies every code we write with the help of SDK, and finally we get the native code for iOS and Android.
The iOS platform has different types of buttons, so the Android. Flutter tackles this problem in its own way, it has a custom implementation. Every pixel is drawn on the mobile screen. For that reason, the platform specific limitations are tackled without any hitch.
If we think of a minimal Flutter app, it calls the runApp() function inside the main() function. We could have called the runApp() function with a Widget. Instead we passed a parameter MyFirstApp(), which is a class that extends ‘StatelessWidget’ class (code 1.22).
Now we are going to change the code 1.22 to get an idea of how Flutter can run minimally based only on runApp() function.

import 'package:flutter/material.dart';

void main() {
runApp(
Center(
child: Text(
‘My First Flutter App is running!’,
textDirection: TextDirection.ltr,
),
),
);
}

We have run the Flutter default Center() class constructor inside the runApp() function. It automatically changes the look of the virtual device.
Of course, this is not the way one should build a Flutter app. We will also do not take this way. However, getting an idea of how a Flutter app runs will not hurt the learning process.
The above image gives us another idea of writing our code, which is preferable especially for macOS and Linux users. We can run the virtual device from Android Studio, and after that we can open the same Flutter project using Visual Studio IDE. The virtual device will automatically synchronize with Visual Studio (VS); the advantage of using VS IDE is it gives you chance to ‘hot reload’ property. Each time we change the code, we will just click the ‘hot reload’ button that hangs loosely over the VS IDE. We can immediately see the change on the connected Virtual Device.
Now, we will get back to our old code snippet that gave us an ugly looking text output (Figure 1.9).
We will start building our code from the following code that we had seen in this code snippet:

import 'package:flutter/material.dart';

void main() {
runApp(MyFirstApp());
}

class MyFirstApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(home: Text(‘My First Flutter app from scratch…’),
);
}
}

Let us try to understand how our first Flutter Application ‘MyFirstApp’ gives the text output. First of all, it is a generic class that extends another Widget class StatelessWidget(). The ‘material.dart’ file has defined all these in-built classes.
Inside our ‘MyFirstApp’ class we have called a Widget class method build() that passes an object ‘context’ that is an instance of class ‘BuildContext’.
As we have said earlier, in Dart, everything is Widget. For that reason, inside the build() method of Widget class we have returned another Widget ‘MaterialApp()’, which draws everything from the ‘material.dart’ file.
We need to study this part of code more closely to know a few key concepts of Dart language. A function sometimes passes positional argument or parameter; and, sometimes a function passes named argument.
Look at this line of code:

Widget build(BuildContext context)

Here, the ‘context’ object is a positional argument. But the ‘MaterialApp()’ Widget passes named argument, like this:

return MaterialApp(home: Text('My First Flutter app from scratch...'),

We need to understand this key concept, first. After that we will again come back to our Flutter project and keeps on building our first platform independent mobile application using Flutter.