颤动轮播视图

Question

我想要一个像这样工作的轮播效果。

我访问的每个 SO 问题在主图像的左侧和右侧都有 1 个主图像和 2 个部分图像。甚至官方的 flutter 包也以同样的方式工作。如何实现上面的轮播效果？

到目前为止我的代码。

class HowItWorksCards extends StatefulWidget {
  HowItWorksCards();

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

class _HowItWorksCardsState extends State<HowItWorksCards> {
  int _currentPage = 0;
  PageController _pageController =
      PageController(viewportFraction: 0.8, keepPage: true);

  List<Widget> _pages = [
    SliderPage(
        index: 1,
        title: "What is ZOLink?",
        info: "",
        image: "assets/images/howItWorks/1.png"),
    SliderPage(
        index: 2,
        title: "How do I generate my ZOLink?",
        info: "",
        image: "assets/images/howItWorks/2.png"),
    SliderPage(
        index: 3,
        title: "Share & Earn",
        info: "",
        image: "assets/images/howItWorks/4.png"),
  ];

  _onchanged(int index) {
    setState(() {
      _currentPage = index;
    });
  }

Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Flexible(
          flex: 5,
          child: Container(
            height: 105,
            child: (PageView.builder(
                controller: _pageController,
                physics: BouncingScrollPhysics(),
                scrollDirection: Axis.horizontal,
                itemCount: _pages.length,
                onPageChanged: _onchanged,
                itemBuilder: (context, int index) {
                  return _pages[index];
                })),
          ),
        ),
        Flexible(
          flex: 4,
          child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: List<Widget>.generate(
                _pages.length,
                (int index) {
                  return AnimatedContainer(
                      duration: Duration(milliseconds: 300),
                      height: 5,
                      width: (index == _currentPage) ? 30 : 10,
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 10),
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(5),
                          color: (index == _currentPage)
                              ? AppTheme.globalTheme.primaryColor
                              : AppTheme.globalTheme.primaryColor
                                  .withOpacity(0.5)));
                },
              )),
        ),
      ],
    );
  }


class SliderPage extends StatelessWidget {
  final String image;
  final int index;
  final String title;
  final String info;

  SliderPage(
      {@required this.image,
      @required this.info,
      @required this.title,
      @required this.index});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: const Color(0xffd9f4f3),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(2.0),
      ),
      child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(left: 5),
                    child: Text(this.title,
                        style: getFontStyle(
                            bold: true,
                            color: Color(0xFF3C3C43),
                            fontSize: 18,
                            fontStyle: FontStyles.SFProDisplay),
                        textAlign: TextAlign.center),
                  ),
                ],
              ),
            ),
          ]),
    );
  }
}

这会产生这个输出。