Блог

Я разрабатываю виджет, который отображает изображение и текст поверх него.

Чтобы поместить текстовый виджет поверх изображения, я использую a Stack , однако, как только я обертываю виджеты стеком, нижняя часть изображения обрезается.

1. Без Stack (это хорошо):

 Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
 

2. С Stack (не очень хорошо, так как нижняя часть изображения обрезается):

  Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Stack(
            children: [
              Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover,
              ),
              Align(
                alignment: Alignment.bottomLeft,
                child: Text('Label'),
              )
            ],
          ),
        ),
      ),
    );
  }
 

Есть какие-нибудь идеи, почему это происходит и как с этим бороться?

Хорошо, я выяснил, что это работает, если изображение завернуто в a Container и height снабжено, например, таким:

 child: Stack(
    children: [
        Container(
        width: 160,
        height: 200,
        child: Image.network(
            'https://picsum.photos/250?image=9',
            fit: BoxFit.cover,
          ),
        ),
        Align(
        alignment: Alignment.bottomLeft,
        child: Text('Label'),
        )
    ],
),
         
 

Не знаю, почему это так, но я предполагаю, что это как-то связано с неспособностью изображения правильно вычислить его ширину/высоту, если они не указаны в родительском виджете.

используйте fit: StackFit.expand, , дайте мне знать, если это сработает для вас .

 
  Widget body() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Container(
          width: 160,
          height: 200,
          child: Stack(
            fit: StackFit.expand,
            children: [
              Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover,
              ),
              Align(
                alignment: Alignment(-.8, .75),
                child: Text(
                  'Label',
                ),
              )
            ],
          ),
        ),
      ),
    );
  }