在 Flutter 中创建分割背景

Question

如何创建一个背景，就像我在 flutter 中设计下面的图像一样，我想知道要遵循的标准，以便它可以调整到所有窗口大小，包括应用程序和网页。请帮助我，因为我是颤振的新手。 详细： 我想创建一个如下图所示的标准背景，并在我的应用程序中使用相同的背景作为标准背景。 白色背景应该可以调整以根据屏幕中的内容移动。

Answer 1

让我们分解一下你的任务：

1. 创建将在整个应用程序中使用的标准渐变颜色背景。
2. 如何做这个特定的认证页面。

1.创建标准渐变色背景

const kGradientColor = LinearGradient(colors: [
  Colors.red,
  Colors.blue,
]);

      Scaffold(
        appBar: AppBar(
          flexibleSpace: Container(
            decoration: const BoxDecoration(
              gradient: kGradientColor,
            ),
          ),
          title: const Text("YOUR APP BAR"),
        ),
        body: Container(
          decoration: const BoxDecoration(
            gradient: kGradientColor,
          ),
          child: const Center(child: Text("YOUR MAIN BODY")),
        ),
      ),

好吧，说实话，我没有找到任何方法可以将渐变颜色放入一般的 Flutter

ThemeData

中，或者内部

Scaffold

中。这可能是唯一的办法了。

为了减少您的工作，您可以为

AppBar

创建一个通用小部件。您可以按照以下说明操作：如何创建自定义 AppBar 小部件？

2.如何做认证页面的UI

您可以阅读有关

SliverAppBar

的信息：https://api.flutter.dev/flutter/material/SliverAppBar-class.html

这是一个复杂且高级的 Flutter 小部件。 Sliver有很多种，但此时对于初学者来说，你只需要关心它即可。