需要帮助设计具有渐变背景的颤动屏幕

Question

大家好

我目前正在开发一个 Flutter 项目，我正在尝试设计一个带有渐变背景的屏幕。我对 Flutter 比较陌生，并且在实现渐变背景时遇到困难。我尝试了几种方法，但似乎都没有达到预期效果。

这就是我想要实现的目标： 我希望屏幕具有渐变背景，可以从一种颜色平滑过渡到另一种颜色。此外，我需要在这个渐变背景上叠加一些小部件。

有人可以为我提供有关如何实现此目标的指导或示例代码吗？任何帮助或建议将不胜感激。

提前谢谢您！

Answer 1

一个从底部开始带有子元素和前景装饰的容器怎么样？如果您使用 Material 而不是 Cupertino 主题，请将 CupertinoColor 或 CupertinoIcons 更改为 Color 或 Icons。

          Container(
            foregroundDecoration: const BoxDecoration(
              gradient: LinearGradient(
                colors: [
                  CupertinoColors.black,
                  Color(0x00000000), // transparent color
                ],
                begin: Alignment.bottomCenter,
                end: Alignment.topCenter,
                stops: [0, 1],
              ),
            ),
            child: Image.network(
              loadingBuilder: (BuildContext context, Widget child,
                  ImageChunkEvent? loadingProgress) {
                if (loadingProgress == null) return child;
                return const Center(
                  child: Text("Loading ..."),
                );
              },
              "https://www.ephotozine.com/articles/71-amazing-examples-of-landscape-photography--26838/images/xlg_lrg_185834_1400173414.jpg",
              errorBuilder: (BuildContext context, Object exception,
                  StackTrace? stackTrace) {
                    return const Icon(
                        CupertinoIcons.nosign,
                        size: 30,
                       color: CupertinoColors.systemGrey,
                    );
              },),
          ),