Go to the flutter installation folder where the Flutter is installed. In my machine the flutter is installed within the Development directory.
cd Development export PATH="$PATH:`pwd`/flutter/bin" flutter --version
The above command starts flutter.
Open VSCode Invoke "View > Command Palette" Type "Flutter: New Project" Give a name to the project Choose the project directory where you want to save your project
Open lib/main.dart file and delete everything. Then paste the following code. The following example is a basic "Hello World" example.
import 'package:flutter/material.dart';
void main() => runApp(new HelloWorldApp());
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Center(
child: new Text("Mr. Crazy!"),
),
),
);
}
}
Go to your project directory in the terminal and then run the following command:
flutter run
This command will do everything and makes the app running on your phone device after a few while. If you make any changes to the file and want to see the effect instantly press r to hot reload and R to hot restart.
import 'package:flutter/material.dart';
In Flutter almost everything is a widget, widgets are the building blocks of Flutter apps, and luckily a variety of widgets are offered by Flutter: Buttons, input fields, lists, tables, dialogs, tab bars, card views, … You name it! Here we’re importing the library material.dart containing a rich set of material widgets that implement the material design guidelines.
void main() => runApp(new HelloWorldApp());
The main function acts as an entry point of the app. When an app starts it first calls the main method.
Here is the definition of the runApp() method.
void runApp(Widget app) {
// ---
}
The runApp method returns nothing. And it takes a widget as a parameter. This widget is used to draw the screen. It fills the entire screen by default. If you wish to align your widget to one side of the screen (e.g., the top), consider using the Align widget. If you wish to center your widget, you need to use the Center widget.
Calling runApp again will detach the previous root widget from the screen and attach the given widget in its place. The new widget tree is compared against the previous widget tree and any differences are applied to the underlying render tree, similar to what happens when a StatefulWidget rebuilds after calling State.setState.
The above method runApp() takes a widget as a parameter which will be used to draw on the entire screen. And that's why we need to provide a widget to the runApp() method. We are doing this by creating a widget on our own. And then passing an instance of that widget to the method runApp().
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Material(
child: new Center(
child: new Text("Mr. Crazy!"),
),
),
);
}
}
The above code is used to create a new widget. The class extends the StatelessWidget. But why? In Flutter you can create two types of widget.
Stateless widgets are those who do not requires any type of variable or states to keep its local data which might be changed later. On the other hand, stateful widgets are those who keeps its private data or states.
In the example above we don't have any data to store. And that's why are are extending StatelessWidget to create a stateless widget.
When you are creating layouts you need to define the structure of your layout somewhere in the code. And the predefined method of StatelessWidget class is the place where you need to define that. On the other hand, this method describes the part of the user interface represented by this widget. This method is predefined in the StatelessWidget class and our derived class must override it. This method must return the definition of the widget, or the structure of the UI.
The widget that are are returning is:
new MaterialApp(
home: new Material(
child: new Center(
child: new Text("Mr. Crazy!"),
),
),
);
In the structure, firstly we are creating a new instance of MaterialApp. But why? In Flutter Material app, most of the time you will be writting this code very often. This code does a lots of job and one of the primary material widget. By creating this widget we are creating a material app and wrapping its core functionality within the app. There are a lot of core stuff, or technical stuff which requires a low level dart concept to deal with. These technical solution and common workaround is wrapped within the material design so that the developer doesn't have to write everything from the scratch. Instead of reinventing the wheel the developer can focus on writting app rather than dealing with these common stuff everytime they write an app. For example, the localization, the direction of text, AnimatedTheme, GridPaper and other numerous thinigs already set by this widget so you don't need to care for all these stuff.
This widget takes a lots of named parameter which you will learn as we walk through the tutorial. In the above example, there is only one named parameter called home which is assigned with another widget. But first let's see what home parameter is doin' here?
The MaterialApp widget configures top level Navigator widget. In other words, the MaterialApp extends the core Navigator widget and modifies its functionality. This gives us the functionality to create a routing mechanism of multiple pages. The home named parameter is used to specify the layout of the first page that will be appeared when the app starts. So this parameter specifies the home page.
And the following is the structure of our home page:
new Material(
child: new Center(
child: new Text("Mr. Crazy!"),
),
),
Our home page starts with Material wrapper Widget. This widget is used to tell flutter that we are going to use material guidelines. This widget does a few things to make the UI looks better and pleasing. For example, it configures the Clipping, Elevation, Ink Effects etc. These are very low level stuff that deals with pixel. You can learn these things later or leave it completely. Just remember to use the Material widget as the parent widget whenever you are going to use any widget that has material look and feel and functionality. It's like a Container widget in native flutter.
The Material wrapper widget has one child widget which is Center. It places its content to the center. Now Center widget contains one chlild widget which is called Text widget. The Text widget is used to show a piece of text on the screen.
Note that the above example uses new operator to ceate a new widget instance. But this is totally optional. So the following example is valid:
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Material(
child: Center(
child: Text("Mr. Crazy!"),
),
),
);
}
}
In this tutorial you have learnt :