Нарисуйте внешние границы списка в Flutter

Question

Я хочу изменить свой элемент так, чтобы он был больше самого списка. (намерение для сфокусированной навигации)

Мой список:

        Container(
          height: 100,
          child: ListView.builder(
            itemBuilder: (context, index) => HomeItem(title: '$index'),
            scrollDirection: Axis.horizontal,
          ),
        ),

Мой товар:

class HomeItem extends StatelessWidget {
  final String title;
  final bool expand;

  const HomeItem({
    @required this.title,
    this.expand = false,
  });

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: ThemeDimens.padding8),
      child: Transform.scale(
        scale: expand ? 1.5 : 1,
        child: AnimatedContainer(
          width: 50,
          height: 100,
          color: expand ? ThemeColors.accent : ThemeColors.primary,
          duration: ThemeDurations.shortAnimationDuration(),
          child: Center(
            child: Text(title),
          ),
        ),
      ),
    );
  }
}

Текущее поведение

Ожидаемое поведение

Answer 1

Если вы попытаетесь использовать OverflowBox или Transform, содержимое элемента будет по-прежнему обрезаться и не будет отображаться за пределами его ограничительной рамки. Но можно использовать Overlay , чтобы нарисовать элемент в верхней части списка и поместить его в определенный элемент списка c, хотя это немного сложно.

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  final elements = List.generate(12, (i) => i);

  int selectedIndex;
  OverlayEntry overlayEntry;
  List<LayerLink> layerLinks;

  @override
  void initState() {
    super.initState();

    // Creating a layer link for each list cell
    layerLinks = List.generate(elements.length, (i) => LayerLink());
  }

  void createOverlayEntry(int i, BuildContext context) {
    // Removing an overlay entry, if there was one
    overlayEntry?.remove();

    final renderBox = context.findRenderObject() as RenderBox;
    final size = renderBox.size;
    final offset = renderBox.localToGlobal(Offset.zero);

    // Creating a new overlay entry linked to specific list element
    overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        left: 0,
        top: 0,
        child: CompositedTransformFollower(
          link: layerLinks[i],
          showWhenUnlinked: false,
          offset: Offset(-20, 0),
          child: Material(
            color: Colors.yellow,
            child: InkWell(
              onTap: () {
                setState(() {
                  selectedIndex = null;
                });

                overlayEntry?.remove();
                overlayEntry = null;
              },
              child: Container(
                alignment: Alignment.center,
                width: 70,
                height: elementHeight,
                child: Text('$i')
              ),
            )
          ),
        )
      )
    );

    // Inserting an entry
    Overlay.of(context).insert(overlayEntry);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        height: elementHeight,
        child: ListView.separated(
          scrollDirection: Axis.horizontal,
          itemCount: elements.length,
          itemBuilder: (c, i) {
            return CompositedTransformTarget(
              link: layerLinks[i],
              child: Material(
                color: Colors.red,
                child: InkWell(
                  onTap: () {
                    setState(() {
                      selectedIndex = i;
                    });

                    createOverlayEntry(i, context);
                  },
                  child: Container(
                    alignment: Alignment.center,
                    width: 30,
                    child: Text('${elements[i]}'),
                  ),
                ),
              ),
            );
          },
          separatorBuilder: (c, i) {
            return Container(width: 10, height: 10);
          },
        ),
      ),
    );
  }
}