HIDI Flutter Challenge (3) Image Widget
Image Widget
> Image Widget
- 이미지를 표시하는 위젯
- 지원되는 이미지 형식 : JPEG, PNG, GIF, 애니메이션 GIF, WebP, 애니메이션 WebP, BMP 및 WBMP
const Image({
Key? key,
required this.image,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.isAntiAlias = false,
this.filterQuality = FilterQuality.low,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(filterQuality != null),
assert(matchTextDirection != null),
assert(isAntiAlias != null),
super(key: key);
>> Image 위젯의 주요 속성
- width, height : 이미지의 가로, 세로 크기
- fit : 원하는 공간에 이미지가 들어맞도록 하는 속성
- alignment : 이미지 정렬
- semanticLabel : 이미지를 설명하는 소개글
>> Image 등록 방법
- Image.asset() : 앱에 저장된 대상을 끌어와 이미지를 띄움 => 다른 버젼들을 저장해 pubspec.yaml 안에 나열하면 됨
- Image.file() : 사용자 장치에서 이미지를 가져와서 띄움
- Image. memory() : 메모리에 저장된 이미지를 바이트 배열로 나타낼 때
- Image.network() : URL에서 이미지를 가져와 띄움 => Flutter가 이미지 파일을 다운로드해서 캐시를 저장하고 화면에 띄움
>> 예시 코드
import 'package:flutter/material.dart';
import 'package:file/file.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
debugShowCheckedModeBanner: false,
home: ImageWidget(),
);
}
}
class ImageWidget extends StatefulWidget {
_ImageWidgetState createState() => _ImageWidgetState();
}
class _ImageWidgetState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: ListView(
children: [
Text(
"image asset 이용",
style: TextStyle(fontSize: 25),
),
Image.asset(
'assets/IMG_0239.jpeg',
fit: BoxFit.cover,
),
SizedBox(height: 2),
Text(
"image network 이용",
style: TextStyle(fontSize: 25),
),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
fit: BoxFit.cover,
),
SizedBox(height: 2),
Text(
"image file 이용 - 추후 수정 예정",
style: TextStyle(fontSize: 25),
),
SizedBox(height: 2),
Text(
"image memory 이용 - 추후 수정 예정",
style: TextStyle(fontSize: 25),
),
SizedBox(height: 2),
],
),
),
),
);
}
}
>> 실행결과
- 이미지를 표시하는 위젯
- 지원되는 이미지 형식 : JPEG, PNG, GIF, 애니메이션 GIF, WebP, 애니메이션 WebP, BMP 및 WBMP
const Image({
Key? key,
required this.image,
this.frameBuilder,
this.loadingBuilder,
this.errorBuilder,
this.semanticLabel,
this.excludeFromSemantics = false,
this.width,
this.height,
this.color,
this.colorBlendMode,
this.fit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.centerSlice,
this.matchTextDirection = false,
this.gaplessPlayback = false,
this.isAntiAlias = false,
this.filterQuality = FilterQuality.low,
}) : assert(image != null),
assert(alignment != null),
assert(repeat != null),
assert(filterQuality != null),
assert(matchTextDirection != null),
assert(isAntiAlias != null),
super(key: key);
- width, height : 이미지의 가로, 세로 크기
- fit : 원하는 공간에 이미지가 들어맞도록 하는 속성
- alignment : 이미지 정렬
- semanticLabel : 이미지를 설명하는 소개글
- Image.asset() : 앱에 저장된 대상을 끌어와 이미지를 띄움 => 다른 버젼들을 저장해 pubspec.yaml 안에 나열하면 됨
- Image.file() : 사용자 장치에서 이미지를 가져와서 띄움
- Image. memory() : 메모리에 저장된 이미지를 바이트 배열로 나타낼 때
- Image.network() : URL에서 이미지를 가져와 띄움 => Flutter가 이미지 파일을 다운로드해서 캐시를 저장하고 화면에 띄움
import 'package:flutter/material.dart';
import 'package:file/file.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
debugShowCheckedModeBanner: false,
home: ImageWidget(),
);
}
}
class ImageWidget extends StatefulWidget {
_ImageWidgetState createState() => _ImageWidgetState();
}
class _ImageWidgetState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: ListView(
children: [
Text(
"image asset 이용",
style: TextStyle(fontSize: 25),
),
Image.asset(
'assets/IMG_0239.jpeg',
fit: BoxFit.cover,
),
SizedBox(height: 2),
Text(
"image network 이용",
style: TextStyle(fontSize: 25),
),
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
fit: BoxFit.cover,
),
SizedBox(height: 2),
Text(
"image file 이용 - 추후 수정 예정",
style: TextStyle(fontSize: 25),
),
SizedBox(height: 2),
Text(
"image memory 이용 - 추후 수정 예정",
style: TextStyle(fontSize: 25),
),
SizedBox(height: 2),
],
),
),
),
);
}
}
Author And Source
이 문제에 관하여(HIDI Flutter Challenge (3) Image Widget), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hello_hidi/HIDI-Flutter-Challenge-3-Image-Widget저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)