Флаттерный контейнер с сетевым изображением и выровненным контейнером внизу - PullRequest
Новая
       57

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

0 голосов
/ 12 февраля 2020

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

Это мой первоначальный подход 

  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. Я пытаюсь сделать интерфейс адаптивным. Любая помощь?

Ответы [ 2 ]

0 голосов
/ 13 февраля 2020

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

Итак, изменение было сделано в getNameAndDeleteSection и в основном обернуло весь код в карту. И бин go, это сработало.

0 голосов
/ 12 февраля 2020

Почему бы не поместить ваше изображение в качестве BoxDecoration в ваш контейнер, как это: 

Stack(
   children: <Widget>[
      Container(
         decoration: BoxDecoration(
            image: DecorationImage(
               image: NetworkImage(url), fit: BoxFit.cover,
            ),
         ),
      ),
      Align(
         alignment: Alignment.bottomLeft,
         child: getNameAndDeleteSection(context),
      )
   ],
),
...