Expandable bottom bar Overflow

Question

I am using this expandable bottom app bar in my application, and as you can see it works perfectly but it displays a bottom overflow.

I don't understand : this overflow is normal since it is the objective of this plugin - hiding a widget and display it as you scroll up -.

Did I miss something on the use I did ?

Here's my code :

 Positioned(
            bottom: 0.0,
            left: 0.0,
            right: 0.0,
            child: BottomExpandableAppBar(
              // Provide the bar controller in build method or default controller as ancestor in a tree 
              controller: controller,
              appBarHeight: 00.0,
              expandedHeight: controller.dragLength,
              horizontalMargin: 0.0,
              bottomOffset: 50.0,
              //expandedBackColor: Colors.white,
              expandedDecoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20),
                          topRight: Radius.circular(20),
                        ),
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black12,
                              offset: Offset(5.0, 5.0),
                              blurRadius: 15.0,
                              spreadRadius: 15.0,
                            ),
                        ]
                      ),
              // Your bottom sheet code here
              expandedBody: GestureDetector(
                onVerticalDragUpdate: controller.onDrag,
                onVerticalDragEnd: controller.onDragEnd,
                child: Column(
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.only(top: 8.0),
                          child: Icon(
                            Feather.getIconData('minus'),
                            size: 30.0,
                            ),
                        )
                      ],
                    ),
                    Container(),// my content
                  ],
                ),
              ),
              shape: AutomaticNotchedShape(
                       RoundedRectangleBorder(),
                       StadiumBorder(
                           side: BorderSide()
                           )
                        ),
              // Your bottom app bar code here
            ),

Answer 1

I solved that problem wrapping the expandedBody widget in a SizedBox with the height of (expandedHeight + kToolbarHeight) and then wrapping it in a SingleChildScrollView, giving physics : NeverScrollableScrollPhysics()

ps: kToolbarHeight is the constant for the app bar height.

I hope this helps other people facing that annoying issue.

EDIT: Better using kBottomNavigationBarHeight than kToolbarHeight, since it is more suitable to the context, but both have the same value.

Answer 2

This package is intended to be used as a bottom app bar. You'll have to do it as follows:

bottomNavigationBar: BottomExpandableAppBar(
        // Provide the bar controller in build method or default controller as ancestor in a tree 
        controller: bbc,
        expandedHeight: expandedHeight.value,
        horizontalMargin: 16,
        expandedBackColor: Theme.of(context).backgroundColor,
        // Your bottom sheet code here
        expandedBody: Center(
          child: Text("Hello world!"),
        ),
        // Your bottom app bar code here
        bottomAppBarBody: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Text(
                  "Hello",
                  textAlign: TextAlign.center,
                ),
              ),
              Spacer(
                flex: 2,
              ),
              Expanded(
                child: Text(
                  "World",
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      )