FIRST STEPS (Hello World App!)

Let´s see how to create a new project and code some examples in order to see how Flutter works. Following posts should bring more complicated and interesting examples.

Inside VS Code, using command pallete just select Flutter: New Project . This process will scaffold main.dart file inside lib folder. Open this file and erase all its content.

Dart code start its execution from the main function that should be included in main.dart file.

void main() { }

Now import dart material library, this will provide a function to launch applications.

import ‘package:flutter/material.dart’;

That function is called runApp and accepts a Widget as parameter. A Widget could be compared to a View in Android or iOS to get an idea, of course there are differences among them. In Flutter the whole UI is built using widgets and everything is coded using just Dart, Android will use XML in view specification i.e.

Start creating an example about how using a Text Widget in order to show some text in an application.

Now run the application using VSCode by pressing f5 and selective an active device or emulator from the provided list.

As seen, the text appears over the status bar, this is because it is where Flutter (0,0) coordinates are.

Let´s add some padding to fix it. As Flutter UI is built using widgets, the padding should be a widget as well. This may sound weird if you have some previous experience on Android or iOS where padding is just a View attribute. What has to be done here is adding a new Padding Widget and nest our Text Widget as follows.

In the code above a Padding Widget is created, its padding is set to 24 using an EdgeInsets object and its child is nesting the Text Widget. Run the app and see how the text is placed lower.

Note: If Java previous background, const EdgeInsets.only(top: 24.0) instruction is a call to only, an EdgeInsets constructor. It returns an instance which is a constant at compilation time. This is a difference between Java and Dart, more information about Dart constructors here.

To place the text in the center of the screen, make use of another specific widget called Center.

Both Padding and Center Widgets share an attribute called child. This is in fact, one of the features that make Flutter so powerful. Each widget could have its own child, what let nesting widgets. A Text nested to a Padding nested to a Center i.e.