如何在flutter中制作从右到左的图片动画

如何解决如何在flutter中制作从右到左的图片动画

如何在Flutter中制作这种类型的动画？

我附上了一个 YouTube video。我制作了很多动画，但没有一个能解决我现在面临的这个问题。

请导入：awesome_slider: ^0.1.0

这是我试过的代码：

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

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

class _Submitsstate extends State<Submits> {

  int valuess = 0;
   List itemWidget = [
           AnimatedContainer(
                           transform:Matrix4.translationValues(0,0),// Use the properties stored in the State class.
                      key: UniqueKey(),child: Center(
                         child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,240,),width: 400,height: 300,decoration: Boxdecoration(
                      gradient: LinearGradient(colors: [Colors.red,Colors.red]),color: Colors.blue,// Define how long the animation should take.
                    duration: Duration(seconds: 0),// Provide an optional curve to make the animation feel smoother.
                    curve: Curves.elasticInOut,AnimatedContainer(
               transform:Matrix4.translationValues(10,child: Center(
                        child: Padding(
                          padding: const EdgeInsets.fromLTRB(10,child: Text("To a very little extent"),Colors.orange]),image: decorationImage(image: Assetimage("assets/images/Artboard 1.png")),AnimatedContainer(
                      transform:Matrix4.translationValues(10,child: Text("To a little extent"),decoration: Boxdecoration(
                      gradient: LinearGradient(colors: [Colors.orange,Colors.yellow]),image: decorationImage(image: Assetimage("assets/images/Artboard 2.png")),AnimatedContainer(
                          transform:Matrix4.translationValues(0,child: Text("To some extent"),Colors.green]),image: decorationImage(image: Assetimage("assets/images/Artboard 3.png")),AnimatedContainer(
                       transform:Matrix4.translationValues(0,child: Text("To a great extent"),decoration: Boxdecoration(
                      gradient: LinearGradient(colors: [Colors.yellow,image: decorationImage(image: Assetimage("assets/images/Artboard 4.png")),AnimatedContainer(
                    // Use the properties stored in the State class.
                      key: UniqueKey(),child: Text("To a very great extent"),decoration: Boxdecoration(
                      gradient: LinearGradient(colors: [Colors.green,image: decorationImage(image: Assetimage("assets/images/Artboard 5.png")),];



   @override
  Widget build(BuildContext context) {
    return Scaffold(

body: Center(
  child:   Container(
                                    child: Column(children: [
                                  Container(
              height:300,child: AnimatedSwitcher(
                switchInCurve: Curves.linear,child: itemWidget[valuess],duration: Duration(seconds: 1),AwesomeSlide(
  
                    value: valuess.todouble(),min: 0,max: 5,thumbSize: 80.0,inactiveLineColor: Colors.grey,activeLineColor:Color(0xffe64a19),child: Material(
  
                                type: MaterialType.card,color: Colors.transparent,child: Image.asset( "assets/images/SliderTop.png"),onChanged: (value) {
  
                        valuess = value.toInt();
                            setState(() {
                              
                            });   },],);
  }
}

解决方法

这可以通过 PageView、ListVeiw 或 Stack 来完成。

这是完整的代码：

使用 PageView 使其也可滚动

class ViwerWidget extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    ValueNotifier<double> page = ValueNotifier(0.0);

    final viewportFraction = 0.5;

    final pageWidth = size.width * 0.5;

    final pageController = usePageController(
      viewportFraction: viewportFraction,);

    pageController.addListener(() {
      page.value = pageController.page!;
    });

    final pages = [
      Icon(
        Icons.ac_unit,size: 100,),Icon(
        Icons.access_alarm_rounded,Icon(
        Icons.accessibility_new,Icon(
        Icons.account_box_rounded,];

    return Scaffold(
      body: Column(
        children: [
          SizedBox(height: 100),Container(
            color: Colors.red,width: pageWidth,height: 300,child: PageView.builder(
              controller: pageController,itemCount: pages.length,pageSnapping: false,itemBuilder: (context,index) => ValueListenableBuilder(
                valueListenable: page,builder: (context,double value,child) {
                  final scale = (value - index + 1).abs() * 2;

                  final opacity = (1 - ((value - index).abs())).clamp(0.0,1.0);

                  return Opacity(
                    opacity: opacity,child: Transform.scale(
                      scale: scale,child: pages[index],);
                },Spacer(),ValueListenableBuilder(
            valueListenable: page,child) => Slider(
              value: value,max: pages.length - 1,min: 0.0,onChanged: (value) {
                page.value = value;
                pageController.jumpTo(value * pageWidth * viewportFraction);
              },)
        ],);
  }
}

当然，您可以更多地使用这些值来达到预期的结果。