在屏幕上繪製漸變

Question

要實現顏色選擇器，我想繪製一個內部具有漸變顏色的矩形。我試圖用一個容器與DecoratedBox，但它沒有工作，因爲我不得不給它一個寬度，我想它填充它的父母。 什麼是繪製漸變的最佳方式？

Answer 1

這聽起來像你已經知道如何繪製一個漸變，而你的問題更多的是如何使盡可能大的DecoratedBox。

如果您DecoratedBox出現在Column或，可考慮在Expanded包裝，並設置crossAxisAlignment到CrossAxisAlignment.stretch。

如果您DecoratedBox是一個小部件，不給其子（例如Center）提供了一個大小的孩子，試着用的new BoxConstraints.expand()一個constraints它包裹在一個ConstrainedBox。這裏有一個例子：

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] 
      ), 
      ), 
     ), 
     ), 
    ), 
    ); 
    } 
}