[Flutter/Project](Instagram Clone) 포스트 헤더 만들기

---

소스코드

// post.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';
import 'my_progress_indicator.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 Column(
      children: [
        _postHeader(),
        _postImage(),
      ],
    );
  }

  Widget _postHeader() {
    return Row(
      children: [
        Padding(
          padding: const EdgeInsets.all(common_xxs_gap),
          child: ClipOval(
            // ClipOval() 이미지를 원형으로 자름
            child: CachedNetworkImage(
              imageUrl: "https://picsum.photos/100",
              width: avatar_size, // my_progress.indicator.dart
              height: avatar_size,
            ),
          ),
        ),
        Expanded(
          // Expanded() 다른 위젯을 제외한 나머지 여백을 모두 차지
          child: Text("username"),
        ),
        IconButton(
          icon: Icon(
            Icons.more_horiz,
            color: Colors.black87,
          ),
          onPressed: null,
        ),
      ],
    );
  }

  CachedNetworkImage _postImage() {
    return CachedNetworkImage(
      // CachedNetworkImage() 받아온 이미지를 캐시파일로 저장해 재사용.
      imageUrl: "https://picsum.photos/id/$index/2000/2000",
      placeholder: (BuildContext context, String url) {
        return MyProgressIndicator(containerSize: size.width);
      },
      imageBuilder: (BuildContext context, ImageProvider imageProvider) {
        return AspectRatio(
          aspectRatio: 1 / 1 /* 1대 1의 비율로 이미지 생성 */,
          child: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider /* CachedNetworkImage 의 imageUrl */,
                fit: BoxFit.cover,
              ),
            ),
          ),
        );
      },
    );
  }
}

// common_size.dart

const double common_gap = 14.0;
const double common_xxs_gap = 8.0;

const double avatar_size = 30.0;