[Flutter/Project](Instagram Clone) 로딩 위젯 생성

---

---

소스코드

// post.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    // 해당 디바이스의 화면 사이즈를 가져옴
    if (size == null) size = MediaQuery.of(context).size;

    return CachedNetworkImage(
      // CachedNetworkImage() 받아온 이미지를 캐시파일로 저장해 재사용.
      imageUrl: "https://picsum.photos/id/$index/2000/2000",
      placeholder: (BuildContext context, String url) {
        return Container(
          // width, height가 같아야 정사각형 위젯을 만듦
          // size.width 해당 디바이스의 가로 사이즈
          width: size.width,
          height: size.width,
          child: Center(
            child: SizedBox(
              // 인디케이터 박스 사이즈 설정
              height: 60,
              width: 60,
              child: CircularProgressIndicator(
                backgroundColor: Colors.black87,
              ),
            ),
          ),
        );
      },
      imageBuilder: (BuildContext context, ImageProvider imageProvider) {
        return AspectRatio(
          aspectRatio: 1 / 1 /* 16대 9의 비율로 이미지 생성 */,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider /* CachedNetworkImage 의 imageUrl */,
                fit: BoxFit.cover,
              ),
            ),
          ),
        );
      },
    );
  }
}