List view scrolls past top widget

Question

I have the following where the List view is created fine under the text widget.
But if I scroll up, it scrolls past the top text widget.

Same issue if I use ListView.Builder. At first thought this persisted only on IOS platform.
But now noticing the same issue in Android too. I have condensed the implmentation such that

You could copy this entire block of code and paste it in https://flutter.dev/docs/get-started/codelab-web
and recreate issue to see it. (Takes a while for it to render though).

Can I please get some advice on what I am doing wrong pls?
Experiencing the same in Emulators and actual mobile devices. Thanks.

import 'package:flutter/material.dart';

void main() {
  runApp(MyAppOne());
}

class MyAppOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Text('The List scrolls behind this text instead of stopping under it'),
              Expanded(
                child: ListView(
                  // hard coded values to simplify. accountTitles is just used to iterate
                  // based on its size which is length 30. Issue exists in this example.
                  children: accountTitles.map((e) => ListTile(
                    tileColor: Color(0xff1B223E),
                    leading: Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                    title: Text(
                      'Some title',
                      style: TextStyle(color: Colors.white),
                    ),
                    trailing: Icon(Icons.home,
                        color: Colors.white),
                  ),).toList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

List<String> accountTitles = [
    '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',  '', '', '', '', '', '', '', '', '', '',
];

Answer 1

You can copy paste run full code below
Solution : Use Material wrap ListView or Use Material wrap ListTile
Source code of ListTile describe https://github.com/flutter/flutter/blob/1fd2f7c400a719931e9fa181a2dd19f1756a0c95/packages/flutter/lib/src/material/list_tile.dart#L731

class ListTile extends StatelessWidget {
  ...
  /// Requires one of its ancestors to be a [Material] widget.
  const ListTile({

and because ListTile use InkWell, The InkWell widget must have a Material widget as an ancestor. https://api.flutter.dev/flutter/material/InkWell-class.html

code snippet

Expanded(
    child: Material(
      child: ListView(

or

Material(
      child: ListTile(
        tileColor: Color(0xff1B223E),

working demo Material wrap ListView

full code with Material wrap ListView

import 'package:flutter/material.dart';

void main() {
  runApp(MyAppOne());
}

class MyAppOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Column(
            children: [
              Text(
                  'The List scrolls behind this text instead of stopping under it'),
              Expanded(
                child: Material(
                  child: ListView(
                    // hard coded values to simplify. accountTitles is just used to iterate
                    // based on its size which is length 30. Issue exists in this example.
                    children: accountTitles
                        .map(
                          (e) => ListTile(
                            tileColor: Color(0xff1B223E),
                            leading: Icon(
                              Icons.home,
                              color: Colors.white,
                            ),
                            title: Text(
                              'Some title',
                              style: TextStyle(color: Colors.white),
                            ),
                            trailing: Icon(Icons.home, color: Colors.white),
                          ),
                        )
                        .toList(),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

List<String> accountTitles = [
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
  '',
];

Answer 2

Is this the expected behavior?

import 'package:flutter/material.dart';

void main() {
  runApp(MyAppOne());
}

class MyAppOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: CustomScrollView(
            slivers: [
              SliverToBoxAdapter(child: Text('The List scrolls behind this text instead of stopping under it'),),
              SliverList(
                  delegate: SliverChildListDelegate(
                  // hard coded values to simplify. accountTitles is just used to iterate
                  // based on its size which is length 30. Issue exists in this example.
                  accountTitles.map((e) => ListTile(
                    tileColor: Color(0xff1B223E),
                    leading: Icon(
                      Icons.home,
                      color: Colors.white,
                    ),
                    title: Text(
                      'Some title',
                      style: TextStyle(color: Colors.white),
                    ),
                    trailing: Icon(Icons.home,
                        color: Colors.white),
                  ),).toList(),
                ),
                  )
            ],
          ),
        ),
      ),
    );
  }
}

List<String> accountTitles = [
    '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '',  '', '', '', '', '', '', '', '', '', '',
];