Now let’s start learning Flutter Widgets step by step using VS Code.
We’ll go from the very basics and build small UIs together .

---

Step 1: Text Widget

Shows simple text on screen.

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(
      home: Scaffold(
        appBar: AppBar(title: const Text("Text Widget Example")),
        body: const Center(
          child: Text(
            "Hello Flutter ",
            style: TextStyle(
              fontSize: 30,
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }
}

Try it → You’ll see Hello Flutter in blue, bold, and big font.

---

Step 2: Container Widget

A box for styling (color, padding, margin, borders).

body: Center(
  child: Container(
    padding: const EdgeInsets.all(20),
    margin: const EdgeInsets.all(40),
    decoration: BoxDecoration(
      color: Colors.amber,
      borderRadius: BorderRadius.circular(15),
    ),
    child: const Text(
      "Inside a Container",
      style: TextStyle(fontSize: 22, color: Colors.white),
    ),
  ),
),

You’ll see a yellow rounded box with white text.

---

Step 3: Row & Column

For arranging widgets horizontally / vertically.

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Text("First Line", style: TextStyle(fontSize: 22)),
    Text("Second Line", style: TextStyle(fontSize: 22)),
    Text("Third Line", style: TextStyle(fontSize: 22)),
  ],
),

Changes Column → Row to place them side by side.

---

Step 4: Image Widget

Show images.

body: Center(
  child: Image.network(
    "https://picsum.photos/200",
    width: 200,
    height: 200,
  ),
),

Loads a random internet image.
(You can also use Image.asset() for local images in your project.)

---

Step 5: ElevatedButton

For actions (like clicking).

body: Center(
  child: ElevatedButton(
    onPressed: () {
      print("Button Clicked!");
    },
    child: const Text("Click Me"),
  ),
),

When you press the button, it prints in Debug Console.

---

Now you know the 5 most important widgets:
Text, Container, Row, Column, Button