Floating Action Button hidden behind bottom navigation in flutter

Question

I am using a floating action button on a page in my flutter application. How do I get it to show above the cupertinotabbar? Here is a screenshot. Image of how it looks

Here is a code snippet of my Widget build:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: NavDrawer(),
      appBar: AppBar(
        title: const Text('Manager Jobs'),
        backgroundColor: CustomColors.wrkioBlue,
      ),
      body: Padding(padding: EdgeInsets.only(bottom: 80),
        child: Container(
          height: MediaQuery.of(context).size.height - 100,
          child: StreamBuilder<List<DocumentReference>>(
              stream: _getJobReferences(),
              builder: (context, jobRefsSnapshot) {
                if (jobRefsSnapshot.connectionState == ConnectionState.waiting) {
                  return const CircularProgressIndicator();
                } else {
                  if (jobRefsSnapshot.hasData) {
                    final jobRefs = jobRefsSnapshot.data!;
                    return StreamBuilder<List<Job>>(
                        stream: _getManagerJobs(jobRefs),
                        builder: (context, jobsSnapshot) {
                          if (jobsSnapshot.connectionState == ConnectionState.waiting) {
                            return const CircularProgressIndicator();
                          } else {
                            if (jobsSnapshot.hasData) {
                              final jobs = jobsSnapshot.data!;
                              return ListView(
                                children: jobs.map((job) => jobRow(context, job)).toList(),
                              );
                            } else if (jobsSnapshot.hasError) {
                              return Text('${jobsSnapshot.error}');
                            }
                            return const CircularProgressIndicator();
                          }
                        }
                    );
                  } else if (jobRefsSnapshot.hasError) {
                    return Text('${jobRefsSnapshot.error}');
                  }
                  return const CircularProgressIndicator();
                }
              }),
        ),
      ),
      // floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked ,
      floatingActionButton: FloatingActionButton.extended(
        icon: Icon(Icons.add, color: Colors.white,),
        label: Text('New'),
        backgroundColor: CustomColors.wrkioBlue,
        onPressed: () {
          // Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => CreateJob()));
          Navigator.of(context, rootNavigator: false).push(MaterialPageRoute(builder: (context) => CreateJob()));
        },
      ),
    );
  }

How do I get it to show about the tab bar? Is there some kind of safe area I need to set or something?

Duplicate of https://stackoverflow.com/questions/58077794/can-i-dock-a-floating-action-button-in-a-cupertinotabbar — Harish, Oct 09 '22 at 06:23

score 0 · Answer 1 · answered Oct 09 '22 at 11:08

if you haven't found a solution, you can try this. create a custom floatingActionButton in a separate widget so that you can customize it and give it a margin that you can adjust depending on your liking.

//custom floating action button

class CustomFloatingActionButton extends StatelessWidget {
  const AppFloatingActionButton({Key? key, required this.onPressed})
      : super(key: key);

  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          margin: EdgeInsets.only(bottom: 64 //you can adjust this to the height you want),
          child: FloatingActionButton(
            onPressed: onPressed,
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}

then you can use it to replace your floating action button like so

    return Scaffold(
    appBar: AppBar()
      body: Body(),
      floatingActionButton: CustomFloatingActionButton(
            onPressed: (){},
          ),
      floatingActionButtonLocation: FloatingActionButtonLocation.miniEndFloat,
    );

Floating Action Button hidden behind bottom navigation in flutter

1 Answers1