Flutter – Create Button (or other widget) between Tabs


I am new to flutter, I want to create a Bottom TabBar with a rounded button in the center of the tabs. Like this.

enter image description here

This is the only widget I have right now.

import "package:flutter/material.dart";

class Tabbar extends StatefulWidget {
  const Tabbar({Key? key}) : super(key: key);

  State<Tabbar> createState() => _TabbarState();

class _TabbarState extends State<Tabbar> {
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: Scaffold(
        appBar: AppBar(
          // bottom: ,
          title: Text('Tabs Demo'),
        bottomNavigationBar: Container(
          color: Colors.blue[900],
          child: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.account_balance_wallet)),
              Tab(icon: Icon(Icons.query_stats)),
              Tab(icon: Icon(Icons.update)),
              Tab(icon: Icon(Icons.settings)),
        body: TabBarView(
          children: [
            // Text('Temporary'),
            Icon(Icons.flight, size: 350),
            Icon(Icons.directions_transit, size: 350),
            Icon(Icons.directions_car, size: 350),
            Icon(Icons.settings, size: 350),

This is my output right now.

enter image description here


try floatingActionButton and center it.

Answered By – Noor Eddin Hasan

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.