Can I dock a floating action button in a CupertinoTabBar?

Question

I would like to know if there is a way to dock a floating action button in a CupertinoTabBar. I would like to get the results as in the picture below

My screen is organized as follow

• CupertinoTabScaffold
  • CupertinoTabView
    • CupertinoPageScaffold
      • CupertinoNavigationBar
      • Scaffold
  • CupertinoTabBar

I have tried to add the following code to my Scaffold but the result is not what I want. I understand the issue is that the TabBar is not inside the scaffold hence it is not docked however I am wondering if there is a way to put the floating button somewhere else to get to the result I want

Here is the code

child: Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton.extended(
          backgroundColor: kColorAccent,
          onPressed: () {},
          label: Text('To my Favorites!'),
          icon: Icon(Icons.favorite),
        ),

And here is the result I get...

Answer 1

like everyone, I spent some time looking for an optimal answer to this problem, and after carefully analyzing the code I found a solution and I share them below, this is a fragment of the project in which I work, but it can be of use general

import 'package:app_example/floatingAction.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
initState() {
  super.initState();

}

@override
Widget build(BuildContext context) {

return Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.endTop,
  floatingActionButton: FloatingAction(),

  bottomNavigationBar: CupertinoTabScaffold(
    
      tabBar: CupertinoTabBar(
          activeColor: Colors.red,
          inactiveColor: Colors.grey,
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.loyalty_outlined,
              ),
              label: "Productos",
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.people,
              ),
              label: 'Clientes',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.shopping_cart_outlined,
              ),
              label: 'Ventas',
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.timeline,
              ),
              label: "Historial",
            ),
          ]),
      tabBuilder: (BuildContext contex, int index) {
        
        switch (index) {
          case 0:
            return CupertinoTabView(
              builder: (BuildContext context) => ProductScreen(),
            );
            break;
          case 1:
            return CupertinoTabView(
              builder: (BuildContext context) => ClientScreen(),
            );
            break;
          case 2:
            return CupertinoTabView(
              builder: (BuildContext context) => MarketScreen(),
            );
            break;
          case 3:
            return CupertinoTabView(
              builder: (BuildContext context) => HistoryScreen(),
            );
            break;
        }
        return null;
      }),
  );
 }
 }

class FloatingAction extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Column(
   mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Container(
              margin: EdgeInsets.only(bottom:70),
              child: FloatingActionButton(
              onPressed: () {
                print('click en botton');
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) =>NewMarket()),
                );
              },
              child: Icon(Icons.queue),
              backgroundColor: Colors.red,
            ),
    ),
  ],
);
 }
}

Separating the floatingActionButton into an independent class, FloatingAction, allows us to give more features to the widget, in this case within an Column, with a mainAxisAlignment: MainAxisAlignment.end, which allows us to do an alignment to the bottom of the widget, and with the floatingActionButtonLocation: FloatingActionButtonLocation.endTop,,allows us to have a location defined on the edge of the screen, in that sense, it only remains to locate the preferred height of the button with the margin: EdgeInsets.only ( bottom: 70), of container

To center the button, we simply change the margin: EdgeInsets.only (bottom: 70, right: MediaQuery.of (context) .size.width / 2 - 45), the bottom will indicate the height, the right the location in reference to the center.

Doing this process inside a Column will allow us to add more floating buttons in the future if needed.

now it is possible to work a floatingActionButton with a CupertinoTapBar