在屏幕上绘制渐变

Question

为了实现颜色选择器，我想绘制一个内部有颜色渐变的矩形。我尝试使用带有 DecoratedBox 的容器，但效果不佳，因为我必须给它一个宽度，并且我希望它填充它的父容器。在 flutter 中绘制渐变的最佳方法是什么？

Answer 1

听起来您已经知道如何绘制渐变，您的问题更多是关于如何使 DecoratedBox 尽可能大。

如果您的 DecoratedBox 出现在 Column 或 Row 中，请考虑将其包装在 Expanded and setting the crossAxisAlignment to CrossAxisAlignment.stretch.

中

如果您的 DecoratedBox 是未为其子项提供大小的小部件的子项（例如 Center), try wrapping it in a ConstrainedBox with a constraints of new BoxConstraints.expand()。这是一个示例：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Gradient Example',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Gradient Example'),
      ),
      body: new Center(
        child: new ConstrainedBox(
          constraints: new BoxConstraints.expand(),
          child: new DecoratedBox(
            decoration: new BoxDecoration(
              gradient: new LinearGradient(
                colors: <Color>[Colors.red, Colors.blue]
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在屏幕上绘制渐变

Paint an Gradient on screen

dart

flutter