Flutter 颤振：在2个线性半径之间衰减

我想在按下按钮（例如，从）时，将一个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],
    ],
  )),
),

到

---

如何执行此操作？

最简单的解决方案是为按钮指定某种状态，使容器成为动画容器，并向装饰参数添加条件。类似于我为这个问题创建的类。在它里面，我让你的止损点和颜色列表保持不变，这样你的渐变也可以保持不变。然后您传递一个“text”参数，然后您可以选择有一个onPressed回调，它将告诉您它的状态。我将其设置为一个类，以避免对整个父窗口小部件调用setState，并给出了常量以举例说明良好实践。尽量避免在构建方法中放置此类内容

const _stops = [0.1, 0.5, 0.7, 0.9];

const _redColors = [
  Color(0xFFD32F2F), // different color
  Color(0xFFE53935),
  Color(0xFFF44336),
  Color(0xFFE57373),
];

const _blueColors = [
  Color(0xFF1976D2),
  Color(0xFF1E88E5),
  Color(0xFF2196F3),
  Color(0xFF64B5F6),
];

const _red = const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
      stops: _stops,
      colors: _redColors,
    )
);
const _blue = const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
      stops: _stops,
      colors: _blueColors,
    )
);


class RedBlueButton extends StatefulWidget {
  final Function(bool) onPressed;
  final String text;
  final String submittedText;

  const RedBlueButton({Key key, this.onPressed, this.text, this.submittedText}) : super(key: key);

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

class _RedBlueButtonState extends State<RedBlueButton> {

  bool pressed = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        setState(() {
          pressed = !pressed;
          if(widget.onPressed != null)
            widget.onPressed(pressed);
        });
      },
      child: AnimatedContainer(
        duration: kThemeChangeDuration,
        decoration: pressed ? _red : _blue,
        alignment: Alignment.center,
        padding: EdgeInsets.symmetric(
          horizontal: 10,
          vertical: 5
        ),
        child: Text(
          pressed ? widget.text ?? 'submit' : widget.submittedText ?? 'sent',
          style: TextStyle(
              color: Colors.white
          ),
        ),
      ),
    );
  }
}

const_stops=[0.1,0.5,0.7,0.9]；
常数_redColors=[
颜色（0xFFD32F2F），//不同的颜色
颜色（0xFFE53935），
颜色（0xFFF44336），
颜色（0xFFE57373），
];
常量蓝色=[
颜色（0xFF1976D2），
颜色（0xFF1E88E5），
颜色（0xFF2196F3），
颜色（0xFF64B5F6），
];
常量红=常量框装饰(
梯度：线性梯度(
开始：对齐。左下角，
结束：对齐。右上角，
停止：_停止，
颜色：_redColors，
)
);
常量蓝=常量框装饰(
梯度：线性梯度(
开始：对齐。左下角，
结束：对齐。右上角，
停止：_停止，
颜色：蓝色，
)
);
类RedBlueButton扩展StatefulWidget{
最终功能（bool）已按下；
最终字符串文本；
提交文本的最终字符串；
const RedBlueButton（{Key-Key，this.onPressed，this.text，this.submittedText}）：super（Key:Key）；
@凌驾
_RedBlueButtonState createState（）=>\u RedBlueButtonState（）；
}
类_RedBlueButtonState扩展状态{
bool=false；
@凌驾
小部件构建（构建上下文）{
回墨槽(
onTap:（）{
设置状态（）{
按下=！按下；
如果（widget.onPressed！=null）
widget.onPressed（按下）；
});
},
子：动画容器(
持续时间：kThemeChangeDuration，
装饰：压制？\红色：\蓝色，
对齐：对齐.center，
填充：EdgeInsets.symmetric(
横向：10，
垂直：5
),
子：文本(
按下？widget.text？？“提交”：widget.submittedText？？“已发送”，
样式：TextStyle(
颜色：颜色。白色
),
),
),
);
}
}

您可以使用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],
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
列表更改=[Colors.blue[700]，Colors.blue[600]，Colors.blue[500]，Colors.blue[300]；
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
appBar:appBar(
背景颜色：颜色。透明，
),
背景颜色：颜色。透明，
主体：墨水池(
onTap:（）{
更改[0]=颜色。红色[700]；
更改[1]=颜色。红色[600]；
更改[2]=颜色。红色[500]；
更改[3]=颜色。红色[300]；
},
子：动画容器(
child:Center（child:newtext（“hello”）），
持续时间：持续时间（秒数：5），
装饰：盒子装饰(
梯度：线性梯度(
开始：对齐。左下角，
结束：对齐。右上角，
停止：[0.1,0.5,0.7,0.9]，
颜色：[
更改[0]，
更改[1]，
更改[2]，
更改[3]，
],
),
),
),
),
),
);
}
}

旁注：我会将此按钮放在它自己的类中，这样您就可以只设置实际按钮的状态，而不是它周围的所有内容。

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