[Flutter] assets 활용해 이미지 넣기

flutter 에서 이미지를 띄우는 방법을 알아봅시다.

 

jpeg, jpg, png등 이미지 파일이 있다면 assets를 활용하여 넣어보기로 합시다.

 

프로젝트 파일을 먼저 만들어 주고 먼저 해당 프로젝트에서 assets라는 폴더하나를 생성합니다.

다음으로 images 라는 하위폴더를 하나 더 생성해줍니다.

 

 

그리고 이미지 파일을 images 안에 넣어줍니다.

 

이미지를 다 넣어주었다면 pubspec.yaml 파일로 들어갑니다.

 

해당 파일을 읽어보면 아래와 같이 assets 부분이 있습니다.

 

 

assets의 주석을 풀어주고 이미지가 있는 경로와 이미지명.확장자명을 입력해 줍니다.

 

 

후에 Pub get을 눌러 완료를 해줍니다.

 

다음으로 메인 화면으로 이동해 코드를 작성해줄겁니다.

 

main.dart로 이동하여 Image를 띄워주는 코드를 작성해줍니다.

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: logo(),
    );
  }

  Widget logo() {
    return Image.asset('assets/images/logo.png');
  }

 

만약 이미지의 크기를 조절하고 싶다면 아래와 같이 height와 width를 설정할 수 있습니다.

Widget logo() {
    return Image.asset('assets/images/logo.png', height: 100, width: 100,);
  }

 

코드를 입력한 후 실행해보면 다음과 같이 실행되어집니다.