GMS 프로젝트 - Flutter

코드 설명
목차
1. main menu
- WillPopScope
- ListTile
2. sub menu
- DrawerHeader
- ExpansionTile
3. Firebase
- Firebase
- Cloud Messaging
- Authentication
4. article
- Article
- TTS
- setting
5. Search

목표
• 대학생들의 영자신문 접근성 강화
• 독자들의 쉬운 피드백

0. 초기 main 설정
- 앱 이름을 설정하고 스마트폰 다크모드와 연동 시키기 위해 darkTheme: 요소를 포함시킨다.
- menu 폴더를 만든 후 main_menu 파일을 만든다.

1. main menu
- 스마트폰 상에서 뒤로 가기 버튼을 누를 때 종료 여부를 물어보는 창을 띄우기 위해 Scaffold를 WillPopScope로 감쌌다.
- 앱을 종료 할 때는 flutter 내에 저장되어 있는 service.dart를 import 한 후 SystemNavigator.pop을 사용하면 된다.
1.1. WillPopScope

1. main menu
- WillPopScope의 child로 들어가 있는 Scaffold에서는 상단 바인 Appbar, 서브 메뉴를 열 수 있는 Drawer, 그리고 본문에는 기사 리스트
를 보이게 하기 위해 ListView 위젯을 사용할 것이기 때문에 각각 appBar, drawer, body 요소에 추가해준다.
- Appbar에는 타이틀 명과 IconButton을 추가한다
1.1. WillPopScope > Scaffold

