相对于颤动列表视图中所选项目的位置指示器

Question

我有一个带有列表视图和指示器视图的行。我想为列表中所选项目的指示器视图设置动画。 如果我在列表视图中选择一个项目，指示器视图应移动到给定图像中的相应位置。

请提出一些建议来制作此 UI。

示例代码如下。

@override
  Widget build(BuildContext context) {
    return Row(
      children: [
        ListView.builder(
          shrinkWrap: true,
          itemCount: 6,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(13),
            child: Text('Item$index'),
          ),
        ),
        Stack(
          children: [
            SvgPicture.asset(
              'assets/images/scale_img.svg',
            ),
            Positioned(
              right: 26,
              top: 310,
              child:Container(
                width: 40,
                height: 4,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    gradient: const LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Color(0xffFF7EB4),
                          Color(0xffAA16CF),
                        ]),
                    boxShadow: const [
                      BoxShadow(
                        blurRadius: 10,
                        spreadRadius: -1,
                        offset: Offset(0, 4),
                        color:   Color(0xffAA16CF),
                      )
                    ]),
              ),
            )
          ],
        )
      ],
    );
  }
enter code here

Answer 1

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Indicator Animation Example'),
        ),
        body: IndicatorListView(),
      ),
    );
  }
}

class IndicatorListView extends StatefulWidget {
  @override
  State<IndicatorListView> createState() => _IndicatorListViewState();
}

class _IndicatorListViewState extends State<IndicatorListView> {
  int selectedIndex = -1;
  int itemCount = 50;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          itemCount: itemCount,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
              selected: index == selectedIndex,
              onTap: () {
                setState(() {
                  selectedIndex = index;
                });
              },
            );
          },
        ),
        AnimatedPositioned(
          top: selectedIndex * (MediaQuery.of(context).size.height / itemCount),
          right: 0,
          duration: const Duration(milliseconds: 300),
          child: Container(
            height: MediaQuery.of(context).size.height / itemCount,
            width: 16,
            color: Colors.red,
          ),
        ),
      ],
    );
  }
}