I am trying to scroll to an item in a list after a modal bottom sheet has animated into view. The item should scroll so that it's bottom edge is visible above the bottom sheet. The problem with the example below is that the context of the list item is null after the bottom sheet has shown. How can I achieve this?

Here is a minimum working example:

import 'package:flutter/material.dart';

const ITEMS = [
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19
];
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(context),
    );
  }

  Widget _buildBody(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
            children: ITEMS.map((i) => _buildItem(context, i)).toList()));
  }

  Widget _buildItem(BuildContext context, int index) {
    final itemKey = GlobalKey();
    return Card(
        key: key,
        color: index % 2 == 0 ? Colors.red : Colors.blue,
        child: ListTile(
          title: Text('Item $index'),
          onTap: () {
            _tappedItemAsync(context, index, itemKey);
          },
        ));
  }

  Future<void> _tappedItemAsync(
      BuildContext context, int index, GlobalKey itemKey) async {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return BottomSheet(
              enableDrag: false,
              onClosing: () {},
              builder: (c) {
                return const SizedBox(
                  height: 400,
                );
              });
        });

    final itemContext = itemKey.currentContext;
    if (itemContext is BuildContext) {
      print("Item has non-null context. Scrolling to it.");
      await Scrollable.ensureVisible(itemContext);
    } else {
      print("Item context is null");
    }
  }
}


Solution 1: Ollie

I solved this using the package scroll_to_index and setting body padding after the bottom sheet builds:

import 'package:flutter/material.dart';
import 'package:scroll_to_index/scroll_to_index.dart';

const ITEMS = [
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19
];
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  // padding must exit faster bottom sheet otherwise it shows
  final paddingDuration = const Duration(milliseconds: 200);
  final scrollController = AutoScrollController();
  MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  double _bottomSheetHeight = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedPadding(
          duration: widget.paddingDuration,
          padding: EdgeInsets.only(bottom: _bottomSheetHeight),
          child: _buildBody(context)),
    );
  }

  Widget _buildBody(BuildContext context) {
    return ListView.builder(
        controller: widget.scrollController,
        itemCount: 20,
        itemBuilder: (context, index) {
          return AutoScrollTag(
              key: ValueKey(index),
              controller: widget.scrollController,
              index: index,
              child: _buildItem(context, index));
        });
  }

  Widget _buildItem(BuildContext context, int index) {
    return Card(
        color: index % 2 == 0 ? Colors.red : Colors.blue,
        child: ListTile(
          title: Text('Item $index'),
          onTap: () {
            _tappedItemAsync(context, index);
          },
        ));
  }

  Future<void> _tappedItemAsync(BuildContext context, int index) async {
    // start showing the bottom sheet
    final bottomSheetKey = GlobalKey();
    final bottomSheetClosedFuture = showModalBottomSheet(
        context: context,
        builder: (context) {
          return BottomSheet(
              key: bottomSheetKey,
              enableDrag: false,
              onClosing: () {},
              builder: (c) {
                return const SizedBox(
                  height: 400,
                );
              });
        });
    // when the bottom starts closing reset the body padding
    bottomSheetClosedFuture.then((value) {
      setState(() {
        _bottomSheetHeight = 0;
      });
    });

    // wait for the bottom sheet to have height
    // then update the body padding
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      final bottomSheetHeight = bottomSheetKey.currentContext?.size?.height;
      if (bottomSheetHeight == null) {
        throw Exception('bottomsheet has no height');
      }
      if (_bottomSheetHeight != bottomSheetHeight) {
        setState(() {
          _bottomSheetHeight = bottomSheetHeight;
        });
      }
    });

    // wait for the body padding to finish animating
    await Future.delayed(
        const Duration(milliseconds: 85) + widget.paddingDuration);

    // scroll the item into bottom of newly constrained viewport
    await widget.scrollController.scrollToIndex(index,
        preferPosition: AutoScrollPosition.end,
        duration: widget.paddingDuration);
  }
}