在 Flutter 中创建分割背景

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

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 有几种类型，但目前，对于初学者来说，你只需要关心它。

import 'package:flutter/material.dart';

/// Flutter code sample for [SliverAppBar].

void main() {
  runApp(const StretchableSliverAppBar());
}

class StretchableSliverAppBar extends StatefulWidget {
  const StretchableSliverAppBar({super.key});

  @override
  State<StretchableSliverAppBar> createState() =>
      _StretchableSliverAppBarState();
}

class _StretchableSliverAppBarState extends State<StretchableSliverAppBar> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            const SliverAppBar(
              stretch: true,
              stretchTriggerOffset: 300.0,
              expandedHeight: 200.0,
              flexibleSpace: const FlexibleSpaceBar(
                title: Text('SliverAppBar'),
                background: FlutterLogo(),
              ),
            ),
            SliverToBoxAdapter(
              child: Container(
                height: 600,
                decoration: const BoxDecoration(
                  gradient: kGradientColor,
                ),
                child: const Center(child: Text("YOUR AUTH BODY")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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