✅ Flutter Default Counter App Explained Step-by-Step

          ✅ Flutter Default Counter App Explained Step-by-Step

A Complete Beginner Friendly Guide (LearnWithRehan)

Flutter ko jab bhi aap first time install karke ek new project banate ho, to ek simple sa Counter App automatically create ho jata hai. Ye chhota sa app Flutter ki powerful concept ko samajhne ka best starting point hai.

Is article me hum iss default code ko line-by-line samjhenge, taaki aap Flutter ke basics ko clearly grasp kar sako.

---

✅ 1. Starting Point of Flutter App

import 'package:flutter/material.dart';

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

Explanation

• material.dart Flutter ka design toolkit hai jisme buttons, text fields, appbar jaise ready-made widgets hote hain.

• main() function se app chalna start hota hai.

• runApp(MyApp()) Flutter ko batata hai ki screen par kaunsa widget load karna hai.

---

✅ 2. MyApp Widget: App ka Main Structure

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Explanation

• MyApp ek StatelessWidget hai.
  Matlab ye khud change nahi hota.

• MaterialApp pura app ka outer structure handle karta hai.

• theme me app ka color style define hota hai.

• home me app ka first screen set kiya jata hai, yahan MyHomePage.

---

✅ 3. MyHomePage: A Stateful Widget

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

Why Stateful?

Counter app me number change hota hai.
Isliye ye widget StatefulWidget hai.
Stateful widgets wo hote hain jisme UI user interaction ke according change hota hai.

---

✅ 4. Handling the Counter Logic

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

Explanation

• _counter variable button press count karta hai.

• _incrementCounter() me setState() call hota hai.

• setState() Flutter ko bolta hai:

  “Data change hua hai, screen ko dobara build karo.”

---

✅ 5. Building the User Interface (UI)

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text('You have pushed the button this many times:'),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _incrementCounter,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

Explanation

✅ Scaffold

App ka basic layout banata hai (AppBar, Body, FAB).

✅ AppBar

• Top bar showing the screen title.

• Theme colors automatically handle design.

✅ Body

• Center: content ko middle me rakhta hai.

• Column: elements ko vertically arrange karta hai.

• First Text: description.

• Second Text: counter value show karta hai.

✅ FloatingActionButton

Button dabane par counter increase hota hai.
onPressed: _incrementCounter isi ka kaam karta hai.

---

✅ Final Summary (Easy to Remember)

What happens in the app?

1. App load hoti hai → main() run hota hai.

2. MyApp start hota hai → MaterialApp layout set hota hai.

3. Homepage load hota hai → counter = 0.

4. Button dabate ho → counter +1 → UI refresh.

5. Screen updated number show karti hai.

---

✅ Why This App Is Important For Beginners?

• You learn Stateless vs Stateful Widgets

• You understand setState()

• You see how MaterialApp, Scaffold, AppBar, Column work

• You get idea of UI rebuild concept

• It builds a strong base for Flutter development