1. main menu
- 기사 리스트를 보여주기에 앞서 샘플 데이터를 저장한다.
- data 폴더를 만든 후 그 안에 article_data.dart파일을 생성한다.
- 다음은 그 안에 있는 데이터와 데이터에 대한 설명이다.
- 전부 var 타입이며 리스트 형식으로 이루어져 있다.
1.2. ListTile (article_data.dart)
데이터 명 데이터 설명 데이터 예시
functionList 기사의 섹션 ["Book"]
titleList 기사 제목 ["Big Brother is Watching You"]
subTitleList 기사 부제목 ["1984, the prophecy of George Orwell"]
reporterList 기사를 쓴 기자 이름 ["Jeon Jong-Min"]
emailList 기사를 쓴 기자 이메일 ["jongmin1701@naver.com"]
dateList 기사 쓴 날짜 ["2019.09.21"]
timeList 기사 쓴 시간 ["18:00:48"]
articleList 기사 내용 ["In June, there was a news story about an
internet lecturer fabricating comments…"]
imageList 기사에 포함된 사진(url 형식으로 되어 있음) ['http://www.gachonherald.com/news/photo
/201909/803_2691_349.jpeg']

1. main menu
- 먼저 redirecting constructor를 통해 ArticleInfo라는 class를 만든다.
- for 구문과 ArticleInfo 클래스를 이용해 article_data에서 데이터를 불러와 List 형식으로 만든다.
1.2. ListTile (article_info.dart)

1. main menu
- makeRowItem() 위젯을 생성한 후 리스트 칸에 들어갈 내용과 디자인 코드를 적는다.
1.2. ListTile (main_menu.dart)
overflow를 이용해서 텍스트가 특정
줄 수를 넘어가지 않도록 한다
내용
사용 했을 때
사용 안 했을 때

1. main menu
- article_info에서 데이터를 불러오기 위해 우선 class 밖에 aInfos = rPageInfo()를 선언한다.
- ListView에 데이터를 넣는다.

1. main menu
- 타일 앞쪽에 Image.network()를 사용해 사진을 넣어준다.

1. main menu
- 터미널에 들어가 ‘flutter run –d chrome –web-renderer html’
을 입력해주면 해결이 된다
- url에서 이미지를 가지고 올 경우 chrome 디바이스에서
는 이미지가 안보인다.

2. sub menu
- 사용자의 정보가 나와있는 탭을 보여주기 위해 UserAccountsDrawerHeader를 이용한다.
- CircleAvatar를 통해 원형 탭을 만들어 주고 LinearGradient를 통해 그라데이션 색상을 준다.
2.1. DrawerHeader

2. sub menu
- Header 아래에 작은 섹션을 ListTile를 이용해 나열한다.
- 큰 섹션을 만들기 위해 사용자의 터치로 확장이 가능한 타일인 ExpansionTile을 이용해 만든다.
2.2. ExpansionTile
On Campus
Brief
Campus Talk
Special Event
Cover Story
Editorial
CoverStory
English Clinic
English Expert Column
Writing Clinic
Reading Clinic
English Study Web site
Q&A Column
Global Campus
Info Exchange Univ
Faculty Column
Student Column
Foreign Student Column
Episode Column
Society
Interview
Gachonian
Campus tour
Culture
Experience
Movie
Drama
Book
Stage&Music
Leisure&Health
Photo Essay
about
The Gachon Herald
Reporters
Quiz

3. Firebase
- Firebase 연동 후 알람 메시지 전송 기능
- flutter에서 제공하는 로그인 화면 기능
- 목표

3. Firebase
- 대부분의 서버 기능들을 실제 서버 구성없이 배포가 가능한 수준으로 만들 수 있도록 도와주는 백엔드 서비스
- 짧은 시간 안에 백엔드 아키텍처를 구성하고 사용할 수 있도록 도와줌
3.1. Firebase

3. Firebase
① https://console.firebase.google.com/u/0/ 로 이동하여 프로젝트 추
가를 누른 후 프로젝트 이름과 기초 설정을 선택한 후 프로젝트를 생성한다.
3.1. Firebase - 연동하기 (1 / 5)
② 안드로이드 버튼을 누른다.

3. Firebase
③ 원하는 플러터 프로젝트 패키지 이름을 android > app > build.gradle에
들어가 찾은 후 입력한다.
안드로이드 폴더에 있는
것과 헷갈리지 않게 주의!
선택사항

3. Firebase
④ google-service.json을 다운로드 한 후 android > app 폴더에 붙여넣기
한다. (이때 파일 이름 ’google-service.json’ 이 정확하게 들어가야 함)

3. Firebase
⑤ android > build.gradle에 코드 추가

3. Firebase
⑥ android > app > build.gradle에 코드 추가 후 다음 2번 누르면 연동 끝

3. Firebase
3.1. Firebase(+ android > app > build.gradle 에러 없애기) (1 / 3)
① 상단 바에서 File > Project Structure…에 들어간다.
- 사실 저 에러를 없애지 않아도 앱은 돌아가긴 하지만 보기 싫다면 해결하는 방법이 있다.
- 문제가 발생하는 이유는 SDK가 설정이 되어 있지 않아 생기는 오류이다.

3. Firebase
② Project Setting > Modules > 프로젝트 명 >
Dependencies에 들어가 Module SDK를 설정해주고
OK를 누른다.

3. Firebase
③ API 29부터 대체된 GradleException을
FileNotFoundException으로 바꾸면 에러가 사라진다.

3. Firebase
3.1. Firebase(+ Firebase 패키지 모음 사이트)
- https://firebase.flutter.dev/ 에 들어가면 Firebase를 사용 할 때 필요한 flutter 패키지와 그 설명서 링크가 있다.

3. Firebase
3.2. Cloud Messaging
- Firebase를 사용해서 앱 이용자에게 알람을 보낼 수 있는 기능을 구현할 수 있음
- 필요한 패키지
- firebase_core: https://pub.dev/packages/firebase_core
- firebase_messaging: https://pub.dev/packages/firebase_messaging

3. Firebase
- firebase_core와 firebase_messaging 그리고 나중에 필요한 FCM 등록 토큰을 print하기 위해 foundation을 import 해준다.
- MyApp에서 return 해주는 home 값을 Messaging으로 바꾸고 새로 Messaging 위젯을 만든다

3. Firebase
- Messaging Widget 내용 채우기
FCM(Firebase Cloud Messaging)
받아와서 print 하기
받아온 메시지 앱 알람으로
출력하기
첫 화면에 MainMenu가 보여지게 끔
바꾸기

3. Firebase
- FCM 토큰 확인하기
- 만약 출력이 안된다면 android > app > build.gradle에 가서 minSdkVersion을 23, targetSdkVersion을 30으로 바꾼 후 다시 출력
FCM 토큰

3. Firebase
- Firebase 콘솔에서 ‘참여 > Cloud Messaging’에 들어가 ‘Send your first message’ 버튼을 누른다

3. Firebase
- 알림 제목과 알림 텍스트에 원하는 내용을 입력하고 ‘테스트 메시지 전송’ 버튼을 누른다
1
2

3. Firebase
- 프로젝트에서 출력했던 FCM 등록 토큰을 추가한다.
1 2
3

3. Firebase
- 테스트 메시지 출력되는 것을 확인
앱이 동작 중일 때 앱 동작 중이 아닐 때

3. Firebase
3.3. Authentication
- Firebase에서 Authentication을 이용하면 로그인 화면을 만들 수 있을 뿐만 아니라 Google, Facebook 등 다양한 추가 제공업체의 로그
인 방법을 추가할 수 있다.

3. Firebase
3.3. Authentication
- 필요한 패키지
- firebase_auth: https://pub.dev/packages/firebase_auth
- flutterfire_ui: https://pub.dev/packages/flutterfire_ui
Flutter 2.0부터 추가된 패키지로 기본적
로그인 화면을 만들어주는 역할을 함

3. Firebase
3.3. Authentication (main.dart)
Messaging 클래스에서 Authentication으로
가도록 Scaffold의 body를 바꾼다
SignInScreen을 사용하여 로그인 화면을 만들고
디자인을 설정한다

3. Firebase
3.3. Authentication (main_menu.dart)
- 로그아웃 버튼 수정

3. Firebase
3.3. Authentication - Firebase와 연결
- Firebase에서 Authentication을 누른 후 Sign-in method에 들어가 원하는 로그인 하는 방법을 추가하기

3. Firebase
- 이메일/비밀번호 사용 설정 후 저장

3. Firebase
- Users 탭에 들어가면 Firebase에서 직접 사용자를 추가하거나 모바일 앱에서 register 버튼을 눌러 추가할 수 있음

4. article
- 목표
- article.data에 들어가 있는 데이터를 보여주는 기사 화면
- 폰트, 색상, 글자 크기 등을 변경하는 화면을 다양한 위젯으로 보여주는 설정 화면
- 기사를 드래그 할 수 있도록 변경하고 드래그한 기사를 읽어주는 TTS 기능

4. article
4.1. Article (main_menu.dart)
- 메인 메뉴에서 기사를 눌렀을 경우 해당 데이터를 가지고 Article()로 이동하도록 만들기

4. article
4.1. Article (article.dart)
- Article 클래스를 만든 후 info 데이터 받기
사용 방법

4. article
4.1. Article (article.dart)
- Article 클래스 꾸미기
이미지와 부제목 데이터가
있을 경우에만 container 생성
appbar 만들기(설정 아이콘도
추가)
기사 작성

4. article
4.2. TTS
- flutter의 패키지를 이용하면 선택한 기사를 읽어주는 TTS 서비스를 만들 수 있다.
- flutter_tts: https://pub.dev/packages/flutter_tts 에서 패키지를 받은 후 install
- tts를 설정한다

4. article
4.2. TTS
- 기사내용에서 선택한 부분을 speech에 저장한 후 하단 바의 시작 버튼을 누르면
그 내용을 말하게끔 한다.

4. article
4.3. setting - text font
- dropdown을 이용해 글자의 폰트를 선택할 수 있게 끔 한다.
- fontFamily를 사용해 원하는 폰트를 저장한다
원하는 폰트의 리스트를 만든 후
DropdownMenuItem에 넣어 준다
만약 Dropdown의 값이 바뀌면 선택된 값 또한
바뀌어야 하기 때문에 recentFont를 사용해 현
상태를 업데이트 시킨다

4. article
4.3. setting - text size
- Slider를 이용해 글자 크기가 변하는 기능을 만든다.
Slider 값 설정
(10 ~ 35)
Slider 테마 설정
Slider의 값이 바뀌면 textsize를 사용해 현
상태를 업데이트

4. article
4.3. setting - text size
Slider 불러오기 &
Slider 부분 나누기 (5마디)

4. article
4.3. setting - text color
- Slider를 이용해 글자 색이 변하는 기능을 만든다.
- 색깔을 ARGB를 이용해 List로 저장 한다.
- 글자 색과 글자 음영을 선언한다.
색을 ARGB를 이용해
List형식으로 저장
글자 색과 글자
음영을 선언

4. article
4.3. setting - text color
- Slider 위치가 바뀔 때 마다 실시간으로 글자 색이 변하는 것을 볼 수 있게 끔 만들기
- 같은 방식으로 배경 색 또한 변경할 수 있도록 만든다.
- 자세한 코드 설명은 밑 링크에서 확인
링크: https://medium.com/@mhstoller.it/how-i-made-a-custom-color-picker-slider-using-flutter-and-dart-e2350ec693a1

4. article
4.3. setting - 최종 화면

5. Search
- 검색 아이콘을 이용해 원하는 기사를 찾을 수 있는 기능을 만든다.
- 검색한 결과는 검색 내역으로 남기고 검색 내역을 삭제하는 기능도 추가한다.
main_menu.dart에 있는 검색 아이콘에 기사 제목
데이터가 들어있는 Search를 입력

5. Search
검색한 결과의 기사로 이동을 하고 그
기사의 제목이 검색 내역으로 남게 함
검색 내역 삭제 기능

아쉬운 점 & Github 주소
• 해당 웹사이트의 데이터를 실시간으로 업데이트를 할 수 없는 점 (article)
• 사용자 정보를 보여주지 못한 점 (subtitle)
• 기사 테마를 저장하지 못하는 점 & 실시간으로 적용되지 않는 점 (article, setting)
• 섹션 리스트와 검색 리스트를 생성하지 못한 점 (subtitle, search)
• 기사를 보는 방식을 변경할 수 있는 기능을 추가하지 못한 점 (article, setting)
- Full Source code
- https://github.com/jongminjeon/GachonHerald-Mobile-Service

GMS 프로젝트 - Flutter

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a GMS 프로젝트 - Flutter

Semelhante a GMS 프로젝트 - Flutter (20)

GMS 프로젝트 - Flutter