[Flutter] Image 로드하기, Image 넣기

플러터 초보자들은 뭐라고 부르시는지 아시나요

플린이,,?! 플린이가 좋겠어요 

 

개발 환경

---------------------------------

OS : Mac

개발 툴 : android studio

개발 언어 : dart

개발 프레임워크 : flutter

---------------------------------

 

오늘 플린이는 새롭게 배운 Image 올리기를 해보겠습니다.

 

Image를 화면에 띄우는 방법은 두가지가 있습니다.

 

1. 로컬에 있는 이미지 올리기

로컬에 있는 이미지를 가져와 화면에 띄울 때는

asset 폴더를 생성하여 작업합니다. 

 

in pubspec.yaml 파일

 

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/testImg.jpeg

 

폴더를 생성하여 이미지를 넣어준 후 아래 코드로 이미지를 호출하면 됩니다.

Image.asset('assets/testImg.jpeg')

 

<전체코드>

@override
Widget build(BuildContext context){
  return Scaffold(
    body: Center(
      child: Container(
          margin: const EdgeInsets.symmetric(horizontal:120),
          child: Image.asset('assets/testImg.jpeg')
      ),
    ),
  );
}

 

 

 

 

2. 이미지 url을 사용하여 띄우기

이미지 url을 갖고있는 경우엔 Image 위젯을 사용합니다.

 

아래 imageUrl 변수는 String type입니다.

width와 height 속성으로 크기 지정이 가능합니다.

child: Row(
  children: [
    Image.network(
      imageUrl,
      width: 40,
      height: 40,
      fit: BoxFit.fill),
    Column(
      children: [
        Text(title,
            style: const TextStyle(fontSize: 13.0)),
        Text(description,
            style: const TextStyle(fontSize: 12.0)),
      ],
    ),
  ],
)