Image 위젯
Image 사용 설정
assets 폴더 생성
- 프로젝트에서 [new -> Directory]를 선택해서 assets라는 새로운 폴더를 만들어줍니다.
pubspec.yaml 설정 변경
- 폴더를 만든 후 pubspec.yaml이라는 설정파일에 들어가서 assets:의 주석을 풀고, 추가로 -assets/를 입력합니다.
- assets를 자원폴더로 쓰겠다는 의미입니다.
- 입력을 완료한 후 우측 상단의 Pub get을 눌러주면 동기화가 완료되며 사용할 수 있게 됩니다.
gif 이미지 파일 준비
- 구글에서 gif 이미지 파일을 하나 받아서 준비해줍니다.
- 준비한 gif 파일을 assets 폴더에 넣어줍니다.
디바이스에 출력하기
- body에 Image.asset을 이용해서 사용하려는 이미지의 경로를 지정하면 디바이스에 출력이 됩니다.
class FirstApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Image.asset("assets/pikachu.gif"),
),
),
);
}
}
추가 조작
사이즈 조절 - fit: Boxfit
- 이미지 경로 뒤에 ( , )를 이용해서 다른 스타일들도 설정할 수 있습니다.
- 너비와 높이를 지정할 수 있으며, 둘 중 하나의 값만 지정하면 비율에 따라서 나머지가 조절됩니다.
- fit: Boxfit을 사용하면 크기 내에서 원하는 비율로 이미지를 출력할 수 있습니다.
...
body: Image.asset(
"assets/pikachu.gif",
width: 100,
height: 300,
fit: BoxFit.fill,
),
...
위치 조절 - Center
- Image.asset에서 Alt + Enter를 해보면 Center로 감쌀 수 있습니다.
- Center로 감싸면 화면의 정중앙에 배치가 됩니다.
...
body: Center(
child: Image.asset(
"assets/pikachu.gif",
width: 300,
height: 200,
fit: BoxFit.fill,
),
...
위치 조절 - Alignment
- Center를 사용하지 않고도 중앙에 배치할 수 있습니다.
- Image.asset을 Container로 감싼 후 alignment 값을 0을 줌으로써 정중앙에 배치할 수 있습니다.
body: Container(
alignment: Alignment(0.0, 0.0),
child: Image.asset(
"assets/pikachu.gif",
width: 300,
height: 200,
fit: BoxFit.fill,
),
전체 코드
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:flutter/material.dart';
// main 스레드는 runApp 을 실행시키고 종료됩니다.
void main() {
// 비동기로 실행됨(이벤트 루프에 등록된다)
runApp(FirstApp());
// sleep(Duration(seconds: 2));
// print("main 종료");
}
class FirstApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: SafeArea(
child: Scaffold(
body: Container(
alignment: Alignment(0.0, 0.0),
child: Image.asset(
"assets/pikachu.gif",
width: 300,
height: 200,
fit: BoxFit.fill,
),
),
),
),
);
}
}