Placement of Floating Action Button in Flutter

Question

I am making a screen view like this. What I want is that when it's on the medicine tab it should display a floating action button at the corner like as shown in this picture.

and for the history tab, it should disappear. like in this picture

My code is:

import 'package:epicare/HomeScreen.dart';
import 'package:flutter/material.dart';

class Medicines extends StatefulWidget {
  @override
  _MedicinesState createState() => _MedicinesState();
}

class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
  TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xffE5E0A1),
        elevation: 0,
        centerTitle: true,
        title: Text(
          "Medicine",
          style: TextStyle(
            fontSize: 15.0,
            color: Colors.black,
            fontFamily: 'Montserrat',
            fontWeight: FontWeight.normal,
          ),
        ),
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back,
            color: Colors.black,
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return HomeScreen();
                },
              ),
            );
          },
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 32,right: 32,left: 32),
        child: Column(
          children: [
            // give the tab bar a height [can change height to preferred height]
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: const Color(0xffE5E0A1),
                borderRadius: BorderRadius.circular(
                  17.0,
                ),
                border: Border.all(
                    width: 1.0, color: const Color(0xff2f363d)),
              ),
              child: TabBar(
                controller: _tabController,
                // give the indicator a decoration (color and border radius)
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    17.0,
                  ),
                  color: Colors.black,
                ),
                labelColor: const Color(0xffd4d411),
                unselectedLabelColor: Colors.black,
                tabs: [
                  // first tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'Medicine',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),

                  // second tab [you can add an icon using the icon property]
                  Tab(
                    child: Text(
                      'History',
                      style: TextStyle(
                        fontFamily: 'Montserrat',
                        fontSize: 16,
                        //color: const Color(0xffd4d411),
                        letterSpacing: 0.48,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ],
              ),
            ),
            // tab bar view her
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  // first tab bar view widget
                  Column(
                    children: [
                      Image.asset(("assets/images/Medicine-amico.png")),
                      SizedBox(
                        height: 20,
                      ),
                      Text(
                        'Hurray! You don\'t have any pending medicines to take!',
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: const Color(0x78000000),
                          height: 1.4285714285714286,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],

                  ),

                  // second tab bar view widget
                  Column(
                    children: [
                      Image.asset(("assets/images/Time management-pana.png")),
                      Text(
                        'You have no data here!\nPlease complete your prescriptions',
                        style: TextStyle(
                          fontFamily: 'Montserrat',
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                          color: const Color(0x78000000),
                          height: 1.4285714285714286,
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      // floatingActionButton: FloatingActionButton(
      //   child: Icon(
      //     Icons.add,
      //     size: 40,
      //   ),
      //   backgroundColor: const Color(0xffd4d411),
      //   onPressed: () {},
      // ),
    );
  }

  Widget addmedicine() {
    return FloatingActionButton(
        child: Icon(
            Icons.add,
            size: 40,
          ),
          backgroundColor: const Color(0xffd4d411),
          onPressed: () {},
    );
  }
}

Please help me out with how should I place my floating action button Thank you in advance:)

Answer 1

Add a listener to update the currently selected tab to display the FloatingActionButton, or an empty Container.

class _MedicinesState extends State<Medicines> with TickerProviderStateMixin {
  late TabController _tabController;
  var _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this)
      ..addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: ...,
      body: ...,
      floatingActionButton: _selectedIndex > 0 
        ? Container()
        : FloatingActionButton(
          child: Icon(
            Icons.add,
            size: 40,
          ),
          backgroundColor: const Color(0xffd4d411),
          onPressed: () {},
      ),
    );
  }
}

This approach retains the hero properties of a FloatingActionButton:

Answer 2

You can use this code. I made Stack widget and added on only the medicine page the floating button just copy and past this code in your screen

 class Medicines extends StatefulWidget { @override _MedicinesState createState() => _MedicinesState(); } class _MedicinesState extends State<Medicines> with TickerProviderStateMixin { TabController _tabController; @override void initState() { _tabController = TabController(length: 2, vsync: this); super.initState(); } @override void dispose() { super.dispose(); _tabController.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar( backgroundColor: const Color(0xffE5E0A1), elevation: 0, centerTitle: true, title: Text( "Medicine", style: TextStyle( fontSize: 15.0, color: Colors.black, fontFamily: 'Montserrat', fontWeight: FontWeight.normal, ), ), leading: IconButton( icon: Icon( Icons.arrow_back, color: Colors.black, ), onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) { return HomeScreen(); }, ), ); }, ), ), body: Padding( padding: const EdgeInsets.only(top: 32, right: 32, left: 32), child: Column( children: [ // give the tab bar a height [can change height to preferred height] Container( height: 45, decoration: BoxDecoration( color: const Color(0xffE5E0A1), borderRadius: BorderRadius.circular( 17.0, ), border: Border.all(width: 1.0, color: const Color(0xff2f363d)), ), child: TabBar( controller: _tabController, // give the indicator a decoration (color and border radius) indicator: BoxDecoration( borderRadius: BorderRadius.circular( 17.0, ), color: Colors.black, ), labelColor: const Color(0xffd4d411), unselectedLabelColor: Colors.black, tabs: [ // first tab [you can add an icon using the icon property] Tab( child: Text( 'Medicine', style: TextStyle( fontFamily: 'Montserrat', fontSize: 16, //color: const Color(0xffd4d411), letterSpacing: 0.48, ), textAlign: TextAlign.left, ), ), // second tab [you can add an icon using the icon property] Tab( child: Text( 'History', style: TextStyle( fontFamily: 'Montserrat', fontSize: 16, //color: const Color(0xffd4d411), letterSpacing: 0.48, ), textAlign: TextAlign.left, ), ), ], ), ), // tab bar view her Expanded( child: TabBarView( controller: _tabController, children: [ // first tab bar view widget Stack( children: [ Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: MainAxisAlignment.end, children: [ Column( mainAxisAlignment: MainAxisAlignment.end, children: [ FloatingActionButton(onPressed: null) ]), ]), ), Column( children: [ Image.asset(("assets/images/Medicine-amico.png")), SizedBox( height: 20, ), Text( 'Hurray, You don\'t have any pending medicines to take:': style, TextStyle( fontFamily: 'Montserrat'. fontWeight, FontWeight:w600, fontSize: 14, color: const Color(0x78000000). height, 1,4285714285714286: ). textAlign, TextAlign,center, ), ], ), ]: ). // second tab bar view widget Column( children. [ Image,asset(("assets/images/Time management-pana,png")): Text( 'You have no data here:\nPlease complete your prescriptions', style: TextStyle( fontFamily. 'Montserrat', fontWeight: FontWeight,w600: fontSize, 14: color. const Color(0x78000000), height, 1:4285714285714286. ), textAlign, TextAlign,center, ), ], ), ], ), ), ]: ): ). // floatingActionButton, FloatingActionButton( // child: Icon( // Icons,add, // size: 40, // ): // backgroundColor, const Color(0xffd4d411), // onPressed; () {}: // ). ), } Widget addmedicine() { return FloatingActionButton( child: Icon( Icons,add, size: 40, ): backgroundColor, const Color(0xffd4d411); onPressed: () {}, ); } }