如何用颜色参数覆盖容器小部件的渐变颜色参数

Question

我使用了

gradient

小部件的

Container

参数，如果渐变颜色不是透明的，则仅当条件为真时才显示渐变颜色。

异常输出：-

如果条件为假，则

Container

小部件可以使用

color

参数中传递的颜色进行着色。在下面的代码中，它是绿色的。

异常输出图像：-

实际输出：-

透明渐变颜色覆盖给

color

参数的颜色

实际输出图像：-

Note：-

color

参数可以有不同的颜色，因为它也取决于一些布尔标志，因此将相同的颜色设置为

gradient

参数将不起作用。

代码：-

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool showGradient = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                showGradient ? Colors.blue : Colors.transparent,
                showGradient ? Colors.orange : Colors.transparent,
              ]),
              color: Colors.green[100],
              border: Border.all()),
          height: 100,
          width: 100,
        ),
      )),
    );
  }
}

Answer 1

尝试代替

          gradient: LinearGradient(colors: [
            showGradient ? Colors.blue : Colors.transparent,
            showGradient ? Colors.orange : Colors.transparent,
          ]),

做

          gradient: showGradient ? LinearGradient(colors: [
            Colors.blue,
            Colors.orange
          ]) : null,

Answer 2

import 'package:flutter/material.dart';

void main() => runApp(const ExampleApp());

class ExampleApp extends StatefulWidget {
  const ExampleApp({Key? key}) : super(key: key);

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  bool showGradient = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Container(
          decoration: BoxDecoration(
              gradient: showGradient ? const LinearGradient(colors: [Colors.blue, Colors.orange]) : null,
              color: Colors.green,
              border: Border.all()),
          height: 100,
          width: 100,
        ),
      )),
    );
  }
}