Flutter渐变背景支架插件scaffold_gradient_background的使用

Gradient Scaffold

这是一个完全可自定义的支架小部件，但可以将其背景设置为渐变。

截图

开始使用

这个包用于将渐变作为支架的背景。你没有任何缺点，并且可以使用所有支架的功能。

如何创建一个简单的带有渐变背景的支架

在pubspec.yaml文件中添加此包：

dependencies:
  scaffold_gradient_background:

在你想使用带渐变背景的支架的类中导入该包：

import 'package:scaffold_gradient_background/scaffold_gradient_background.dart';

现在创建一个GradientScaffold小部件并根据你的喜好进行定制！

GradientScaffold(
  gradient: LinearGradient(
    begin: Alignment.bottomLeft,
    end: Alignment.topRight,
    colors: [
      Color(0xFF8EC5FC),
      Color(0xFFE0C3FC),
    ],
  ),
  appBar: AppBar(
    title: Text('线性渐变示例'),
  ),
  body: Center(
    child: Text(
      '你好 ^^',
      style: TextStyle(
        color: Colors.white,
        fontSize: 30,
      ),
    ),
  ),
);

就是这样。你不需要做更多事情，如你所见，它工作得很好！

完整示例代码

以下是一个完整的示例代码，展示了如何使用GradientScaffold来创建不同类型的渐变背景（线性、径向和扫描）。

import 'package:flutter/material.dart';
import 'package:scaffold_gradient_background/scaffold_gradient_background.dart';

// 线性渐变示例
class LinearGradientScaffold extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GradientScaffold(
      gradient: LinearGradient(
        begin: Alignment.bottomLeft,
        end: Alignment.topRight,
        colors: [
          Color(0xFF8EC5FC),
          Color(0xFFE0C3FC),
        ],
      ),
      appBar: AppBar(
        title: Text('线性渐变示例'),
      ),
      body: Center(
        child: Text(
          '你好 ^^',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

// 径向渐变示例
class RadialGradientScaffold extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GradientScaffold(
      gradient: RadialGradient(
        colors: [
          Color(0xFF8EC5FC),
          Color(0xFFE0C3FC),
        ],
      ),
      appBar: AppBar(
        title: Text('径向渐变示例'),
      ),
      body: Center(
        child: Text(
          '你好 ^^',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}

// 扫描渐变示例
class SweepGradientScaffold extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return GradientScaffold(
      gradient: SweepGradient(
        colors: [
          Color(0xFF8EC5FC),
          Color(0xFFE0C3FC),
        ],
      ),
      appBar: AppBar(
        title: Text('扫描渐变示例'),
      ),
      body: Center(
        child: Text(
          '你好 ^^',
          style: TextStyle(
            color: Colors.white,
            fontSize: 30,
          ),
        ),
      ),
    );
  }
}