LinearGradient 按钮 figma 颤动

Question

我的 CSS：

background: linear-gradient(91.97deg, #F8A170 14.73%, #FFCD61 97.52%);
border-radius: 10px; 

我想使用颤振，但是当我将这些颜色提供给带有子提升按钮的容器小部件时，我无法获得我想要的结果。我将按钮样式设置为透明，但还是无法解决。

Answer 1

根据你的图片和css，你可以简单的装饰ElevatedButton的样式。

 DecoratedBox(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            gradient: const LinearGradient(
              colors: [
                Color(0xFFF8A170),
                Color(0xFFFFCD61),
              ],
            ),
          ),
          child: SizedBox(
            width: 400,
            height: 75,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                elevation: 0,
                primary: Colors.white.withOpacity(0),
                padding: const EdgeInsets.all(0),
              ),
              onPressed: () {},
              child: const Text(
                "Search a room",
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
              ),
            ),
          ),
        ),

更多关于 DecoratedBox 和 ElevatedButton

Answer 2

请参考以下示例代码

使用提升按钮

LinearGradient yellowLinearGradientValues() {
    return LinearGradient(
      colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.65)],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom(
            elevation: 0.0,
            padding: EdgeInsets.zero,
            primary: Colors.transparent,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            side: BorderSide(
              width: 0.0,
              color: Colors.orange,
              style: BorderStyle.none,
            ),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(8.0),
              ),
              gradient: yellowLinearGradientValues(),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 40.0,
                vertical: 8.0,
              ),
              child: Text(
                "Search a Room" ?? "",
                textAlign: TextAlign.start,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }

LinearGradient yellowLinearGradientValues() {
    return LinearGradient(
      colors: [Colors.orange, Color(0xffFFB800).withOpacity(0.7)],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.all(Colors.transparent),
            elevation: MaterialStateProperty.all(0.0),
            padding: MaterialStateProperty.all(EdgeInsets.zero),
            tapTargetSize: MaterialTapTargetSize.shrinkWrap,
          ),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(
                Radius.circular(8.0),
              ),
              gradient: yellowLinearGradientValues(),
            ),
            child: Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 40.0,
                vertical: 8.0,
              ),
              child: Text(
                "Search a Room" ?? "",
                textAlign: TextAlign.start,
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 24.0,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }