`extendBodyBehindAppBar: true` in the AppBar causes an extra space at the top of the panel

[AliRezaBeitari]

Describe the bug When I set extendBodyBehindAppBar: true in the Scaffold with an AppBar, the panel get an extra space at the top of itself.

To Reproduce Add an AppBar to the Scaffold and set attribute extendBodyBehindAppBar: true of Scaffold.

Expected behavior The panel should not have that extra space.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone8
• OS: iOS13.6
• Flutter Version: 1.20.2
• sliding_up_panel Version: ^1.0.2

Sample main.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:oteq_homes/model/home.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class HomeDetailsPage extends StatefulWidget {
  final Home home;

  const HomeDetailsPage({Key key, this.home}) : super(key: key);

  @override
  _HomeDetailsPageState createState() => _HomeDetailsPageState();
}

class _HomeDetailsPageState extends State<HomeDetailsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.transparent,
        actions: [
          IconButton(
            icon: Icon(Icons.chat_bubble_outline),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.favorite_border),
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.share),
            onPressed: () {},
          ),
          PopupMenuButton<String>(
            icon: Icon(Icons.more_vert),
            onSelected: (value) {},
            itemBuilder: (context) {
              return [
                PopupMenuItem<String>(
                  value: 'Hello World',
                  child: Text('Hello World'),
                ),
                PopupMenuItem<String>(
                  value: 'Hello World',
                  child: Text('Hello World'),
                ),
                PopupMenuItem<String>(
                  value: 'Hello World',
                  child: Text('Hello World'),
                ),
              ];
            },
          ),
        ],
      ),
      body: SlidingUpPanel(
        minHeight: 150,
        maxHeight: MediaQuery.of(context).size.height - kToolbarHeight - 16,
        borderRadius: BorderRadius.only(
          topLeft: const Radius.circular(16),
          topRight: const Radius.circular(16),
        ),
        panelBuilder: (ScrollController sc) {
          return Column(
            children: [
              SizedBox(height: 15),
              Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                  color: Colors.grey[300],
                  borderRadius: BorderRadius.all(
                    Radius.circular(12.0),
                  ),
                ),
              ),
              SizedBox(height: 15),
              Expanded(
                child: _scrollingList(sc),
              ),
            ],
          );
        },
        body: ListView.separated(
          itemCount: 22,
          separatorBuilder: (context, _) => SizedBox(height: 5),
          itemBuilder: (context, index) {
            return SizedBox(
              height: 200,
              child: CachedNetworkImage(
                imageUrl: widget.home.picture,
                placeholder: (context, url) {
                  return Image.asset(
                    'assets/images/house-placeholder.png',
                    fit: BoxFit.cover,
                  );
                },
                errorWidget: (context, url, error) {
                  return Image.asset(
                    'assets/images/house-placeholder.png',
                    fit: BoxFit.cover,
                  );
                },
                fit: BoxFit.cover,
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _scrollingList(ScrollController sc) {
    return ListView.builder(
      controller: sc,
      itemCount: 50,
      itemBuilder: (BuildContext context, int i) {
        return Text("$i");
      },
    );
  }
}

[Jacko120]

Came with the same issue and I figured a way to fix this. I wrapped the SlidingUpPanel with MediaQuery.removePadding and removeTop: true.

MediaQuery.removePadding( context: context, removeTop: true, child: SlidingUpPanel(options) )

[ekimcem]

Thank you so much for this solution, is there any other way to handle it ?