[Flutter] 이미지 불러넣기 (Image 위젯, NetworkImage 위젯) [맥북💻]

 목차

1. 이미지 넣기
   1. Image() 위젯
   2. NetworkImage() 위젯

 

 

 

✅ 이미지 불러오기

 

 

1️⃣ Image() 위젯

1. Directory에 폴더 생성
2. 이미지 파일 저장
3. yaml 파일 코드 입력
4. Image() 위젯으로 저장한 이미지 파일 불러오기
   ** Image.asset('이미지를 넣은 폴더명 / 이미지명.확장자')

 

 

2️⃣ NetworkImage() 위젯

1. Contaier 위젯 내(child)에 Image 위젯으로 NetworkImage() 위젯 사용
2. NetworkImage() 위젯 내에 url 에서 복사한 이미지 입력
3. 불러온 이미지 사이즈로 인해 생긴 여백은 fit 요소로 채우기 (fit : BoxFit.fill)
   ** url은 전역변수로도 활용가능

NetworkImage() 위젯 사용

이미지로 생긴 여백 채우기 (fit : BoxFit.fill)

전역변수 활용

이미지 사이즈로 인해 생긴 여백 채우기

 

 

 

 

 

✔️ 사용된 코드

class _MyHomePageState extends State<MyHomePage>{

  String url = 'https://i.pinimg.com/736x/35/bd/2e/35bd2ef4218583ec066d62b00a50b8ed.jpg';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Test Title"),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Image(
          image: NetworkImage(url),
        ),
      ),
    );
  }
}