[flutter] 플러터 Container에서 이미지를 표시하는 방법은 무엇인가요?

11 Dec 2023

flutter

우선, 이미지를 표시하기 위해 Flutter의 Image 위젯을 사용할 수 있습니다. Image 위젯은 네트워크에서 가져온 이미지나 앱 자원으로 제공되는 이미지를 표시하는 데 사용됩니다.

아래는 Container 위에 이미지를 표시하는 간단한 예시 코드입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('이미지 표시'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.white,
              image: DecorationImage(
                image: NetworkImage('https://example.com/image.jpg'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서, Container 위젯의 decoration 속성을 사용하여 이미지를 설정하고 있습니다. image 속성은 이미지의 소스를 지정하고 fit은 이미지가 Container에 맞게 맞추어지도록 설정합니다.

이렇게 하면 Container 위에 이미지를 표시할 수 있습니다. 원하는 이미지 경로를 지정해주시면 됩니다.