CODEWITHSUNDEEP
flutterflutter-animation
TommyF
TommyF

Reputation: 7160

Flutter animate background image on drag

I'm trying to build a widget that allows the user to change a value by dragging. Similar to a Slider but different in the sense that the background is being dragged while the "value indicator" stays fixed.

I've got the functionality down but I'm not sure how to animate the background image properly to give it a sliding/dragging interaction.

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,
                  decoration: new BoxDecoration(
                    image: new DecorationImage(
                      image: new AssetImage("resources/scale.png"),
                      repeat: ImageRepeat.repeatX
                    )
                  ),
                ),
                onHorizontalDragUpdate: (d) { 
                  if(d.primaryDelta >= 1.0 || d.primaryDelta <= - 1.0)
                  {
                    //print(d.primaryDelta); 
                    setState(() {
                      foo += d.primaryDelta;
                    });
                  }
                },
                )
              )
            ],
          ),
        ],
      ),
    );
  })
);
}
}

How do I make the background image "move" in sync with the dragging?

Upvotes: 0

Views: 4490

Answers (1)

diegoveloper
diegoveloper

Reputation: 103541

Let me know if this is what you want, basically I put a Transform widget inside your container and inside it I put your image as Image widget. 

  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;
                      });
                    }
                  },
                  )
                )
              ],
            ),
          ],
        ),
      );
    })
  );
  }
  }

Upvotes: 2

Related Questions