Flutter tabbar without appbar

Flutter TabBar Without AppBar

In Flutter, you can create a TabBar without an AppBar by using a combination of widgets like Scaffold, TabController, and TabBarView. Below is a step-by-step explanation with examples:

1. Import the required Flutter packages:

            
import 'package:flutter/material.dart';
            
        

2. Create a StatefulWidget, which will hold the state for managing tabs:

            
class TabScreen extends StatefulWidget {
  @override
  _TabScreenState createState() => _TabScreenState();
}
            
        

3. Define the state class:

            
class _TabScreenState extends State<TabScreen> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TabBar(
            controller: _tabController,
            tabs: [
              Tab(text: 'Tab 1'),
              Tab(text: 'Tab 2'),
              Tab(text: 'Tab 3'),
            ],
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
                Center(child: Text('Content of Tab 1')),
                Center(child: Text('Content of Tab 2')),
                Center(child: Text('Content of Tab 3')),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
            
        

4. Use the TabScreen widget where you want to display the tabs:

            
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TabBar Without AppBar',
      home: TabScreen(),
    );
  }
}
            
        

5. Run the app and you will see a screen with a TabBar and corresponding TabBarView without an AppBar:

By following the above steps and implementing the provided code, you will be able to create a Flutter TabBar without an AppBar. Feel free to customize the styling and content as per your requirements.