Блог

Я отчаянно пытался заставить это работать. Вероятно, я упускаю что-то маленькое … или большое, что я знаю.

У меня есть sliverlist виджетов моего собственного класса, поэтому изображение, которое вы видите, должно занимать около 1/3 экрана, и их прокручиваемый список. Итак, просто представьте, что это повторяется 2 или 3 раза на экране.

Для достижения этого какие размеры должны быть фиксированными? Текстовый пузырь не должен быть исправлен. Я бы хотел, чтобы каждое изображение было точно такого же размера.

   return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        overflow: Overflow.visible,
        children: [
          _LargeImage(
            url:
                'imageurl',
          ),

          ContainerWithText(),
        ],
      ),
    ); 
  

Конечно, я должен поставить контейнер в нужное положение, но я не могу заставить его работать. Я либо получаю сообщение об ошибке, либо оно говорит о том, что объект, как ни странно, переполнен.

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

Я попробовал простую реализацию того, что вы просили, и не получил никаких ошибок. Вот оно :

 class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        overflow: Overflow.visible,
        children: [
          Image.network(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png'),
          Positioned( bottom: 50 , left : 100, child:Container(child: Text('Some Text'))),
        ],
      ),
    );
  }
}
  

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

 class ImageWithTextStack extends StatelessWidget {
  final textSize;
  final textPadding;
  final String text;
  final String imgUrl;

  ImageWithTextStack({
    this.textSize = 14.0,
    this.textPadding = 16.0,
    @required this.text,
    @required this.imgUrl,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      width: MediaQuery.of(context).size.width,
      child: Stack(
        children: [
          Container(
            margin: EdgeInsets.only(bottom: textPadding * 2 - textSize / 2),
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(imgUrl),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                width: MediaQuery.of(context).size.width,
                margin: EdgeInsets.symmetric(horizontal: 16),
                padding: EdgeInsets.all(textPadding),
                decoration: BoxDecoration(
                  border: Border.all(width: 3),
                  color: Colors.white,
                ),
                child: Text(
                  text,
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
  

Просто вызовите ImageWithTextStack вот так:

 ImageWithTextStack(text: 'my text', imgUrl: 'image url')
  

И вот результат, который я получил, используя DartPad: