코딩하는 제리

[Flutter/Project](Instagram Clone) 포스트 액션 버튼 만들기 본문

Flutter/Project_InstaClone(완)

[Flutter/Project](Instagram Clone) 포스트 액션 버튼 만들기

JerryCho 2021. 1. 19. 11:18


소스코드

// 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 'package:flutter_project_IJ/widgets/rounded_avatar.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(),
        _postActionsButton(),
      ],
    );
  }

  Row _postActionsButton() {
    return Row(
      children: <Widget>[
        IconButton(
          icon: ImageIcon(AssetImage('assets/images/bookmark.png')),
          onPressed: null,
          color: Colors.black87,
        ),
        IconButton(
          icon: ImageIcon(AssetImage('assets/images/comment.png')),
          onPressed: null,
          color: Colors.black87,
        ),
        IconButton(
          icon: ImageIcon(AssetImage('assets/images/direct_message.png')),
          onPressed: null,
          color: Colors.black87,
        ),
        Spacer(), // 위젯을 제외한 나머지 여백을 모두 차지
        IconButton(
          icon: ImageIcon(AssetImage('assets/images/heart.png')),
          onPressed: null,
          color: Colors.black87,
        ),
      ],
    );
  }

  Widget _postHeader() {
    return Row(
      children: [
        Padding(
          padding: const EdgeInsets.all(common_xxs_gap),
          child: RoundedAvatar(),
        ),
        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,
              ),
            ),
          ),
        );
      },
    );
  }
}
Comments