Контейнер Flutter с сетевым изображением и выровненным контейнером внизу

Итак, мне нужно отобразить изображение в контейнере и некоторое описание внизу контейнера. Изображение должно занимать весь экран. Изображение загружается из сети.

Это мой изначальный подход

  Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        child: ClipRRect(
          child: Image.network(category.imageURL,
              height: maxHeight * 1, fit: BoxFit.cover),
        ),
      ),
      Align(
        alignment: Alignment.bottomLeft,
        child: getNameAndDeleteSection(context),
      )
    ],
  ),
),

где getNameAndDeleteSection - это в основном это

 return Container(
      color: Colors.yellow,
      margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            category.name,
            maxLines: 1,
            style: TextStyle(color: Colors.white),
          ),
          Spacer(),
          IconButton(
            icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
            onPressed: () {
              deleteTap(category);
            },
          )
        ],
      ),
    );
  }

Когда сетевой образ загружен, он скрывает желтый контейнер, но сохраняет дочерние элементы. Я хочу, чтобы изображение оставалось на заднем плане, а желтый контейнер - над ним. Идея состоит в том, что желтый контейнер будет иметь своего рода прозрачный цвет, чтобы он выглядел плавающим на изображении.

Максимальная высота - это высота, предоставляемая listView. Я пытаюсь сделать UI адаптивным. Любая помощь?


flutter flutter-layout flutter-container
person Debanjan Chakraborty    schedule 12.02.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Почему бы не поместить свое изображение как BoxDecoration в контейнер следующим образом:

Stack(
   children: <Widget>[
      Container(
         decoration: BoxDecoration(
            image: DecorationImage(
               image: NetworkImage(url), fit: BoxFit.cover,
            ),
         ),
      ),
      Align(
         alignment: Alignment.bottomLeft,
         child: getNameAndDeleteSection(context),
      )
   ],
),
person Guillaume Roux    schedule 12.02.2020
comment
Даже в этом случае изображение будет закрывать желтый контейнер, оставляя текст плавать на самом изображении. Я хочу, чтобы изображение использовалось в качестве фона, в небольшом мягком контейнере с определенным цветом внизу, чтобы содержать текст. - person Debanjan Chakraborty; 13.02.2020

arrow_upward
0
arrow_downward

Вместо использования контейнера, который всегда кажется скрытым сетевым образом, я решил использовать карту, которая будет охватывать контейнер. И это сработало.

Итак, изменение было сделано в getNameAndDeleteSection и, по сути, весь код заключен в Card. И бинго, это сработало.

person Debanjan Chakraborty    schedule 13.02.2020