This guide then takes a step back to explain Flutter’s
approach to layout, and shows how to place a single widget
on the screen. After a discussion of how to lay widgets
out horizontally and vertically, some of the most common
layout widgets are covered.

If you want a “big picture” understanding of the layout mechanism,
start with Flutter’s approach to layout.

Step 0: Create the app base code

Make sure to set up your environment,
then do the following:

Create a new Flutter app.

Replace the contents in lib/main.dart with the following code:

    
lib/main.dart (all)
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});