CODEWITHSUNDEEP
flutterdartflutter-layout
MD Sakib Hasan
MD Sakib Hasan

Reputation: 11

Extend Container behind system bottom navigation flutter

I want to extend an expanded scaffold with a child container behind the system bottom navigation bar to the very end of the screen. You can see it in the picture(black system bottom navigation bar of android phones). Not just to the limit of the system bottom navigation bar. I'm trying to make the system bottom navigation bar transparent and extend the scaffold with a child container underneath the navigation bar. Is it possible in flutter?

Upvotes: 1

Views: 1224

Answers (2)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63669

You can use floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat, on Fab

 return Scaffold(
 
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: InkWell(
        child: Container(
          padding: const EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            color: Colors.pink,
          ),
          child: Text(
            "Shop Now",
            maxLines: 1,
            textAlign: TextAlign.center,
          ),
        ),
      ),

Or use custom Fab position extending FloatingActionButtonLocation

class CustomFabPosition extends FloatingActionButtonLocation {
  @override
  Offset getOffset(ScaffoldPrelayoutGeometry scaffoldGeometry) {
    return Offset(
        scaffoldGeometry.scaffoldSize.width / 2 -
            scaffoldGeometry.floatingActionButtonSize.width / 2,
        scaffoldGeometry.scaffoldSize.height * .85);
  }
}

And use on floatingActionButtonLocation: CustomFabPosition(),

If you need more customization over UI. use Stack widget.

Upvotes: -1

Kaushik Chandru
Kaushik Chandru

Reputation: 17792

You can use extendBody

Scaffold(
 extendBody:true,
 ...
)

https://api.flutter.dev/flutter/material/Scaffold/extendBody.html

If true, and bottomNavigationBar or persistentFooterButtons is specified, then the body extends to the bottom of the Scaffold, instead of only extending to the top of the bottomNavigationBar or the persistentFooterButtons.

Upvotes: 1

Related Questions