Fundamentals of Flutter

To crate an empty space in the color you want: Use “Container” function

import 'package:flutter/material.dart';
void main() {
  runApp(Container(
    color: Colors.blue,
  ));
} //in this situation the page is full of blue.

To write on the space that you just created: Use “Text” widget

import 'package:flutter/material.dart';
void main() {
  runApp(Container(
    color: Colors.blue,
    child: Text(
      "Hello",
      textDirection: TextDirection.ltr,
    ),
  ));
} //ltr means "left to right", rtl means "right to left"
//child is a function that allows us to crate Widgets in another Widgets

To change the style of the text you have written: Use “TextStyle” object

import 'package:flutter/material.dart';
void main() {
  runApp(Container(
    color: Colors.blue,
    child: Text(
      "Hello",
      textDirection: TextDirection.ltr,
      style: TextStyle(color: Colors.amber, fontSize: 55.0),
    ),
  ));
}

To bring the text to the center of the page: Use “Center” widget

import 'package:flutter/material.dart';
void main() {
  runApp(Container(
    color: Colors.blue,
    child: Center(child: Text(
      "Hello",
      textDirection: TextDirection.ltr,
      style: TextStyle(color: Colors.amber, fontSize: 55.0),
    )),
  ));
} // Center parameter brings the Widget inside to the center.

Suggestion: Use Widget Trees to understand the hierarchy better.

The Widget Tree that is used for this project is:

• Container
• Center
• Text