Как растянуть изображение, чтобы оно соответствовало всему фону (100% высоты x 100% ширины) в Flutter?

Question

Как растянуть изображение, чтобы оно соответствовало всему фону (100% высоты x 100% ширины) в Flutter?

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

CSS имеет концепцию процентов, поэтому я мог бы просто установить высоту и ширину на 100%. Но не похоже, что у Flutter такая концепция, и плохо просто кодировать высоту и ширину, поэтому я застрял.

Вот что у меня есть (я использую стек, так как у меня есть что-то на переднем плане изображения):

Widget background = new Container(
  height: // Not sure what to put here!
  width: // Not sure what to put here!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't
  ),
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);

140

flutter image containers stretch

Источник

user8468400 17 авг '17 в 21:49

19 ответов

Другие вопросы по тегам flutter image containers stretch

user8394265 20 авг '17 в 12:11 2017-08-20 12:11 · Answer 1 · 2017-08-20 12:11

Неправильный подход здесь.

Вместо этого используйте DecoratedBox. Или атрибут художественного оформления /foregroundDecoration Контейнера (который тогда использует DecoratedBox).

return new Container(
  decoration: const BoxDecoration(
    image: const DecorationImage(
      fit: BoxFit.fill,
      image: const AssetImage("images/common/toto.png"),
    ),
  ),
  child: new Text("Hello"),
);

user3191896 20 янв '19 в 12:17 2019-01-20 12:17 · Answer 2 · 2019-01-20 12:17

Следующее будет соответствовать изображению до 100% ширины контейнера, в то время как высота постоянна. Для локальных активов используйте AssetImage

Container(
  width: MediaQuery.of(context).size.width,
  height: 100,
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: NetworkImage("https://picsum.photos/250?image=9"),
    ),
  ),
)

Режимы заполнения изображения:

Заполнить - изображение растянуто
```
fit: BoxFit.fill
```
Подогнать высоту - изображение остается пропорциональным, при этом отображается полная высота изображения (возможно переполнение)
```
fit: BoxFit.fitHeight
```
Подогнать ширину - изображение остается пропорциональным, при этом отображается полная ширина изображения (возможно переполнение)
```
fit: BoxFit.fitWidth
```
Cover - изображение сохраняется пропорционально, обеспечивает максимальное покрытие контейнера (возможно переполнение)
```
fit: BoxFit.cover
```
Содержать - изображение сохраняется пропорциональным, минимально возможным, уменьшит его размер, если необходимо отобразить все изображение
```
fit: BoxFit.contain
```

user8468400 17 авг '17 в 21:51 2017-08-17 21:51 · Answer 3 · 2017-08-17 21:51

Внутри вашего стека, вы должны обернуть background виджет в Positioned.fill.

return new Stack(
  children: <Widget>[
    new Positioned.fill(
      child: background,
    ),
    foreground,
  ],
);

69

Источник

user8468400 17 авг '17 в 21:51

24 фев '21 в 20:38 2021-02-24 20:38 · Answer 4 · 2021-02-24 20:38

Для меня при разработке для Интернета отлично работает следующее:

      Image(
  image: AssetImage('lib/images/portadaSchamann5.png'),
  alignment: Alignment.center,
  height: double.infinity,
  width: double.infinity,
  fit: BoxFit.fill,
),

46

Источник

24 фев '21 в 20:38

user9092489 14 ноя '20 в 22:19 2020-11-14 22:19 · Answer 5 · 2020-11-14 22:19

Возможно, это не совсем то, что искал OP, но на этой странице я обнаружил себя после поиска проблемы, поэтому поделитесь ею со всеми, у кого есть аналогичная проблема:)

Стека fitсвойство помогло мне удовлетворить мои потребности. В противном случае изображение внутри (OctoImage в моем случае) было дополнено и предоставлено другое Image.fit значения не дали никакого эффекта.

Stack(
  fit: StackFit.expand, 
  children: [
    Image(
      image: provider,
      fit: BoxFit.cover,
    ),
    // other irrelevent children here
  ]
);

user10355515 08 июн '19 в 16:50 2019-06-08 16:50 · Answer 6 · 2019-06-08 16:50

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

//gets the screen width and height
double Width = MediaQuery.of(context).size.width;
double Height = MediaQuery.of(context).size.height;

Widget background = new Image.asset(
  asset.background,
  fit: BoxFit.fill,
  width: Width,
  height: Height,
);

return new Stack(
  children: <Widget>[
    background,
    foreground,
  ],
);

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

