UI 만들기 - 인스타그램 메인화면
여태 짧게 학습한 위젯들을 활용해서 인스타그램의 UI를 비슷하게 따라한 화면을 만드는 연습을 해볼 것이다
상단의 앱 바를 만들고 바디를 2개의 컨테이너로 나눠서 친구의 피드 목록과 게시물을 만들 예정임
이렇게 AppBar를 만들어줬다
다음은 바디를 2개의 화면으로 나누기 위해 Column 위젯에 Expanded 컨테이너 2개를 사용하고
Expanded 위젯의 flex 속성을 이용해서 1:8 비율로 나눠줄 것이다.
그리고 일단 색상까지 넣어줌
첫 번째 컨테이너는 친구의 피드 목록을 만들어줘야되는데, 가로로 배치해야되므로 row 위젯을 만들고나서, 그 안에 서클 아바타라는 위젯을 넣을 것이다
서클아바타의 사용법은 radius 속성으로 서클의 크기를 정해주고, 백그라운드 속성으로 이미지를 넣을 수 있다
백그라운드 속성에서 NetworkImage() 로 url을 넣어서 이미지를 지정해준다.
이렇게 CircleAvatar를 3개 추가해서 만들었다
근데 이 써클들끼리 너무 붙어있어서 좀 띄우고 싶다면 SizedBox 위젯을 사이사이에 추가하면 된다
대충 이런식으로 추가 ㄱㄱ
그리고 컨테이너에 여백을 주고싶다하면 padding 속성을 이용한다
+ 글고 기니까 cmd+. 눌러서 컨테이너 속 코드를 숨김 처리해준다
이제 두번째 컨테이너에서 게시글을 만들어볼 것이다
일단 게시글 정보와 게시 내용을 나누기 위해서 이 속에서 2개의 컨테이너를 만들 것이다
게시글 정보부터 만들면, row 위젯에 서클아바타,텍스트 위젯, 아이콘 위젯을 넣어서 사이즈 박스와 패딩 속성으로 여백을 주겠습니다
Expanded(
flex: 8,
child: Container(
color: Colors.grey[100],
child: Column(
children: [
Container(
padding: EdgeInsets.all(15),
child: Row(
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(
'https://www.sanrio.com.hk/_ul/character_profile_hellomimmy.png',
),
),
SizedBox(width:15,),
Text('hello kitty', style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Icon(Icons.more_horiz)
],
)),
두 번째 컨테이너는 첫번째 컨테이너를 제외한 나머지 공간을 차지하는 flexible container로 만들어줬고 칼럼으로 게시물 정보에 대한 이미지, 아이콘, 텍스트를 넣어주겠다.
텍스트 넣을 때 기본 설정이 가운데 정렬로 되어있으므로 Column 에서 crossAxisAlignment 속성을 이용해서 .start로 정렬해준다
근데 이미지는 가운데 정렬하고 싶기 때문에 Image.network() 만 Align으로 감싸서 설정하면 된다
Flexible(child: Container(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.center,
child: Image.network(
'https://www.sanrio.com.hk/_ul/character_profile_ichigoman.png',
width:250,
height:250,
fit:BoxFit.contain,
),
),
SizedBox(height:15),
Row(
children: [
Icon(Icons.favorite_border),
SizedBox(width: 8.0),
Icon(Icons.comment),
SizedBox(width: 8.0),
Icon(Icons.send),
Spacer(),
Icon(Icons.bookmark_border),
],
),
SizedBox(height:15),
Text(
'Liked by kitty1, kitty2 and 100 others'),
Text('View all 20 comments'),
Text('2 hours ago'),
],
전체 코드
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Instagram',
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.black,
),
body: Column(
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(10),
color: Colors.grey[300],
child: Row(
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(
'https://www.sanrio.com.hk/_ul/character_profile_hellokitty.png'),
),
SizedBox(
width: 15,
),
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(
'https://www.sanrio.com.hk/_ul/character_profile_hellomimmy.png',
),
),
SizedBox(
width: 15,
),
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(
'https://www.sanrio.com.hk/_ul/character_profile_deardaniel.png',
),
)
],
))),
Expanded(
flex: 8,
child: Container(
color: Colors.grey[100],
child: Column(
children: [
Container(
padding: EdgeInsets.all(15),
child: Row(
children: [
CircleAvatar(
radius: 30,
backgroundImage: NetworkImage(
'https://www.sanrio.com.hk/_ul/character_profile_hellomimmy.png',
),
),
SizedBox(width:15,),
Text('hello kitty', style: TextStyle(fontWeight: FontWeight.bold),
),
Spacer(),
Icon(Icons.more_horiz)
],
)),
Flexible(child: Container(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.center,
child: Image.network(
'https://www.sanrio.com.hk/_ul/character_profile_ichigoman.png',
width:250,
height:250,
fit:BoxFit.contain,
),
),
SizedBox(height:15),
Row(
children: [
Icon(Icons.favorite_border),
SizedBox(width: 8.0),
Icon(Icons.comment),
SizedBox(width: 8.0),
Icon(Icons.send),
Spacer(),
Icon(Icons.bookmark_border),
],
),
SizedBox(height:15),
Text(
'Liked by kitty1, kitty2 and 100 others'),
Text('View all 20 comments'),
Text('2 hours ago'),
],
)
))
],
)))
],
),
),
);
}
}