Блог

Главная - Вопросы по программированию - Добавление метки на изображение

Добавление метки на изображение

#flutter #dart

Вопрос:

введите описание изображения здесь

Привет,

Я хотел бы добавить такую метку, как second red. Я думаю, что могу сделать это с помощью Sizedbox, но я не могу добавить его в контейнер. Второй альтернативой было бы сделать цвет фона первой НАУКИ красным, но таким образом надпись начинается сразу с первой буквы, которая мне не понравится. любая помощь

 children: [
          Container(
            height: 200,
            width: double.infinity,
            decoration: BoxDecoration(
              //let's add the height

              image: DecorationImage(
                  image: NetworkImage(articles[index].imageUrl!),
                  fit: BoxFit.cover),
              borderRadius: BorderRadius.circular(0.0),
            ),
            // alignment: Alignment.bottomLeft,
            child: Container(
                margin: const EdgeInsets.only(top: 170, left: 10),
                child: const Text('SCIENCE',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                        color: Colors.red, fontWeight: FontWeight.bold))),
          ),

Комментарии:

1. Вы хотите написать научное слово на изображении сверху?

2. Вы использовали виджет «Стек»?

Ответ №1:

Я думаю, что вы обработали фон с помощью стека, просто оберните текст с заполнением. Или используйте заполнение контейнера.

Нравится

   Container(
                  color: Colors.red,
                  padding: EdgeInsets.all(8),
                  child: Text(
                    "SCIENCE",
                    style: TextStyle(color: Colors.white, fontSize: 22),
                  ),
                ),

Результат

выход

Полный Стек

  SizedBox(
        height: 200,
        width: 600,
        child: Stack(
          children: [
            Image.asset(
              "assets/ocean.jpg",
              fit: BoxFit.cover,
            ),
            Positioned(
              /// set the way you like
              left: 10,
              bottom: 10,
              child: Container(
                color: Colors.red,
                padding: EdgeInsets.all(8),
                child: Text(
                  "SCIENCE",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 22,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

Комментарии:

1. Спасибо за решение. Мне нужно только изменить изображение.актив с помощью NetworkImage(статьи[индекс].ImageUrl!) остальное идеально

Ответ №2:

вам нужно использовать такой стек, как этот

  Stack(
      children: <Widget>[
        Container(
          height: 200,
          width: double.infinity,
          decoration: BoxDecoration(
            //let's add the height

            image: DecorationImage(
                image: NetworkImage(articles[index].imageUrl!),
                fit: BoxFit.cover),
            borderRadius: BorderRadius.circular(0.0),
          ),
        ),
        Positioned(
          left: 5,
          bottom: 10,
          child: Container(
              color: Colors.red,
              padding: EdgeInsets.all(8),
              child: Text(
                "SCIENCE",
                style: TextStyle(color: Colors.white, fontSize: 22),
              ),
            ),
        ),
      ],
    )
Метки: