스나이퍼팩토리 플러터 1주차 주간평가
연락처 앱 기반 작성
1. 연락처 앱 기반 설명
- 아래와 같이 5명의 연락처가 저장된 연락처 앱 UI를 작성
- 이미지는 네트워크로 (CDN 방식으로) 삽입
Text,ListTile,Icon,Column등의 위젯 사용
2. 연락처 앱 기반 작성
- 코드
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: SafeArea(
child: Column(
children: const [
ListTile( // 1번 연락처
title: Text('이테디'),
subtitle: Text('010-1000-2000'),
leading: CircleAvatar( //원형 이미지 생성
radius: 30,
backgroundImage: NetworkImage('https://picsum.photos/100/100')
),
trailing: Icon(Icons.call),
),
SizedBox(height: 16,), //리스트타일 사이 간격
ListTile( // 2번 연락처
title: Text('김스틴'),
subtitle: Text('010-9000-8000'),
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://picsum.photos/100/100')
),
trailing: Icon(Icons.call),
),
SizedBox(height: 16,), //리스트타일 사이 간격
ListTile( // 3번 연락처
title: Text('이주노'),
subtitle: Text('010-3000-3000'),
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://picsum.photos/100/100')
),
trailing: Icon(Icons.call),
),
SizedBox(height: 16,), //리스트타일 사이 간격
ListTile( // 4번 연락처
title: Text('임헬렌'),
subtitle: Text('010-2000-8000'),
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://picsum.photos/100/100')
),
trailing: Icon(Icons.call),
),
SizedBox(height: 16,), //리스트타일 사이 간격
ListTile( // 5번 연락처
title: Text('염해리'),
subtitle: Text('010-1000-1000'),
leading: CircleAvatar(
radius: 30,
backgroundImage: NetworkImage('https://picsum.photos/100/100')
),
trailing: Icon(Icons.call),
),
],
),
),
),
);
}
}- 결과
우선 ListTile 요소들이 안전 영역에 위치하도록 SafeArea 위젯을 사용했고 아래에 Column 위젯을 생성했다.
Column 위젯 안에 5개의 연락처를 저장하기 위해 5개의 ListTile 생성했다. 각각의 연락처의 이름과 번호를 title과 subtitle 속성으로 작성했다.
이미지는 leading 속성을 사용했는데 원형의 이미지를 불러오기 위해 CircleAvatar를 사용했고, NetworkImage를 사용해 네트워크의 이미지를 불러왔다. 또한 이미지는 ListTile의 높이에 맞게 설정하여 가운데 위치하므로 따로 Padding 등의 위젯은 사용하지 않았다.
맨 끝의 전화기 아이콘은 trailing 속성을 사용했다.
마지막으로 각각의 ListTile 요소의 간격을 띄우기 위해 SizedBox를 사용했다.
추가 내용 정리
CDN 방식
이미지는 네트워크로 (CDN 방식으로) 불러와서 사용했는데 여기서 CDN 방식에 대해 좀 더 자세히 살펴 보았다.
CDN이란 Content Delivery Network의 약자로 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술을 의미한다.
CDN은 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화하는데 각 지역에 캐시 서버 PoP(Points of presence)를 분산 배치해 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하게 된다.
예시로 미국에 있는 사용자가 한국에 호스팅 된 웹 사이트에 접근하는 경우 미국에 위치한 PoP 서버에서 웹 사이트 콘텐츠를 전송하게 된다.
웹 사이트에서 그래픽 이미지, 동영상 등의 컨텐츠를 제공한다면 CDN 서비스를 이용할 필요가 있으며 예시로는 넷플릭스 등이 있다.
첫 번째 주간평가!!
첫 번째 주간평가로 연락처 앱의 기반을 작성했다. 복잡한 내용은 아니고 간단하게 연락처 5개가 저장된 UI를 제작하는 것이었다. 크게 어렵지는 않았지만 요소나 속성들의 크기가 정해진 것은 아니라서 임의로 했는데 맞게 된건지 모르겠다 ㅋㅋㅋㅋ 특히 leading의 이미지는 사이즈가 정해진게 아니라 리스트 타일에 맞게 설정하고 따로 Padding 등으로 가운데 정렬을 하지는 않았는데 상관 없겠지 ㅠㅠ 어쨌든 이어서 도전과제도 하러 가보겠습니다!!
📄 Reference
