Флаертер анимация фонового изображения на перетаскивании

Я пытаюсь создать виджет, который позволяет пользователю изменять значение путем перетаскивания. Подобно слайдеру, но отличается в том смысле, что фон перетаскивается, пока «индикатор значения» остается фиксированным.

У меня есть функциональность, но я не уверен, как оживить пакет « импорт фона »: flutter / material.dart ; class SliderTest расширяет StatefulWidget { @override _SliderTestState createState () => _SliderTestState (); } class _SliderTestState расширяет State < SliderTest > { double foo = 100.0 ; @Override Widget сборки ( BuildContext контекст ) { вернуть новый эшафот ( appBar : новый AppBar ( название : новый текст ( 'SliderTest' ), ), body : new Builder ( строитель : ( контекст ) { return new Center ( child : new Column ( children : < Widget > [ new Text ( "$ foo » ), новая строка ( дети : < Widget > [ новый расширенный ( ребенок : новый GestureDetector ( ребенок : новый контейнер ( высота : 80,0 , украшение : новый BoxDecoration ( изображение : новый DecorationImage ( изображение : новый AssetImage ( " resources / scale.png " ), повторите : ImageRepeat . repeatX ) ), ), onHorizontalDragUpdate : ( d ) { if ( d . primaryDelta > = 1.0 || d . primaryDelta <= - 1.0 ) { //print(d.primaryDelta); setState (( ) { foo + = d . primaryDelta ; }); } }, ) ) ], ), ], ), ); }) ); } }, чтобы дать ему перемещение / перетаскивание.

Transform

Как сделать фоновое изображение «перемещаться» синхронно с перетаскиванием?

flutter,flutter-animation,

0

Ответов: 1


1 принят

Дайте мне знать, если это то, что вы хотите, в основном я помещаю containerвиджет внутри Imageи внутри него. Я помещаю ваше изображение в виде Imageвиджета.

  import 'package:flutter/material.dart';

  class SliderTest extends StatefulWidget {
  @override
    _SliderTestState createState() => _SliderTestState();
  }

  class _SliderTestState extends State<SliderTest> {
  double foo = 100.0;

  @override
  Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar(
      title: new Text('SliderTest'),
    ),
    body: new Builder(builder: (context) {
      return new Center(
        child: new Column(
          children: <Widget>[
            new Text("$foo"),
            new Row(children: <Widget>[
              new Expanded(
                child: new GestureDetector(
                  child: new Container(
                    height: 80.0,
                    child: new Transform.translate(
                      offset: new Offset(foo, 0.0),
                      child: new Image.asset("resources/scale.png"),
                    ),
                  ),
                  onHorizontalDragUpdate: (d) { 
                    if(d.primaryDelta >= 1.0 || d.primaryDelta <= - 1.0)
                    {
                      //print(d.primaryDelta); 
                      setState(() {
                        foo += d.primaryDelta;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }
флаттер, флаттер-анимация,
Похожие вопросы