Flutter slider bar animation

Bruno Antonieto

I wrote this code that is basically a slide bar with a fixed value between 0 and 100. When I press the shuffle button its value (jovirometro.toDouble variable) changes. All I wish to make is an animation that slides from a value to other. The user doesn't interact with the slider.

Here's how it looks now

child: Container(
  height: 10,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 0.1),
    gradient: LinearGradient(
        colors: [
          Colors.red,
          Colors.redAccent,
          Colors.white,
          Colors.lightGreenAccent,
          Colors.green
        ]
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  child: SliderTheme(
    data: SliderTheme.of(context).copyWith(
      activeTrackColor: Colors.white,
      inactiveTrackColor: Colors.white,
      trackHeight: 0.1,
      thumbColor: Colors.white,
      thumbShape: CustomSliderThumbShape(enabledThumbRadius: 10),
      overlayColor: Colors.white.withAlpha(1),
    ),
    child: Slider(
      min: 0,
      max: 100,
      value: jovirometro.toDouble(),
      onChanged: (value){setState((){});},
    ),
  ),
),

The jovirometro's variable is

var jovirometro = snapshot.data.documents[_word]['jovirometro'];

from the Firestore server, and the shuffle button changes the "_word" parameter.

Philip Ch'ng

I was having the same issue and managed to solved mine with AnimatedBuilder.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              height: 10,
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 0.1),
                gradient: LinearGradient(colors: [
                  Colors.red,
                  Colors.redAccent,
                  Colors.white,
                  Colors.lightGreenAccent,
                  Colors.green
                ]),
                borderRadius: BorderRadius.circular(10),
              ),
              child: AnimatedBuilder(
                animation: _animationController,
                builder: (_, __) {
                  return SliderTheme(
                    data: SliderTheme.of(context).copyWith(
                      activeTrackColor: Colors.white,
                      inactiveTrackColor: Colors.white,
                      trackHeight: 0.1,
                      thumbColor: Colors.white,
                      overlayColor: Colors.white.withAlpha(1),
                    ),
                    child: Slider(
                      value: _animationController.value,
                      onChanged: null,
                    ),
                  );
                },
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _animationController.animateTo(Random().nextDouble());
        },
        child: Icon(Icons.autorenew),
      ),
    );
  }
}

I've created a codepen based on your code and my solution to it.

https://codepen.io/pczn0327/pen/XWXYKap

Collected from the Internet

Please contact [email protected] to delete if infringement.