[Flutter/Project](Instagram Clone) 온라인 이미지 불러오기

---

 

fit: BoxFit.???

fill : 가로, 세로 비율 상관 없이 이미지를 늘려서(줄여서)박스를 꽉 채움

---

contain : 가로, 세로 비율을 유지하면서 박스 사이즈에 맞게 가능한 크게

---

cover : 박스 사이즈에 맞게 이미지를 자르더라도 꽉 채움

---

fitWidth : 박스의 가로 사이즈에만 맞게 채움. 세로가 좁으면 이미지를 자름

---

fitHeight : 박스의 세로 사이즈에만 맞게 채움. 가로가 좁으면 이미지를 자름

---

none : 이미지의 원본을 유지함. 기본적으로 가운데 정렬. 이미지 사이즈보다 박스가 작으면 이미지를 잘라냄

---

scaleDown : 이미지 원본 크기를 유지하지만 박스의 크기가 작아지면 사이즈를 줄임. none+contain

 

---

소스코드 및 pubspec.yaml

dependencies:

  cached_network_image: ^2.5.0

//post.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

class Post extends StatelessWidget {
  // final : 한번 데이터가 저장되면 바뀌지 않음.
  final int index;

  const Post(
    this.index, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      // CachedNetworkImage() 받아온 이미지를 캐시파일로 저장해 재사용.
      imageUrl: "https://picsum.photos/id/$index/200/200",
      imageBuilder: (BuildContext context, ImageProvider imageProvider) {
        return AspectRatio(
          aspectRatio: 16/9/* 16대 9의 비율로 이미지 생성 */,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider/* CachedNetworkImage 의 imageUrl */,
                fit: BoxFit.cover,
              ),
            ),
          ),
        );
      },
    );
  }
}