在同一个屏幕抖动上对多个小部件进行动画处理

Question

我需要从左到右的幻灯片动画，请参见屏幕截图image

有人可以给我任何指导，我应该在其中使用哪个小部件？我已经尝试过一些类似的事情：-carousel_slider，transformer_pageview，page_transformer

我使用了SlideTransition类，但是没有给我预期的结果，我也尝试了OffSet的不同范围/值，但是没有运气。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<Offset> _offsetAnimation;

  AnimationController _controllerTwo;
  Animation<Offset> _offsetAnimationTwo;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _offsetAnimation = Tween<Offset>(
      begin: const Offset(-0.00001, 0.0),
      end: const Offset(0.09, 0.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    ));
    _controllerTwo = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _offsetAnimationTwo = Tween<Offset>(
      begin: const Offset(-0.85, 0.0),
      end: const Offset(-0.00001, 0.0),
    ).animate(CurvedAnimation(
      parent: _controllerTwo,
      curve: Curves.easeInOut,
    ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          child: new GestureDetector(
            onHorizontalDragUpdate: (details) {
              if (details.primaryDelta > 0) {
                _controller..reverse();
                _controllerTwo..reverse();
              }
              if (details.primaryDelta < 0) {
                _controller..forward();
                _controllerTwo..forward();
              }
              print(details.primaryDelta);
            },
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                SlideTransition(
                  position: _offsetAnimationTwo,
                  child: Card(
                    color: Colors.black54,
                    child: Container(),
                  ),
                ),
                Flexible(
                  child: SlideTransition(
                    position: _offsetAnimation,
                    child: Container(
                      child: SlidingUpPanel(
                        renderPanelSheet: false,
                        panel: _floatingStatement(),
                        body: CardsStack(context),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        )
      ],
    );
  }

  Widget _floatingStatement() {
    return Container(
      margin: const EdgeInsets.all(24.0),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(Radius.circular(24.0)),
        boxShadow: [
          BoxShadow(
            blurRadius: 20.0,
            color: Colors.grey,
          ),
        ],
      ),
    );
  }
}

class CardsStack extends StatelessWidget {
  const CardsStack(BuildContext context, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Positioned(
          top: 20,
          left: 10,
          right: 10,
          child: Card(
            color: Colors.black54,
            child: Container(),
          ),
        ),
        Positioned(
          top: 70,
          left: 10,
          right: 10,
          child: Card(
            color: Colors.black54,
            child: Container(),
          ),
        ),
        Positioned(
          top: 120,
          left: 10,
          right: 10,
          child: Card(
            color: Colors.black54,
            child: Container(),
          ),
        ),
      ],
    );
  }
}

Answer 1

您可以使用PageView在页面之间水平（甚至垂直）滑动。

或者您可以使用TabBarView通过底部导航实现它。

示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        body: TabBarView(
          children: <Widget>[
            Center(child: Text("Page1")),
            Center(child: Text("Page2")),
            Center(child: Text("Page3")),
          ],
        ),
        bottomNavigationBar: Container(
          decoration: const BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10.0),
              topRight: Radius.circular(10.0),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black,
                offset: Offset(0, 0),
                blurRadius: 10.0,
              ),
            ],
          ),
          child: TabBar(
            indicatorColor: Colors.red,
            indicatorWeight: 5.0,
            indicatorSize: TabBarIndicatorSize.label,
            labelColor: Colors.black,
            tabs: <Widget>[
              Tab(icon: Icon(Icons.home)),
              Tab(icon: Icon(Icons.category)),
              Tab(icon: Icon(Icons.account_circle)),
            ],
          ),
        ),
      ),
    );
  }
}