Flutter Vocab Definitions by Me
When I first learned Flutter and Dart, I didn’t know what “void main” was. I thought I was able to get rid of it and deleted it. Then, I realized that the app didn’t work without the “void main” function. I found out that it was like the destination of all my codes. I am a bit embarrassed to talk about it with others because it’s very basic. However, I wanted to be brave and share it with others so that someone who just started learning Flutter can gain confidence!
These definitions of Flutter terms are solely my interpretation. They might not sound professional, but I understood them this way. Hope this posting is helpful!
void main: This function is the destination of all your codes. You must have it to have a functioning app. The order to write is like below:
void main ➡️ MyApp
The code below is the first page you will see when you create a new Flutter project.
import 'package:flutter/material.dart';void main() {runApp(MyApp());}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}}
MaterialApp: The MyApp class returns MaterialApp. This is a must-have, too. It’s the foundation of your app. It sets the theme of your app and executes all the “settings” part of your app. Also, from this widget, you can start building your app.
pubspec.yaml: It’s where all the packages, assets, and fonts are stored. When you write a package/library here, your app can utilize the package/library. If you add images and fonts to the assets folder, you should write the path of the files down here to be able to use them.
Packages/Libraries: Flutter is an open-source software development framework. It means that you can use the packages for certain features with simple codes. Without them, we might have to spend a long time writing codes for certain features. If you want to add a URL launcher, you can search for a URL launcher package, copy the package’s name(&the latest version) and paste it in your pubspec.yaml file. Hit command+s(flutter pub get). Then you can use the code in a very simple way.
Class: Finally, class is where you can write codes to draw something on the screen. If you want to add a text, you will make a class of any name and return Text() Widget.
I just made a class called ConniesText that returns a Text widget with the content of “Hello.” You can see the code below.
class ConniesText extends StatelessWidget {@overrideWidget build(BuildContext context) {return Text('Hello',style: TextStyle(fontWeight: FontWeight.bold),);}}
Actually, each widget is written by someone else so that all Flutter developers can utilize them to develop an app/web. The class Text is written in a way that developers can use to write a customized text. Therefore, the Text widget is actually a class. That’s why we can make our own widgets by writing new classes that are reusable for our own app.
Widget: Widgets are the reusable classes from the Flutter framework. You usually start with the Scaffold widget.
Argument: Each widget has arguments. For instance, the Scaffold widget has appBar, body, drawer, and other arguments. You can add the AppBar widget next to the appBar argument and the SingleChildScrollView widget next to the body argument. The form is something like below.
class ConniesText extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Hello'),titleTextStyle: TextStyle(fontWeight: FontWeight.bold),),body: SingleChildScrollView(child: Text('How are you?'),),);}}
Debugging: The Debugging button opens up the phone view that shows how your codes are interpreted.
Hot reload(command+s): When you debug the codes to see how it looks, the Hot reload ⚡ (command+s)button allows you to see the UI right away. It will help you to know how each widget looks.
When you open a new Flutter project, the green commented text explains everything. However, I found the explanations quite difficult at first. Because I didn’t know how to code at all. I was able to know the meaning of each term step by step. I hope this posting helps you when you first open up a new Flutter project. Thanks for reading and have fun coding!
