Flutter Tabs Demo App

A Flutter application demonstrating various widgets and UI components organized in a tabbed interface.

App Structure Overview

The app has 2 main classes that work together to create a complete tabbed interface:

1. MyApp Class (Root Widget)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _TabsNonScrollableDemo(),
    );
  }
}

• Purpose: Entry point that sets up the Material Design app
• Key Point: Wraps everything in MaterialApp for Material Design theming

2. _TabsNonScrollableDemo (Main Tab Interface)

This is where all the magic happens. It's a StatefulWidget because it needs to manage tab state and user interactions.

State Management & Tab Controller

class __TabsNonScrollableDemoState extends State<_TabsNonScrollableDemo>
    with SingleTickerProviderStateMixin, RestorationMixin {
  
  late TabController _tabController;
  final RestorableInt tabIndex = RestorableInt(0);

Key Components:

• SingleTickerProviderStateMixin: Enables smooth tab animations
• RestorationMixin: Remembers which tab you were on if the app restarts
• TabController: Controls which tab is active and handles switching

Tab Controller Setup

@override
void initState() {
  super.initState();
  _tabController = TabController(
    initialIndex: 0,        // Start on first tab
    length: 4,             // Total of 4 tabs
    vsync: this,           // Animation synchronization
  );
  
  // Listen for tab changes and save the current tab
  _tabController.addListener(() {
    setState(() {
      tabIndex.value = _tabController.index;
    });
  });
}

Main UI Structure

return Scaffold(
  appBar: AppBar(
    title: Text('Tabs Demo'),
    bottom: TabBar(                    // Tab headers
      controller: _tabController,
      tabs: [
        for (final tab in tabs) Tab(text: tab),  // Creates 4 tabs
      ],
    ),
  ),
  body: TabBarView(                    // Tab content
    controller: _tabController,
    children: [
      _buildTab1(),
      _buildTab2(), 
      _buildTab3(),
      _buildTab4(),
    ],
  ),
  bottomNavigationBar: BottomAppBar(   // Bottom navigation
    // ... navigation icons
  ),
);

Individual Tab Explanations

Tab 1 - Text & Alert Dialog

Widget _buildTab1() {
  return Container(
    color: Colors.red[100],           // Light red background
    child: Column(
      children: [
        Text(
          'Welcome to Tab 1',
          style: TextStyle(           // Custom text styling
            fontSize: 24,
            fontWeight: FontWeight.bold,
            color: Colors.red[800],
          ),
        ),
        ElevatedButton(
          onPressed: () {
            showDialog(               // Shows popup dialog
              context: context,
              builder: (context) => AlertDialog(
                title: Text('Alert Dialog'),
                content: Text('This is an alert dialog in Tab 1!'),
                actions: [
                  TextButton(
                    child: Text('OK'),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ],
              ),
            );
          },
          child: Text('Show Alert'),
        ),
      ],
    ),
  );
}

What this does:

• Background: Light red color theme
• Content:
  • Styled text widget with custom typography (24px, bold, dark red color)
  • Button that triggers an Alert Dialog
  • Demonstrates user interaction with dialogs

Tab 2 - Image & Text Inputs

Widget _buildTab2() {
  return Container(
    color: Colors.blue[100],          // Light blue background
    child: Column(
      children: [
        Image.network(                // Loads image from internet
          'https://picsum.photos/150/150',
          width: 150,
          height: 150,
        ),
        TextField(                    // Text input field
          decoration: InputDecoration(
            labelText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
        TextField(                    // Another text input
          decoration: InputDecoration(
            labelText: 'Enter your email',
            border: OutlineInputBorder(),
          ),
        ),
      ],
    ),
  );
}

What this does:

• Background: Light blue color theme
• Content:
  • Network image loaded from https://picsum.photos/150/150 (150x150 pixels)
  • Two text input fields:
    • Name input field with outlined border
    • Email input field with outlined border
  • Demonstrates form input handling and network image loading

Tab 3 - Button with SnackBar

Widget _buildTab3() {
  return Container(
    color: Colors.green[100],         // Light green background
    child: Center(
      child: ElevatedButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(                 // Shows message at bottom
              content: Text('Button pressed in Tab 3!'),
            ),
          );
        },
        child: Text('Click me'),
      ),
    ),
  );
}

What this does:

• Background: Light green color theme
• Content:
  • Elevated button with click interaction
  • Shows a SnackBar notification when pressed
  • Demonstrates user feedback through SnackBar messages

Tab 4 - ListView with Cards

Widget _buildTab4() {
  return Container(
    color: Colors.yellow[100],        // Light yellow background
    child: ListView(                  // Scrollable list
      children: [
        Card(                         // Each item in a card
          elevation: 4,               // Shadow effect
          child: ListTile(
            title: Text('Item 1'),
            subtitle: Text('This is the first item'),
            leading: Icon(Icons.star), // Icon on the left
          ),
        ),
        // ... more cards (5 total)
      ],
    ),
  );
}

What this does:

• Background: Light yellow color theme
• Content:
  • Scrollable ListView with 5 items
  • Each item wrapped in a Card widget with elevation shadow
  • ListTile components with:
    • Title text
    • Subtitle description
    • Leading icons (star, favorite, thumb_up, access_time, location_on)
  • Demonstrates list presentation and card-based UI design

UI Components

Bottom App Bar

bottomNavigationBar: BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 8.0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: <Widget>[
      IconButton(icon: Icon(Icons.home), onPressed: () {}),
      IconButton(icon: Icon(Icons.search), onPressed: () {}),
      IconButton(icon: Icon(Icons.favorite), onPressed: () {}),
      IconButton(icon: Icon(Icons.settings), onPressed: () {}),
    ],
  ),
),

• Features a BottomAppBar with circular notched rectangle shape
• Contains 4 navigation icons: home, search, favorite, settings
• Adds modern material design navigation

Tab Navigation

• Custom TabController managing 4 tabs
• State restoration support for maintaining tab selection
• Tab bar integrated in the app bar

Key Flutter Concepts Used

1. State Management: StatefulWidget to handle changing data
2. Layouts: Column, Container, Center for positioning
3. User Input: TextField, ElevatedButton
4. Navigation: TabController, TabBar, TabBarView
5. Styling: Colors, TextStyle, elevation
6. Lists: ListView, ListTile, Card
7. Dialogs: AlertDialog, SnackBar
8. Images: Image.network() for loading from URLs
9. Lifecycle: initState(), dispose() for setup/cleanup
10. Material Design Components: AppBar, TabBar, Cards, BottomAppBar

How It All Works Together

1. App starts → MyApp creates the main app
2. Tabs initialize → TabController sets up 4 tabs
3. User taps tab → TabController switches content
4. State preserved → If app restarts, remembers last tab
5. User interactions → Buttons, inputs, dialogs respond to touches

This creates a complete tabbed interface showcasing essential Flutter widgets and patterns!

Getting Started

Prerequisites

• Flutter SDK installed
• Dart SDK
• IDE (VS Code, Android Studio, etc.)

Running the App

1. Clone the repository
2. Navigate to project directory
3. Run flutter pub get to install dependencies
4. Run flutter run to start the application

Supported Platforms

• Android
• iOS
• Web
• Windows
• macOS
• Linux

Project Structure

lib/
  └── main.dart          # Main application file with all tab implementations
android/                 # Android-specific files
ios/                    # iOS-specific files
web/                    # Web-specific files
windows/                # Windows-specific files
macos/                  # macOS-specific files
linux/                  # Linux-specific files

This project serves as an excellent learning resource for Flutter beginners to understand basic widget implementation, state management, and user interface design patterns with detailed code explanations.