Basic Widgets

Relax. We'll talk through this in plain words — no textbook voice.

There's a handful of widgets you'll use in almost every Flutter app. Text displays text, Icon displays an icon, Image displays a picture, Container handles boxes/styling, and Scaffold builds the page structure. Once you know these widgets, you can start building most simple UIs.

dart

Scaffold(
  appBar: AppBar(title: const Text('Basic Widgets')),
  body: Center(
    child: Container(
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(16),
      ),
      child: const Text(
        'Hello Flutter',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
)

You should see

A screen with an app bar appears, showing a blue rounded box with the text "Hello Flutter" in the middle.

What's Next

Now that you have some UI elements, let's learn how to arrange them using Row and Column.

Easy traps

If your Text color clashes with the background, it becomes hard to read. Always check the contrast.