Body is covered by collapsed slide up panel and bottomNavigationBar

[lannodev]

Describe the bug There is a problem if I use a listview builder inside body, and added a BottomNavigationBar. The body don't respect the screen size and stay behind of bottomNavigationBar. With a new property bodyHeight is possible to ajust this size and discounted the panel size too.

To Reproduce Inside the body Add some Listview Builder and in Scaffold add a bottomNavigationBar

Expected behavior Body need be to resize when add listview inside and respect the others widgets in scaffold

Screenshots

Additional context

Smartphone (please complete the following information):

• Device: Moto G 5
• OS: Android 8.1.0
• Flutter Version 3.9.1
• sliding_up_panel Version 1.0.1

Sample main.dart

import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import 'package:test_layout/slidingUpPanel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        backgroundColor: Colors.blueGrey,
        body: LayoutBuilder(
          builder: (_, constraints) {
            return Container(
              height: constraints.maxHeight,
              child: SlidingUpPanel(
                backdropEnabled: true,
                minHeight: 80,
                parallaxEnabled: true,
                //bodyHeight: constraints.maxHeight,
                body: Shimmer.fromColors(
                  highlightColor: Colors.black,
                  baseColor: Colors.black,
                  child: ListView.builder(
                    itemCount: 40,
                    itemBuilder: (context, index) {
                      return Title(
                        child: Text("Index: $index"),
                        color: Colors.black,
                      );
                    },
                  ),
                ),
                collapsed: Container(
                  child: Center(child: Text("Collapsed")),
                ),
                panel: Container(
                  color: Colors.pink,
                  child: Center(child: Text("Panel")),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

[ylaintsaurent]

I faced a similar situation so I modified the source code as a temporary workaround to fit my case.

The height of the collapsed SlidingUpPanel being equal to BottomNavigationBar's default height kBottomNavigationBarHeight, the combined height of both widgets (kBottomNavigationBarHeight*2) had to be accounted for in the SlidingUpPanel build method to avoid covering part of the body.

@override
Widget build(BuildContext context) {
  return Stack(
    alignment: widget.slideDirection == SlideDirection.UP ? Alignment.bottomCenter : Alignment.topCenter,
    children: <Widget>[

      //make the back widget take up the entire back side
      widget.body != null ? AnimatedBuilder(
        animation: _ac,
        builder: (context, child){
          return Positioned(
            top: widget.parallaxEnabled ? _getParallax() : 0.0,
            child: child,
          );
        },
        child: Container(
          // WORKAROUND
          height: MediaQuery.of(context).size.height - kBottomNavigationBarHeight*2,
          width: MediaQuery.of(context).size.width,
          child: widget.body,
        ),
      ) : Container(),

...

The widget has been a pleasure to use otherwise, and I hope BottomNavigationBar can be accommodated somehow.

[lannodev]

@YLAINTSAURENT Sometimes I need to hide bottom Navigation Bar, I fixed my problem adding a new property bodyHeight.

class SlidingUpPanel extends StatefulWidget {
 ...
  // The Widget that lies underneath the sliding panel.
  /// This Widget automatically sizes itself
  /// to fill the screen.
  final Widget body;

  // The Height of body
  final double bodyHeight;
...

SlidingUpPanel({
    Key key,
    this.panel,
    this.panelBuilder,
    this.body,
    this.bodyHeight,  //New property in constructor

...
 @override
  Widget build(BuildContext context) {
    //Screen Size
    Size _screenSize = MediaQuery.of(context).size;
    return Stack(
      alignment: widget.slideDirection == SlideDirection.UP ? Alignment.bottomCenter : Alignment.topCenter,
      children: <Widget>[
        //make the back widget take up the entire back side
        widget.body != null
            ? AnimatedBuilder(
                animation: _ac,
                builder: (context, child) {
                  return Positioned(
                    top: widget.parallaxEnabled ? _getParallax() : 0.0,
                    child: child,
                  );
                },
                child: Container(
                  height: widget.bodyHeight != null ? widget.bodyHeight - widget.minHeight : _screenSize.height,
                  width: _screenSize.width,
                  child: widget.body,
                ),
              )
            : Container(),
  ...

[nilsreichardt]

@luciano-work I created a PR to scale the body size :) https://github.com/akshathjain/sliding_up_panel/pull/129

[lannodev]

@AndroidNils Good job!