Widgets in Flutter

# CHAPTER 5

Widgets in Flutter #

1. Introduction #

2. Learning Objectives #

• Explain the "Everything is a Widget" philosophy.

• Understand parent/child relationships within the Widget Tree.

• Implement the MaterialApp root widget.

• Build a standard app layout using the Scaffold widget.

• Utilize basic widgets: Text, Center, and Container.

3. Everything is a Widget #

• Want text? Use a Text widget.

• Want it centered? Wrap the Text widget inside a Center widget.

• Want it to have a blue background? Wrap the Center widget inside a Container widget with a blue color.

4. MaterialApp (The App Shell) #

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: "My App",
      home: MyScreen(), // Points to the first screen to show!
    )
  );
}

5. Scaffold (The Screen Blueprint) #

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home Screen")),
      body: Text("This is the main content!"),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

6. Core Structural Widgets #

• Text: Displays a string of characters.

• Center: A layout widget. It takes one child widget and positions it exactly in the dead center of the available space.

• Container: The ultimate utility box. It can take a child and wrap it in background colors, borders, margins, padding, and specific widths/heights. (Similar to a <div> in web development).

7. Building a Widget Tree #

Scaffold(
  body: Center(
    child: Container(
      color: Colors.blue,
      height: 100,
      width: 200,
      child: Center(
        child: Text("Hello Flutter!"),
      ),
    ),
  ),
);

8. Visual Learning: The Widget Tree #

[ MaterialApp ] (The App Wrapper)
      |
[ Scaffold ] (The Screen Layout)
      |-- appBar: [ AppBar ]
      |
      |-- body: [ Center ]
                  |-- child: [ Container ] (Blue Box)
                               |-- child: [ Text ] "Hello!"

9. Common Mistakes #

• Forgetting the Scaffold: Beginners sometimes try to return a Text widget or a Container directly as the home: of their MaterialApp. The text will appear, but it will be horribly unformatted, covered in red error lines, and shoved behind the phone's battery icon. Always wrap your screen content inside a Scaffold!

10. Best Practices #

• Use the VS Code Refactor Menu: If you write a Text widget and realize it needs to be centered, DO NOT manually type Center(child: ...) and try to match the parentheses. Click on the Text widget, press Ctrl + . (or Cmd + . on Mac), and select Wrap with Center. Let the IDE write the boilerplate code for you!

11. Mini Project: Build Your First Screen #

1. 1. Open lib/main.dart and delete EVERYTHING.

1. 2. Type import 'package:flutter/material.dart';.

1. 3. Create the void main() { runApp(MyApp()); } function.

1. 4. Below it, type stl and press Enter. This uses a VS Code snippet to generate a StatelessWidget. Name it MyApp.

1. 5. Inside MyApp, return a MaterialApp.

1. 6. Set the home property to a Scaffold.

1. 7. Give the Scaffold an AppBar with the text "Welcome".

1. 8. Give the Scaffold a body. Make it a Center widget, holding a Container with a red background, holding a Text widget that says "I built this!".

12. Practice Exercises #

1. 1. What property of the Scaffold widget allows you to place content in the top bar of the app?

1. 2. What layout widget would you use to place a piece of text exactly in the middle of the screen?

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain the phrase "Everything is a Widget" in Flutter. Contrast this with traditional Android XML or HTML/CSS layouts regarding properties like Padding and Center.

• Q: What is the specific purpose of the Scaffold widget? Name three structural slots it provides to a developer.

• Q: Explain the parent/child hierarchy in a Widget Tree. How does data typically flow down the tree?

15. FAQs #

16. Summary #

17. Next Chapter Recommendation #