Tabs and Grids

DefaultTabController

---

DefaultTabController is a convenience widget in Flutter that provides a default TabController for its descendants. Instead of manually creating and managing a TabController, you can use the DefaultTabController to handle it automatically, making it easier to work with the TabBar and TabBarView widgets.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('DefaultTabController Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Content for Tab 1')),
              Center(child: Text('Content for Tab 2')),
              Center(child: Text('Content for Tab 3')),
            ],
          ),
        ),
      ),
    );
  }
}

---

 

TabBar

---

TabBar widget is used in conjunction with the TabController to create a horizontal tab system, allowing users to swipe between different tabs or tap on individual tab items to change the content view.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar Widget'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

---

 

TabBarView

---

TabBarView widget works hand-in-hand with the TabBar widget to display the content associated with each tab. While TabBar is responsible for displaying the actual tab buttons, TabBarView is the container that displays the content of the currently selected tab.

The TabBarView requires a TabController, which keeps track of the active tab and manages the content display and animations when switching between tabs.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3, // Indicates the number of tabs.
        child: Scaffold(
          appBar: AppBar(
            title: Text('TabBar and TabBarView Example'),
            bottom: TabBar(
              tabs: [
                Tab(text: 'Car'),
                Tab(text: 'Transit'),
                Tab(text: 'Bike'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Car Content')),
              Center(child: Text('Transit Content')),
              Center(child: Text('Bike Content')),
            ],
          ),
        ),
      ),
    );
  }
}

---

 

GridView

---

GridView widget allows you to create a scrollable, two-dimensional array of widgets. It's similar to the ListView, but instead of linearly displaying items, GridView arranges them in a grid, providing a visual structure suitable for pictures, icons, or other similarly structured data.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView Example')),
        body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(100, (index) {
            return Center(
              child: Text(
                'Item $index',
                style: Theme.of(context).textTheme.headline5,
              ),
            );
          }),
        ),
      ),
    );
  }
}

 

GridView.builder

GridView.builder is a constructor of the GridView widget that creates a scrollable, 2D array of widgets on-demand. The .builder constructor is designed to efficiently generate grid items as they're needed, which makes it particularly useful when working with a large number of items. It only renders the widgets that fit on the screen and recycles them, reusing the off-screen widgets as you scroll, which improves performance and memory usage.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GridView.builder Example')),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
          ),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Item $index',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
          itemCount: 50,
        ),
      ),
    );
  }
}

 

SliverGridDelegatWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount is a type of SliverGridDelegate used to control the layout of the items in a GridView. It's one of the common delegates for creating grid layouts. When you use this delegate, you are defining a grid structure with a fixed number of cells in the cross axis (typically columns for vertical grids and rows for horizontal grids).

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 3 columns
    crossAxisSpacing: 10.0, // Space between columns
    mainAxisSpacing: 10.0, // Space between rows
    childAspectRatio: 1.0, // Square items
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Item $index',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  },
  itemCount: 50,
)

---