Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
Tags
- changenotifier
- runTransaction
- transform
- multiprovider
- Snapshot
- provider
- snackbar
- consumer
- divider
- setstate
- ListView.builder
- 문법
- Firebase
- Navigator
- signout
- borderRadius
- platformexception
- datetime
- Stream
- reference
- Camera
- user
- globalkey
- enum
- swift 문법
- switch
- changenotifierprovider
- controller
- Swift
- permission
Archives
- Today
- Total
코딩하는 제리
[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,
),
),
),
);
},
);
}
}
'Flutter > Project_InstaClone(완)' 카테고리의 다른 글
[Flutter/Project](Instagram Clone) 프로필 화면 상단바 만들기 (0) | 2021.01.19 |
---|---|
[Flutter/Project](Instagram Clone) 아이콘, 아이디, 게시글 내용 만들기 (0) | 2021.01.19 |
[Flutter/Project](Instagram Clone) 포스트 헤더 만들기 (0) | 2021.01.19 |
[Flutter/Project](Instagram Clone) 커스텀 로딩 위젯 (0) | 2021.01.18 |
[Flutter/Project](Instagram Clone) 로딩 위젯 생성 (0) | 2021.01.18 |
Comments