Блог

У меня есть такой код для создания миниатюры проигрывателя YouTube со значком:

 Stack(
  children: <Widget>[
    Container(
      decoration: BoxDecoration(
        image: DecorationImage(
            image: NetworkImage(
                "https://img.youtube.com/vi/_uOgXpEHNbc/0.jpg"),
            fit: BoxFit.fitHeight),
      ),
    ),
    Container(
      color: Colors.black.withOpacity(0.7),
    ),
    Container(
      alignment: Alignment.center,
      child: Center(
        child: Icon(
          Icons.smart_display,
          color: Colors.red,
          size: 100.0,
        ),
      ),
    ),
  ],
),
 

Это результат кода:

Как убедиться, что прозрачный фон картинки не влияет на центральную иконку? Мне просто нужно, чтобы значок оставался светлым.

Если вы хотите сохранить белый цвет значка воспроизведения в центре, вы можете попробовать вот так

 
Stack(
      children: <Widget>[
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: NetworkImage(
                    "https://img.youtube.com/vi/_uOgXpEHNbc/0.jpg"),
                fit: BoxFit.fill),
          ),
        ),
        Container(
          color: Colors.black.withOpacity(0.7),
        ),
        Container(
          alignment: Alignment.center,
          child: Center(
            child: Container(
              height: 50,
              width: 60,
              color: Colors.white,
            ),
          ),
        ),
        Container(
          alignment: Alignment.center,
          child: Center(
            child: Icon(
              Icons.smart_display,
              color: Colors.red,
              size: 100.0,
            ),
          ),
        ),
      ],
    )

 

Вы можете использовать Color(0xFF000000).withOpacity(0.7) внутри родительского контейнера, чтобы это повлияло только на вашего родителя. Вы можете попробовать здесь

 return Center(
  child: Stack(
    children: [
      Center(
        child: Container(
          height: 200,
          width: 200,
          decoration: new BoxDecoration(
            image: new DecorationImage(
              image: new NetworkImage(
                  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVuX218dvGRwSyGhdr1KeTrN6wocBci6xWWQamp;usqp=CAU'),
              fit: BoxFit.cover,
            ),
          ),
          child: Container(
            color: Color(0xFF000000).withOpacity(0.7),
          ),
        ),
      ),
      Center(
        child: Container(
          child: IconButton(
            onPressed: () {},
            icon: Image(
              image: NetworkImage(
                  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTRtN8lufTjm-VwUnxm5uAwsW5dCrZqzFFWxgamp;usqp=CAU"),
            ),
            iconSize: 80,
            splashColor: Colors.red,
          ),
        ),
      ),
    ],
  ),
);
 

Я использую наихудшие из возможных изображений, чтобы продемонстрировать пример. Не против

Выход