flutter - 如何在同一个小部件中向页面（每个页面中的不同文本和图像）添加滑动过渡？

Question

我试图实现我自己的 AppTour 它工作正常，但我想添加一个幻灯片过渡，其中上一页从右到左滑动并离开屏幕视口，下一个屏幕从视口外部进入屏幕（从右到左） . 顾名思义，我阅读了有关 SlideTransition 的信息，它正在使用单个小部件，我很困惑如何将它链接到我的多个页面。我的页面更改由 setState 完成，只需更改图像和文本以及 selectedIndex 即可将旧页面替换为新页面。如何实现当前页出屏和下一页同时进屏的幻灯片切换。到目前为止，我所做的如下所示。这是我迄今为止能够实现的一个工作示例，这里也是codepen的链接https://codepen.io/nimishbansal/pen/RwrjdNN （注意：增加codepen中的编辑器大小以查看移动ui纵向版本）

import 'dart:async';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AppInitialTour(),
    );
  }
}

const skipTourForTesting = true;

class _TourScreen {
  final String text;
  final String imagePath;

  _TourScreen({this.text, this.imagePath});
}

/// Pages for the screens thar are displayed in app tour.
List<_TourScreen> _pages = [
  _TourScreen(text: "Page 1", imagePath: 'https://www.clker.com/cliparts/G/O/f/1/7/n/number-1-hi.png'),
  _TourScreen(text: "Page 2", imagePath: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/NYCS-bull-trans-2.svg/1024px-NYCS-bull-trans-2.svg.png'),
  _TourScreen(text: "Page 3", imagePath: 'https://webstockreview.net/images/3-clipart-three-2.png')
];

/// App tour that is shown once user launches the app for the first time.
class AppInitialTour extends StatefulWidget {
  @override
  _AppInitialTourState createState() => _AppInitialTourState();
}

class _AppInitialTourState extends State<AppInitialTour> {
  int _selectedIndex = 1;

  int _totalItems = 3;

  List<Image> imageWidgets = [];

  @override
  void initState(){
    for(var page in _pages){
      imageWidgets.add(Image.network(page.imagePath),);
    }
    super.initState();
  }

  @override
  void didChangeDependencies() {
    for(var im in imageWidgets){
      precacheImage(im.image, context);
    }
    super.didChangeDependencies();

  }

  @override
  Widget build(BuildContext context) {
    var _screenWidth = MediaQuery.of(context).size.width;
    var _screenHeight = MediaQuery.of(context).size.height;
    var _buttonTextStyle = TextStyle(fontSize: 18, color: Colors.grey[600]);
    var _imageWidth = 0.75 * _screenWidth;
    var _imageHeight = 0.8 * _imageWidth;
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(
          backgroundColor: Colors.transparent,
        ),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Stack(
            children: [
              Container(
                width: _screenWidth,
                height: 0.8 * _screenHeight,
                color: Color(0xFF45d6b9),
              ),
              Positioned(
                top: 0.25 * _screenHeight,
                left: 0.12 * _screenWidth,
                child: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    width: _imageWidth,
                    height: _imageHeight,
                    child: Image.network(
                     _pages[_selectedIndex - 1].imagePath,
                      width: double.infinity,
                      height: double.infinity,
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              Text(_pages[_selectedIndex - 1].text),
            ],
          ),

          // Current Index Indicator
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              for (int i = 1; i <= _totalItems; i++)
                Container(
                  margin: EdgeInsets.all(4),
                  width: 12,
                  height: 12,
                  decoration: BoxDecoration(
                      border: Border.all(color: Colors.black),
                      color: i == _selectedIndex
                          ? Color(0xFF45d6b9)
                          : Colors.white,
                      shape: BoxShape.circle),
                )
            ],
          ),

          SizedBox(
            height: 0.04 * _screenHeight,
          ),
          Row(
            children: [
              _selectedIndex < _totalItems
                  ? FlatButton(
                      child: Text(
                        'Skip',
                        style: _buttonTextStyle,
                      ),
                      onPressed: () {},
                    )
                  : Container(),
              Spacer(),
              FlatButton(
                child: Text(
                  _selectedIndex < _totalItems ? 'Next' : 'Done',
                  style: _buttonTextStyle,
                ),
                onPressed: _selectedIndex < _totalItems
                    ? () {
                        setState(() {
                          _selectedIndex += 1;
                        });
                      }
                    : () => _handleOnTapDone(context),
              ),
            ],
          )
        ],
      ),
    );
  }

  void _handleOnTapDone(BuildContext context) {
    print("end");
  }
}

怎么能达到这样的滑动效果

标签： flutterdartflutter-animation