Flutter – Create Button (or other widget) between Tabs

Issue

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

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);

  @override
  State<Tabbar> createState() => _TabbarState();
}

class _TabbarState extends State<Tabbar> {
  @override
  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.

Solution

try floatingActionButton and center it.

Answered By – Noor Eddin Hasan

Answer Checked By – Senaida (FlutterFixes Volunteer)