Flutter双线性渐变插件bilinear_gradient的使用

特性

这个包允许你绘制BilinearGradientDecorator组件，就像Flutter内置的LinearGradient一样。

但是请注意，不要将Container的LinearGradient与BilinearGradientDecorator混淆。前者是Container装饰属性的一部分，而后者是一个独立的Widget。

使用方法

以下是如何在Flutter应用中使用BilinearGradientDecorator的示例代码：

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

const topLeftColor = Color(0xFFF7F700);
const topRightColor = Color(0xFF00F700);
const bottomLeftColor = Color(0xFF7675C3);
const bottomRightColor = Color(0xFFF70075);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(useMaterial3: true),
      home: const HomePage(),
      title: 'Bilinear Gradient Example',
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  static const topLeftColor = Color(0xFFF7F700);
  static const topRightColor = Color(0xFF00F700);
  static const bottomLeftColor = Color(0xFF7675C3);
  static const bottomRightColor = Color(0xFFF70075);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bilinear Gradient')),
      body: Stack(
        fit: StackFit.expand,
        children: [
          // 四个角的颜色块
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.1,
            alignment: Alignment.topLeft,
            child: Container(
              color: topLeftColor,
              alignment: Alignment.center,
              child: DecoratedText('Yellow'),
            ),
          ),
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.1,
            alignment: Alignment.topRight,
            child: Container(
              color: topRightColor,
              alignment: Alignment.center,
              child: DecoratedText('Green'),
            ),
          ),
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.1,
            alignment: Alignment.bottomLeft,
            child: Container(
              color: bottomLeftColor,
              alignment: Alignment.center,
              child: DecoratedText('Blue'),
            ),
          ),
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.1,
            alignment: Alignment.bottomRight,
            child: Container(
              color: bottomRightColor,
              alignment: Alignment.center,
              child: DecoratedText('Red'),
            ),
          ),
          // 水平线性渐变
          FractionallySizedBox(
            widthFactor: 0.8,
            heightFactor: 0.1,
            alignment: Alignment.topCenter,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    topLeftColor,
                    topRightColor,
                  ])),
              child: DecoratedText('Linear Gradient'),
              alignment: Alignment.center,
            ),
          ),
          FractionallySizedBox(
            widthFactor: 0.8,
            heightFactor: 0.1,
            alignment: Alignment.bottomCenter,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(colors: [
                    bottomLeftColor,
                    bottomRightColor,
                  ])),
              child: DecoratedText('Linear Gradient'),
              alignment: Alignment.center,
            ),
          ),
          // 垂直线性渐变
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.8,
            alignment: Alignment.centerLeft,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                colors: [
                  topLeftColor,
                  bottomLeftColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              )),
              child: DecoratedText('Linear Gradient'),
              alignment: Alignment.center,
            ),
          ),
          FractionallySizedBox(
            widthFactor: 0.1,
            heightFactor: 0.8,
            alignment: Alignment.centerRight,
            child: Container(
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                colors: [
                  topRightColor,
                  bottomRightColor,
                ],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
              )),
              child: DecoratedText('Linear Gradient'),
              alignment: Alignment.center,
            ),
          ),
          // 双线性渐变
          FractionallySizedBox(
            widthFactor: 0.8,
            heightFactor: 0.8,
            alignment: Alignment.center,
            child: BilinearGradientDecorator(
              topLeftColor: topLeftColor,
              topRightColor: topRightColor,
              bottomLeftColor: bottomLeftColor,
              bottomRightColor: bottomRightColor,
              child: Center(child: DecoratedText('Bilinear Gradient')),
            ),
          ),
        ],
      ),
    );
  }
}

class DecoratedText extends StatelessWidget {
  const DecoratedText(this.colorName, {Key? key}) : super(key: key);

  final String colorName;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black45,
      child: Text(colorName),
    );
  }
}