Flutter 플러터에서 이미지를 전체 배경에 맞게 (100% 높이 x 100% 너비) 늘리는 방법은 무엇인가요?, How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

질문

내 기기의 화면 비율과 일치하지 않는 이미지가 있습니다. 이미지를 화면에 완전히 채우도록 늘이고 이미지의 어떤 부분도 잘라내지 않도록 하려고 합니다.

CSS에는 백분율 개념이 있으므로 높이와 너비를 100%로 설정할 수 있습니다. 하지만 Flutter에는 그 개념이 없는 것 같고, 높이와 너비를 하드코딩하는 것은 좋지 않으므로 막혀 있습니다.

다음은 내가 가진 것입니다 (앞쪽에 무언가가 있으므로 Stack을 사용합니다):

Widget background = new Container(
  height: // 여기에 무엇을 넣어야 할지 모릅니다!
  width: // 여기에 무엇을 넣어야 할지 모릅니다!
  child: new Image.asset(
    asset.background,
    fit: BoxFit.fill, // 이것은 내 Container를 채울 것 같았지만 그렇지 않습니다
  ),
);

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

답변

이미지를 부모 요소에 맞추려면, 간단히 FittedBox로 감싸면 됩니다:

FittedBox(
  child: Image.asset('foo.png'),
  fit: BoxFit.fill,
)

FittedBox는 이미지를 확장하여 공간을 채울 것입니다. (참고로, 이 기능은 이전에 BoxFit.fill로 제공되었지만, API가 변경되어 BoxFit은 이 기능을 더 이상 제공하지 않습니다. FittedBox는 생성자 인수를 변경할 필요 없이 대체 가능합니다.)

---

복잡한 장식을 위해 Image 대신 Container를 사용하고 decoration/foregroundDecoration 필드를 사용할 수도 있습니다.

Container를 부모 요소와 일치시키려면 다음 중 하나를 해야 합니다:

• 자식이 없어야 합니다.
• alignment 속성이 null이 아니어야 합니다.

다음은 두 개의 이미지와 Text를 하나의 Container에 결합하여 부모의 100% 너비/높이를 차지하는 예제입니다:

Container(
  foregroundDecoration: const BoxDecoration(
    image: DecorationImage(
        image: NetworkImage(
            'https://p6.storage.canalblog.com/69/50/922142/85510911_o.png'),
        fit: BoxFit.fill),
  ),
  decoration: const BoxDecoration(
    image: DecorationImage(
        alignment: Alignment(-.2, 0),
        image: NetworkImage(
            'http://www.naturerights.com/blog/wp-content/uploads/2017/12/Taranaki-NR-post-1170x550.png'),
        fit: BoxFit.cover),
  ),
  alignment: Alignment.bottomCenter,
  padding: EdgeInsets.only(bottom: 20),
  child: Text(
    "Hello World",
    style: Theme.of(context)
        .textTheme
        .display1
        .copyWith(color: Colors.white),
  ),
),