Flutter:在 2 个 LinearGradients 之间淡入淡出

Question

我想在按下按钮时将 LinearGradient 淡入具有不同颜色的不同 LinearGradient，例如来自

Container(
  decoration: BoxDecoration(
  gradient: LinearGradient(
  begin: Alignment.bottomLeft,
  end: Alignment.topRight,
  stops: [0.1, 0.5, 0.7, 0.9],
  colors: [
    Colors.blue[700],
    Colors.blue[600],
    Colors.blue[500],
    Colors.blue[300],
    ],
  )),
),

到

Container(
  decoration: BoxDecoration(
  gradient: LinearGradient(
  begin: Alignment.bottomLeft,
  end: Alignment.topRight,
  stops: [0.1, 0.5, 0.7, 0.9],
  colors: [
    Colors.red[700], // different color
    Colors.red[600],
    Colors.red[500],
    Colors.red[300],
    ],
  )),
),

我该怎么做？

Answer 1

您可以使用 AnimatedContainer 来做到这一点。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {

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

class _MyAppState extends State<MyApp> {
  List<Color> change = [Colors.blue[700],Colors.blue[600],Colors.blue[500],Colors.blue[300]];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
        ),
        backgroundColor: Colors.transparent,
        body: InkWell(
          onTap: (){
            change[0] = Colors.red[700];
            change[1] = Colors.red[600];
            change[2] = Colors.red[500];
            change[3] = Colors.red[300];
          },
          child: AnimatedContainer(
            child: Center(child: new Text("hello")),
            duration: Duration(seconds: 5),
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.bottomLeft,
                end: Alignment.topRight,
                stops: [0.1, 0.5, 0.7, 0.9],
                colors: [
                    change[0],
                    change[1],
                    change[2],
                    change[3],
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}