Flutter Tabs Made Easy: Step-by-Step Tutorial

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,
      title: 'Flutter Tabs Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3, // 🔥 Kitne tabs chahiye
      child: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter Tabs Example"),
          bottom: const TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: "Home"),
              Tab(icon: Icon(Icons.star), text: "Favorites"),
              Tab(icon: Icon(Icons.settings), text: "Settings"),
            ],
          ),
        ),
        body: const TabBarView(
          children: [
            HomeTab(),
            FavoritesTab(),
            SettingsTab(),
          ],
        ),
      ),
    );
  }
}

// 🔵 Tab 1: Home
class HomeTab extends StatelessWidget {
  const HomeTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("🏠 Home Screen", style: TextStyle(fontSize: 24)),
    );
  }
}

// ⭐ Tab 2: Favorites
class FavoritesTab extends StatelessWidget {
  const FavoritesTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("⭐ Favorites Screen", style: TextStyle(fontSize: 24)),
    );
  }
}

// ⚙️ Tab 3: Settings
class SettingsTab extends StatelessWidget {
  const SettingsTab({super.key});

  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text("⚙️ Settings Screen", style: TextStyle(fontSize: 24)),
    );
  }
}