플러터로 유튜브 앱 클론 — 1

플러터를 학습하기 위해서 유튜브 앱을 클론하는 연습을 시작한다. 나중에 또 참조할 수 있도록 기록으로 남겨둔다.

플러터 개발 환경 만드는 것에 대해서는 많은 글과 동영상들이 있다. 이를 참조해서 dart, flutter SDK와 안드로이드 SDK를 설치한다. 노트북을 이용하면서 작업하는데, 안드로이드 스튜디오가 좀 무거운 면이 있어서, VS code 환경에서 작업을 한다. flutter 개발을 위해서는 flutter 확장도 설치해야 한다.

ctrl+shift+p 키를 누르면 command palette 창이 나타나며, flutter: New Project 명령을 선택한다. Application 을 선택하고, 앱 개발 작업을 할 디렉토리를 선택한다. application 이름을 입력하라는 창이 등장하는데, 이름까지 입력해주면, 플러터 앱 기본 프로젝트가 생성된다.

1. 생성된 코드 중에, MyHomePage 를 제거한다.
2. YouTubeClone 이라는 stateless widget 을 생성한다.
3. YouTubeClone 이 Scaffold를 리턴하도록 변경한다. Scaffold 는 상단의 appBar, bottomNavigation 등을 기본 레이아웃으로 제공한다.
4. appBar 의 backgroundColor 를 Colors.white로 설정하여 배경색을 흰색으로 바꾼다.
5. appBar의 기본 text 색상이 밝은 계열이기 때문에 title를 지정하더라도 흰색 배경에 글자가 나타나지 않게 된다. MaterialApp의 theme의 primarySwatch 를 Colors.amber로 변경해주면 text 가 어두운 계열로 바뀌게 된다.
6. appBar의 title을 지정한다. “MyTube”로 설정한다. text는 굵은 형태이므로 textStyle의 weight를 bold로 지정한다.

여기까지 작업한 내용은 다음과 같다.

material 디자인에서 찾지 못한 icon 들이 있기 때문에, awesome font의 도움을 받아야 겠다. 패키지 설치를 해줘야 한다.

font_awesome_flutter: ^9.1.0 을 pubspec.yaml 에 추가해준다.

appBar의 타이틀과 actions를 정리한다.

1. appBar 의 title 앞에 유튜브 아이콘을 추가한다.
2. title 과 유튜브 아이콘의 간격을 좀 더 줄이기 위해서 titleSpacing 값을 0으로 설정한다.
3. appBar 의 actions 를 이용해서 cast, bell, search에 대한 icon 버튼을 추가한다.
4. actions 에 추가로 사용자를 나타내는 icon 버튼을 추가한다. 이를 위해서 CircleAvatar 를 사용한다.

scaffold의 appBar 를 선언한 부분은 다음과 같이 작성했다.

scaffold 의 body는 그냥 Text('body') 로 중앙에 위치하도록 한다.

scaffold 하단의 bottomNavigationBar를 정리한다.

1. BottomNavigationBar 를 사용해서 설정한다.
2. items 항목에 BottomNavigationBarItem 를 이용해서 각 항목에 맞는 icon과 label를 지정한다.
3. icon이 흰색 계열로 보여서 눈에 띄지 않는데, 이를 위해서 unselectedItemColor 와 selectedItemColor 를 설정해준다.

작업한 내용이다.

작업한 내용은 https://github.com/moonyl/flutter-youtube-clone 에 업데이트 한다.