Getting to know Flutter, and get going
Flutter builds apps by a composition of widgets. Now, then what are these widgets we keep talking about. A widget is a UI component and an object which describes part of any Flutter based app’s UI. Basically, anything you see on the screen with Flutter is a widget. Conversely, a widget is used for either displaying or arranging other widgets. For example, that app-bar we see at the top of any app window is a widget. Heck, the app window which is displaying the app-bar and the body content with other widgets itself is also a widget.
And again, remember: Everything in Flutter is Widget
A very noteworthy thing about flutter is that everything component displayed using Flutter is widget. The entire app itself is a widget. And, we nest widgets inside one another to build more complex layouts. So, basically Flutter uses Widget composition to build and then display UI elements onto a phone or any device screen.Also important is the fact that widgets are composed Declartive-ly in Flutter, meaning that we declare what widget goes where in our code. The place to declare our widgets is the build method wherein we declare our UI components/widgets one after the other and sometimes nested within one another. The build method then takes this Widget Tree and builds out a visual screen for us.
What is Dart ? And how is it related to Flutter ?
Dart is an object oriented language with syntax structure that is similar to C, Java and even JavaScript. Dart is statically typed so that the data types of variables is known at compile time. (There is a caveat to this with the dynamic data type in dart which allows you to assign any sort of data to a variable but the Dart team highly encourages developers to use static types like int, double, String etc.). Dart is compiled to native machine code when running on mobile devices like an iPhone or an android mobile device. For browsers, Dart is transpiled to JavaScript.And, why we keep saying Dart and Flutter or Flutter and Dart - this is because the Flutter framework utilizes Dart as its programming language to build apps. Flutter utilizes some great Dart language features to build and run our apps.
What is this Hot Reload I keep hearing about ?
This is one of the Hottest Dart language features and one of those things that Flutter uses to minimize code development and testing time. Dart comes with a Just-in-time (JIT) compiler which runs during program execution compiling the code on the fly. This allows for a technology called Hot Reload which only rebuilds that part of the code that has been modified and is very fast compared to say a cold reboot where to have to restart your whole application to check a change you made to say a text label.Also, Dart comes with an Ahead-of-time (AOT) compiler that creates a very optimized version of your code to be deployed into production and released into the wild so to say.
Hot reload vs Hot restart
Hot reload simply reloads the part of the app that has been modified and doesn't reset whole the state of the app. Hot reload is based off the current state of the app and it doesn't bother checking the initial state of the app. Meaning if you have a integer variable counter which increments by clicking a button and say its current value is 5. If you do a hot reload, the counter, if it is outside the area/section/widget that got modified, (the counter) doesn't change. You can try this with the default app that flutter builds for you when you first create an app using either command line or Android Studio.
On the other hand, Hot restart restarts the whole app and resets the whole state of the app so that all variables are set back to their initial state. Although both hot reload and restart are very optimized and run very fast, a hot restart takes a few seconds more than a reload.
A Stateful widget, in contrast, is created by extending the StatefulWidget class and can have properties of its own which have be modified as required.That is such widgets have state - those are a set of properties that can vary throughout the life cycle of the widget. And, when the state of the widget changes so does the UI that it represents. Note that stateful widgets can and often receive other properties via their build methods too (similar to stateless widget).
Stateless and Stateful widgets in Flutter
A Stateless widget is created by extending the StatelessWidget class. Such as widget can have some properties that are passed into them into their build method. But, the properties of a stateless widget are immutable and hence the UI as defined by a stateless widget is always displayed in the same way.In a way, we can say that such widgets do not have a state that can be modified.A Stateful widget, in contrast, is created by extending the StatefulWidget class and can have properties of its own which have be modified as required.That is such widgets have state - those are a set of properties that can vary throughout the life cycle of the widget. And, when the state of the widget changes so does the UI that it represents. Note that stateful widgets can and often receive other properties via their build methods too (similar to stateless widget).
Structure of a Flutter based project (at the beginning)
- pubspec.yaml file: this is a very important file as it contains all the configurations for the flutter framework to create and later build corresponding iOS and Android apps. Now, the very important thing to remember is that pubspec is a yaml file (stands for YAML Ain’t Markup Language).
- YAML is considered easy to read for both human and machines. YAML syntax uses proper indentation to separate sections and nest elements within one another.
- So, for example, if a label (a text followed by colon) is tabbed by two spaces relative to a previous line, this label and its value is considered a child of the previous line.
- The /lib folder: is where we as developers put all our code in. The lib folder comes with a main.dart file which contains some sample code and a main method to run the project.
- main.dart file: conventionally this contains the main function and contains the logic which triggers starting up of the app
Some theories around Flutter App Development
- Remember everything in flutter is a widget. Widgets can be nested and styled. One such example of widget is the MaterialApp. Also, every widget in Flutter is a class (as in an OOP class) from Dart language.
- MaterialApp widget: is sort of a container or top level widget which follows the material UI convention as shown here: https://material.io/. Some of the most important properties that MaterialApp widget/class has are as follows:
- home: points to the root (/) level window/widget/screen
- routes: is a map of route-names to widgets that are displayed when a particular route name is searched for.
- Now, MaterialApp in itself doesn’t show any UI components on the screen of a phone/tablet. We have to point it to routes via either the home or routes properties to display actual and concrete widgets that are displayed on the screen.
- Here is a very basic example showing the main function building and running a MaterialApp with a Center widget as a home screen and some more routes for navigation:
- Scaffold widget: is another layout widget that allows you to display visual elements. It can contain various UI components or so-called widgets in Flutter like Container, Center, Drawer and so on. Basically, Scaffold is a screen widget since it is utilized to build whole screens of the phone or tablet. Here are few important properties of this widget:
- appBar: used to display an app bar on the top of this Scaffold
- body: is where the primary content of this Scaffold is going to go. It is basically like the body section of an html document.
0 comments:
Post a Comment