如何在 flutter 的盒子装饰上应用线性渐变？

Question

下面是我要搭建的UI，

目前，我已经使用线性渐变来实现这一点。但问题是当我在盒子装饰中使用图像时，线性渐变消失了。

下面是代码，

    child: Container(
                      padding: EdgeInsets.all(10.0),
                      height: 180,
                      child: Container(
                        padding: EdgeInsets.all(10.0),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(20)),
                          boxShadow: [
                            BoxShadow(
                              color: ColorSet.primaryGrey,
                              blurRadius: 5,
                              offset: Offset(0, 7),
                            ),
                          ],
                          gradient: LinearGradient(
                            colors: [ColorSet.primaryRed, Colors.transparent, Colors.transparent, ColorSet.primaryRed],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            stops: [0, 0, 0.6, 1],
                          ),

//On uncommenting the below three lines, I do not see the linear gradient
                          // image: DecorationImage(
                          //   image: AssetImage("lib/assets/images/event.jpg"),
                          //   fit: BoxFit.cover,
                          // ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Container(
                              //place this container to right side
                              constraints: BoxConstraints(maxWidth: 60.0),
                              padding: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(8.0),
                                  color: Colors.white.withOpacity(0.8)),
                              child: Row(
                                children: [
                                  Icon(
                                    CustomIcons.test,
                                    color: ColorSet.primaryRed,
                                  ),
                                  Text(
                                    flames.toString(),
                                    style: TextStyles.captionStyle.copyWith(
                                        color: ColorSet.primaryRed,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 17.0),
                                  ),
                                ],
                              ),
                            ),
    
                            //display event name, start/end dates times and duration in a column
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text('${name}',
                                    style: TextStyles.titleStyle.copyWith(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 20.0)),
                                SizedBox(
                                  height: 3.0,
                                ),
                              
                              ],
                            ),
    
                          ],
                        ),
                      ),
                    ),

基本上我需要在图像上显示线性渐变。如上面的代码（评论中）所述，如果我删除 Box Decoration 中的图像，线性渐变效果非常好。但是在将图像添加回去时，线性渐变丢失了。我想线性渐变不适用于图像。

请帮忙！！

Answer 1

对渐变和背景图像执行类似的操作。

Container(
      decoration: BoxDecoration(
          image:
          DecorationImage(image: AssetImage(image), fit: BoxFit.cover)),
      child: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              Colors.black.withOpacity(.3),
              Colors.black.withOpacity(.3),
            ]
         )
      ),
   )
)

Answer 2

一个解决方案是将您当前的 Container（LinearGradient 和 Container child）堆叠在另一个 Container 之上定义BoxShadow 和 DecorationImage:


import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Scan with Time',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10.0),
      width: 240,
      height: 480,
      child: Stack(
        children: [
          Positioned.fill(
            child: Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.blueGrey,
                    blurRadius: 5,
                    offset: Offset(0, 7),
                  ),
                ],
                image: DecorationImage(
                  image: NetworkImage(
                      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg/1280px-Old_man_reading_news_paper_early_in_the_morning_at_Basantapur-IMG_6800.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Positioned.fill(
            child: Container(
              padding: EdgeInsets.all(10.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(20)),
                gradient: LinearGradient(
                  colors: [
                    Colors.red,
                    Colors.transparent,
                    Colors.transparent,
                    Colors.red
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  stops: [0, 0, 0.6, 1],
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <Widget>[
                  Container(
                    //place this container to right side
                    constraints: BoxConstraints(maxWidth: 240.0),
                    padding: EdgeInsets.all(5),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8.0),
                        color: Colors.white.withOpacity(0.8)),
                    child: Row(
                      children: [
                        Icon(
                          Icons.directions_bike,
                          color: Colors.red,
                        ),
                        Text(
                          '5',
                          style: TextStyle(
                            color: Colors.red,
                            fontWeight: FontWeight.bold,
                            fontSize: 17.0,
                          ),
                        ),
                      ],
                    ),
                  ),

                  //display event name, start/end dates times and duration in a column
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('NAME',
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 20.0)),
                      SizedBox(
                        height: 3.0,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

如何在 flutter 的盒子装饰上应用线性渐变？

How to apply Linear gradient on box decoration in flutter?

image

flutter

containers

gradient

linear-gradients