앱/Flutter

플러터(Flutter) - 이미지와 추가하기, Image.asset fit 옵션 정리

놀이방사장님 2024. 2. 16. 00:00
728x90
반응형

안녕하세요 놀이방 사장입니다.

 

이번 포스팅은 플러터 이미지와 폰트를 추가해보겠습니다.

 

이미지와 폰트를 추가해야하는 이유

 

앱을 만들다 보면 기본 이미지 외에 추가로 이미지를 만들어 넣어야 할 때 가 있다

서버에서 이미지를 가져와 화면에 출력할 수도 있짐나 자주 사용되는 이미지는 앱에 넣어두면 직접 호출 할 수 있기 때문에 데이터 사용이나 속도 면에서 유리하다.

 

이미지 표시하기

먼저 이렇게 뼈대를 만들어주겠습니다.

lib 폴더 밑에 imageWidget.dart 파일을 만들어주겠습니다.

 

이제 이미지를 추가해야하기 때문에 프로젝트 -> New -> Directory 를 선택 해 "image" 폴더를 생성하고 

넣을 이미지를 "image"폴더에 추가해줍니다.

 

그냥 드래그하면 됩니다.

그러면 이렇게 나옵니다~

 

원래 안드로이드나 스위프트 앱 개발할때는 그냥 이미지만 추가하면 되지만 플러터는 한가지를 더 수정해줘야 합니다.

pubspec.yaml 파일에 해당 이미지를 추가해줘야 합니다.

 

pubspec.yaml 파일은 플러터 앱의 환경 설정과 관련된 파일입니다.

=> 플러터 버전관리 또는 새로운 패키지를 추가, 이미지, 폰트 추가

 

파일은 이쪽에 위치해 있습니다.

추가해주면 됩니다.

 

전구에 가려진 알파벳은 assets 입니다.

 

앱에서 포함된 이미지를 호출하는 방법은 크게 3가지가 있습니다.

 

file 외부의 폴더나 갤러리에 있는 파일을 사용하는 경우
asset 앱을 만들 때 미리 넣어놓은 파일을 사용하는 경우
memory 배열이나 문자열 형태의 이미지를 사용하는 경우

 

지금은 asset으로 선언했기 때문에 이미지경로 형태로 호출하면 됩니다.

 

만약 이런 화면이 나오면 get dependencies를 눌러주면 됩니다.

 

이제 main.dart에 

import 'package:flutter/material.dart';

import 'imageWidget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.cyan,
      ),
      home: ImageWidgetApp(),
    );
  }
}

 

이렇게 해주면 

이렇게 사진이 뜹니다.

근데 이제 이미지가 너무 크니깐 사진 크기를 줄여 줘야합니다.

넓이와 높이를 설정하는 소스

Image.asset('image/flutter.png', width: 200, height: 100,),

이렇게 크기가 조절이됩니다.

 

그리고 이제 fit옵션이 있는데 fit옵션을 통해 원하는 형태로 표시할 수 있습니다.

 

Image.asset('image/flutter.png', width: 200, height: 100, fit : BoxFit.fill),

 

이렇게 fit 옵션을 줄 수 있습니다.

 

fit 옵션값들
fit 옵션값 설명
BoxFit.fill width, heigth 를 가득 채워서 그린다.
BoxFit.contain 이미지가 잘리지 않고 비율이 변하지 않는 범위에서 가능한 크게 그린다.
BoxFit.cover 비율을 유지한 채 지정한 범위를 모두 덮도록 그린다. 이미지가 잘 그릴 수 있다.
BoxFit.fitWidth width를 꽉 채워서 그린다. 이미지가 잘릴 가능성이 존재
BoxFit.fitHeight height를 꽉 채워서 그린다. 이미지가 잘릴 가능성 존재
Boxfit.none 원본 이미지를 표시한다. 이미지가 잘릴 가능성 존재
Boxfit.scaleDown 전체 이미지가 나올 수 있게 이미지 크기를 조절해서 표시

 

반응형