Flutter ListView scroll animation overlapping sibling widget

Question

Hoping someone can help with this and it's not a bug and it's just me being silly.

There is very strange behavior from listview when it's not taking the full length of the screen and in a column.

When you scroll down, the animation at max extent persists and overlaps. I'm assuming this is a bug and not by design.

Here's the simple code to reproduce.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<MessageItem>.generate(
      33,
      (i) => MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

class MyApp extends StatelessWidget {
  final List<MessageItem> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  final item = items[index];

                  return ListTile(
                    title: item.buildTitle(context),
                    subtitle: item.buildSubtitle(context),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// A ListItem that contains data to display a message.
class MessageItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  Widget buildTitle(BuildContext context) => Text(sender);

  Widget buildSubtitle(BuildContext context) => Text(body);
}

Solution 1

So final code will be. I have added the scroll phisycs BouncingScrollPhysics.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp(
    items: List<MessageItem>.generate(
      33,
      (i) => MessageItem("Sender $i", "Message body $i"),
    ),
  ));
}

class MyApp extends StatelessWidget {
  final List<MessageItem> items;

  MyApp({Key key, @required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final title = 'Mixed List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Column(
          children: [
            Expanded(
              child: Container(
              ),
            ),
            Expanded(
              child: ListView.builder(
                physics: BouncingScrollPhysics(
                    parent: AlwaysScrollableScrollPhysics()),
                itemCount: 50,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("${index + 1}"),
                    subtitle: Text("${index + 1}"),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

/// A ListItem that contains data to display a message.
class MessageItem {
  final String sender;
  final String body;

  MessageItem(this.sender, this.body);

  Widget buildTitle(BuildContext context) => Text(sender);

  Widget buildSubtitle(BuildContext context) => Text(body);
}

Solution 2

I'm not sure if this is a bug or not. Or if my solution is the correct way of doing it, or not. But this work

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverOverlapAbsorber(
            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
            sliver: SliverAppBar(
              backgroundColor: Colors.white,
              toolbarHeight: 200,
              pinned: true,
              forceElevated: innerBoxIsScrolled,
            ),
          ),
        ];
      },
      body: Container(
          child: SafeArea(
        top: false,
        bottom: false,
        child: Builder(
          builder: (BuildContext context) {
            return CustomScrollView(
              key: PageStorageKey<String>("name"),
              slivers: <Widget>[
                SliverOverlapInjector(
                  handle:
                      NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                ),
                SliverPadding(
                  padding: const EdgeInsets.all(8.0),
                  sliver: SliverFixedExtentList(
                    itemExtent: 48.0,
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return ListTile(
                          title: Text('Item $index'),
                        );
                      },
                      childCount: 30,
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      )),
    );
  }

The reason I don't like this is that I'm putting non-bar content in an AppBar.

If anyone has a better solution please let me know.

Comments

[Ali_R]

Ps. Better yet. set appbar height to 0. And put that in a column!

[Ali_R]

Thank you for your response. But I want that container there. My issue is the overlapping into the upper container. As you can see in the gif, the blue blob carries onto the upper container. I want fixed content at the top, and, scrolling content in the bottom half

[Salim Murshed]

put some fixed height of container, if you set Expanded, it will do like the gif

[Ali_R]

With the fixed container height this is what it does ibb.co/NWKZc16. Again I've resolved the issue by using nested scroll view. It's an overcomplicated solution to something that should be straight forward.

[Salim Murshed]

You can stop the total overflow