например: width: Height/2, height: Height/2 //using height for both keeps aspect ratio

user7195989 22 фев '22 в 05:58 2022-02-22 05:58 · Answer 7 · 2022-02-22 05:58

Лучший пример для этого вопроса я нашел на этой странице: https://flutterbeads.com/set-background-image-in-flutter/

Используя BoxDecoration и DecorationImage:

      Container(
  constraints: BoxConstraints.expand(),
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  )

8

Источник

user7195989 22 фев '22 в 05:58

user9789099 06 авг '18 в 14:16 2018-08-06 14:16 · Answer 8 · 2018-08-06 14:16

Я думаю, что для вашей цели Flex может работать лучше, чем Container():

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )

6

Источник

user9789099 06 авг '18 в 14:16

user15811377 28 июн '21 в 12:13 2021-06-28 12:13 · Answer 9 · 2021-06-28 12:13

Это должно работать,

Image.asset('assets/bg.jpg', подходит: BoxFit.cover,),

5

Источник

user15811377 28 июн '21 в 12:13

user10768398 11 май '20 в 18:34 2020-05-11 18:34 · Answer 10 · 2020-05-11 18:34

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

Container ( width: MediaQuery
                    .of(context)
                    .size
                    .width,
                child: 
                  Image.network(my_image_name, fit: BoxFit.fitWidth )
              )

user14219221 06 сен '20 в 13:34 2020-09-06 13:34 · Answer 11 · 2020-09-06 13:34

Посетите https://youtu.be/TQ32vqvMR80 ИЛИ

Например, если у родительского ограничителя высота: 200, тогда

Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('url'),
                fit: BoxFit.cover,
              ),
            ),
          ),

4

Источник

user14219221 06 сен '20 в 13:34

HaRjeet DeBnath 09 сен '22 в 08:36 2022-09-09 08:36 · Answer 12 · 2022-09-09 08:36

Это будет работать, если вы хотите добавить подходящее фоновое изображение во Flutter:

      class Myname extends StatelessWidget {
  const Myname({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/aj.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Column(),
          ),
        ),
      ),
    );
  }
}

Теперь вы можете добавить остальные вещи внутриColumn()

user1085736 21 дек '20 в 22:21 2020-12-21 22:21 · Answer 13 · 2020-12-21 22:21

Я установил ширину и высоту контейнера на double.infinity вот так:

      Container(
        width: double.infinity,
        height: double.infinity,
        child: //your child
)

3

Источник

user1085736 21 дек '20 в 22:21

07 янв '21 в 15:19 2021-01-07 15:19 · Answer 14 · 2021-01-07 15:19

Я столкнулся с проблемами только с FittedBox поэтому я завернул свое изображение в LayoutBuilder:

      LayoutBuilder( 
   builder: (_, constraints) => Image(
      fit: BoxFit.fill,
      width: constraints.maxWidth,
      image: AssetImage(assets.example),
   ),
)

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

user7447713 12 окт '18 в 21:34 2018-10-12 21:34 · Answer 15 · 2018-10-12 21:34

Для заполнения я иногда использую SizedBox.expand

2

Источник

user7447713 12 окт '18 в 21:34

user3183431 19 май '20 в 22:59 2020-05-19 22:59 · Answer 16 · 2020-05-19 22:59

Для меня использование Image(fit: BoxFit.fill ...) работал в ограниченном контейнере.

1

Источник

user3183431 19 май '20 в 22:59

user9725973 06 июн '19 в 12:03 2019-06-06 12:03 · Answer 17 · 2019-06-06 12:03

Попробуйте установить contentPadding

ListTile(
  contentPadding: EdgeInsets.all(0.0),
  ...
)

1

Источник

user9725973 06 июн '19 в 12:03

user4853133 22 сен '20 в 14:29 2020-09-22 14:29 · Answer 18 · 2020-09-22 14:29

Это сработало для меня

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FittedBox(
        child: Image.asset("images/my_image.png"),
        fit: BoxFit.fill,
      ),);
  }
}

1

Источник

user4853133 22 сен '20 в 14:29

user10608556 22 дек '21 в 14:06 2021-12-22 14:06 · Answer 19 · 2021-12-22 14:06

Я не нашел ответа в этом посте, но нашел исправление:

              Positioned(
            bottom: 0,
            top: 0,
            child: Image.asset(
          'assets/images/package_bg.png',
        )),

Этот код делает изображение подходящим по высоте в стеке.

0

Источник

user10608556 22 дек '21 в 14:06