How do I override a Flutter TabBar Tab to work as a FloatingActionButton?

Question

I'm trying to achieve this functionality:

When I press the last Tab button, I don't want to change to any view. I just want to show those two buttons, no matter which view I'm on.

I've tried with this solution , but it hasn't helped.

This is my code so far

class MainViewState extends State<MainView> {
  var tabsList = [
    Tab1View(),
    Tab2View(),
    Tab3View(),
    Tab4View()
  ];

  @override
  Widget build(BuildContext context) {
    return ViewModelProvider<MainViewModel>.withConsumer(
        viewModel: MainViewModel(),
        builder: (context, viewModel, child) => DefaultTabController(
            length: tabsList.length,
            child: Scaffold(
                drawer: mainViewDrawerHeader(context),
                appBar: AppBar(
                  title: Text('Sample Text'),
                  centerTitle: true,
                ),
                body: TabBarView(children: tabsList),
                bottomNavigationBar: TabBar(
                  labelPadding: EdgeInsets.symmetric(horizontal: 0.0),
                  labelStyle:
                      TextStyle(fontSize: 14.5, fontWeight: FontWeight.bold),
                  unselectedLabelStyle: TextStyle(fontSize: 12.0),
                  tabs: <Widget>[
                    Tab(
                      icon: Icon(Icons.monetization_on),
                      text: 'Tab 1',
                    ),
                    Tab(
                      icon: Icon(Icons.monetization_on),
                      text: 'Tab 2',
                    ),
                    Tab(
                      icon: Icon(Icons.credit_card),
                      text: 'Tab 3',
                    ),
                    Tab(
                      icon: Icon(Icons.phone),
                      text: 'Tab 4',
                    ),
                  ],
                  labelColor: Colors.red,
                  unselectedLabelColor: Colors.grey,
                  indicatorSize: TabBarIndicatorSize.tab,
                  indicatorColor: Colors.red,
                  onTap: (_) => {},
                ))));
  }
}

Answer 1

Yes, one simple way to go about it is to use the Visibility widget.

Just wrap your column that contains the buttons in a visibility widget.

For example

bool isClicked = false;

Visibility(
  visible: isClicked,
  child: Column(
    children : [
     Icon(Icons.phone),
     Icon(Icons.user),
     ],
   )
),

Now in your Fab item do the following:

FabItem(
    "Contacto",
    Icons.phone,
    onPress: () {
    _controller.reverse();
    sisClicked  = true;
    },
),

For more on visibility widget.