The Widget Tree

Part of the Your First App section of Coddy's Flutter journey. Lesson 3 of 32.

Widgets go inside other widgets. A widget that holds another one gives it to a child:, like this Center:

Center(
  child: Text('Hello'),
)

Center does not draw anything itself. It takes its child and puts it in the middle of the space it has. Without it, the text sits in the top left corner.

Widgets inside widgets inside widgets make a widget tree. In your app the tree is MaterialApp, then Scaffold, then whatever you put in its body:. Each widget's child is written inside its brackets, so the brackets show the tree. The commas at the end of each line keep it tidy.

Challenge

Easy

The text is stuck in the top left corner. Wrap it in a Center so it sits in the middle of the screen:

replace body: Text('Right in the middle'), with a Center whose child: is that Text

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Text('Right in the middle'),
      ),
    );
  }
}