Flarter LinearGradient Анимация для Draggable

Question

У меня есть Draggable Container со следующим оформлением.

  decoration: BoxDecoration(
      gradient: LinearGradient(
          colors: [ThemeColors.red, ThemeColors.yellow, ThemeColors.green])

Мне бы хотелось, чтобы он анимировался, чтобы мой кадр становился зеленее или краснее, далее я перетаскиваю влево или вправо.

Answer 1

Вот простой пример определения горизонтального перетаскивания и изменения цвета внутри градиента:

class GradientScreen extends StatefulWidget {
  @override
  _GradientScreenState createState() => _GradientScreenState();
}

class _GradientScreenState extends State<GradientScreen> {

  var percentage = 0.0;

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Drag Gradient'),
        centerTitle: true,
      ),
      body: GestureDetector(
        onHorizontalDragUpdate: (details) {
          setState(() => percentage = (details.localPosition.dx - 0) / (width - 0));
        },
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                _colorTween(Colors.green[900], Colors.red[900]),
                Colors.yellow,
                _colorTween(Colors.green[900], Colors.red[900])
              ],
            )
          ),
        ),
      ),
    );
  }

  Color _colorTween(Color begin, Color end) {
    return ColorTween(begin: begin, end: end).transform(percentage);
  }
}

---

Результат этой простой реализации следующий:

---