플러터로 기상청 날씨 앱 만들기 일지 1. UI 디자인

2022. 1. 2. 23:04·앱 프로그래밍/Flutter
목차
  1. UI 디자인 구상
  2. UI 디자인의 이해 
  3. 코드 분석
  4. 일요일 디자인 1차
  5. 일요일 디자인 2차(완성)

UI 디자인 구상

 

 

UI 디자인의 이해 

UI 디자인은 위젯을 배치하는 방식으로 이루어진다. 

대강 위의 그림과 같이 위젯이 위젯을 감싸는 식으로 원하는 UI를 구현할 수 있다. 

Container는 child를 하나밖에 가질 수 없고 Stack, Colun, Row는 child를 여러 개 가질 수 있다. 

나는 mainAxisAlignment로 배치를 편하게 할 수 있도록 작은 컴포넌트까지 container로 감싸는 식으로 UI를 구현했다.

 

 

코드 분석

코딩셰프 강좌를 통해 만든 날씨앱을 활용하여 앱을 제작하기로 했으므로, 배운 코드를 활용하기 위해 우선 코드분석부터 했다. 

(코드 링크: https://github.com/zlecoding/Flutter-app-weather_app)

 

파일 트리 구조

│  main.dart
│
├─data
│      my_location.dart 
│      network.dart 
│
├─model
│      model.dart 
│
└─screens
        loading.dart 
        weather_screen.dart 

 

 

파일 구조

main.dart

  • home: loading.dart 파일의 Loading 위젯을 호출

 

loading.dart

  • Loading class: stateful widget
    • initState(): 가장 처음 실행되는 함수. getLocation() 호출.
    • getLocation()
      1. MyLocation myLocation = MyLocation(); ☞사용자의 위치 정보를 받아오기 위해 my_location.dart 파일의 MyLocation 클래스 인스턴스를 생성.
      2. Network network = Network(날씨 api url, 미세먼지 api url); ☞파싱된 json데이터를 받아오기 위해 network.dart파일의 Networt 클래스 인스턴스를 생성.
      3. Navigator를 이용해 weather_screen.dart 파일의 WeatherScreen로 페이지 이동. 이동 시 getLocation()에서 생성된 날씨데이터와 미세먼지 데이터를 전달.
    • Widget build: 로딩 인디케이터 위젯

my_location.dart

  • MyLocation class: 현재 사용자의 위치 정보를 받아오는 클래스

network.dart

  • Networt class: 날씨와 미세먼지 데이터를 받아와 statusCode가 200일 때만 json을 파싱해서 리턴하는 클래스

weather_screen.dart

  • WeatherScreen class: stateful widget
    • initState(): updateData() 호출
    • updateData(): 필요한 json 데이터를 변수에 저장
    • getSystemTime(): 현재 시각을 불러오는 메소드
    • Widget build: UI 구성 + UI에 필요한 데이터를 변수로 setup하여 화면에 출력

model.dart

  • Model class
    • Widget getWeatherIcon(): 날씨 상태를 수치화하여 해당하는 svg파일을 불러온다.
    • Widget getAirIcon(): 미세먼지 상태를 수치화하여 해당하는 이미지 파일을 불러온다. 
    • Widget getAirCondition(): 수치화된 미세먼지 농도에 따라 미세먼지 상태를 나타내는 텍스트를 적절히 불러온다.

 

대강의 흐름은 아래와 같다. 

 

  • loading(앱 실행시키자마자 내 위치 가져온 뒤 api에서 내 위치 관련 데이터 얻어오기) ▶ weather_screen(ui 구성해서 필요한 정보를 보여주도록 한다.) 
  • loading ▶ network (내 위치 받아오기, 정상적으로 위치를 받아왔을 경우 해당 위치를 콘솔창에 출력하고 정상적으로 위치를 받아오지 못했을 경우에는 오류 메시지를 출력)
  • loading ▶ network (데이터 파싱 시 정상적인 출력일 경우 데이터를 리턴하고 아닐 경우 오류 메시지 출력)
  • weather_screen ▶ model (날씨 상태를 수치화하여 해당 수치에 부합하는 이미지 출력)

 

 

디자인 시작.

 

일요일 디자인 1차

1. 영상 따라하지 않고 혼자 해보려니 UI부터 힘겹다.

UI도 UI지만 안에 들어가는 아이콘들 찾아보고 오픈소스 라이선스 찾아보는 데 시간이 더 많이 걸렸다.

컨텐츠 구성에 시간이 더 많이 들어간다는 말은 정말 팩트...

 

2. 오픈소스 라이선스 고지에 관한 내용이 정말 없다. 검색해도 많이 안 나옴. 대체 긴 라이선스는 어떻게 넣는 건지ㅜㅜ

Navigator.of(context).push(
MaterialPageRoute(builder: (_) => LicensePage()

위 코드를 사용하면 추가된 라이브러리들과 오픈소스들을 구글이 알아서 정리해 준다. 그런데 내가 추가할 수 있는 방법은 없는 건가? 찾아봐도 안 나와서 너무 답답하다...

 

☞ 해결

void initMyLibrary() {
LicenseRegistry.addLicense(() async* {
yield const LicenseEntryWithLineBreaks(<String>['추가할 라이센스 이름'], '''
라이센스 내용...
''');
});
}

위와 같이 표기해서 함수를 실행시키면 라이센스 페이지에 내가 원하는 라이센스를 표기할 수 있다. 그런데 이제 문제는 지우는 법을 모르겠다... 

하나 추가했다가 실패해서 

LicenseRegistry.reset();

했더니 이전 라이센스 표기들이 다 날아갔다. 다시 복원해 보려다가 포기하고 새로 오픈소스들 표기해서 함수를 실행해 라이센스 목록에 내가 추가하고 싶은 사항들을 추가했다. 

 

 

일요일 디자인 2차(완성)

 

디자인을 계속 변경했다.

본격적으로 값을 연결하면서 디자인은 더 바뀔 것 같다. 

 

 

 


참고한 사이트 목록

 

배경화면 만들기 사이트

https://coolbackgrounds.io/

 

Cool Backgrounds

Explore a beautifully curated selection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers.

coolbackgrounds.io

 

 

아이콘 사이트

https://orioniconlibrary.com/

 

 

배경화면 사이트

https://unsplash.com/

 

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

 

저작자표시 비영리 변경금지 (새창열림)

'앱 프로그래밍 > Flutter' 카테고리의 다른 글

플러터 API key 숨기기  (0) 2022.01.09
플러터로 기상청 날씨 앱 만들기 일지 3. 역지오코딩(위도, 경도 -> 주소 불러오기)  (0) 2022.01.08
플러터로 기상청 날씨 앱 만들기 일지 2. 데이터 연동(기상청 API)  (0) 2022.01.05
[오류해결] unhandled exception: user denied permissions to access the device's location.  (7) 2021.12.28
[코딩셰프]플러터 강좌 내용 정리-9(반복문을 이용한 로또 번호 생성기 제작)  (0) 2021.12.28
[코딩셰프]플러터 강좌 내용 정리-8(코드 리팩토링)  (0) 2021.12.27
  1. UI 디자인 구상
  2. UI 디자인의 이해 
  3. 코드 분석
  4. 일요일 디자인 1차
  5. 일요일 디자인 2차(완성)
'앱 프로그래밍/Flutter' 카테고리의 다른 글
  • 플러터로 기상청 날씨 앱 만들기 일지 3. 역지오코딩(위도, 경도 -> 주소 불러오기)
  • 플러터로 기상청 날씨 앱 만들기 일지 2. 데이터 연동(기상청 API)
  • [오류해결] unhandled exception: user denied permissions to access the device's location.
  • [코딩셰프]플러터 강좌 내용 정리-9(반복문을 이용한 로또 번호 생성기 제작)
청량리 물냉면
청량리 물냉면
프로그래밍 공부를 하고 있습니다. 공부 내용 정리 겸 정보 공유를 목적으로 합니다.
  • 청량리 물냉면
    노력중인 블로그
    청량리 물냉면
  • 전체
    오늘
    어제
    • 분류 전체보기
      • 프로그래밍
        • Programming
        • C | C++
        • Java
        • Python
      • 웹 프로그래밍
        • HTML | CSS
        • JavaScript | TypeScript
        • React
        • Vue.js
        • Next.js
        • Spring & Spring Boot
        • JSP & Servlet
        • DB
      • 웹 프로젝트
        • 웹 프로젝트
        • 🥨스낵몰
        • 👨‍👨‍👧‍👧소셜 가계부
        • 🌜꿈 일기장
        • 🔮포트폴리오 사이트
        • 🏃‍♂️팀 프로젝트: 일정관리 프로그램
        • 📈팀 프로젝트: AI기반 주식 분석 플랫폼
        • 😺Just Meow It: 고양이의 조언
      • 앱 프로그래밍
        • Flutter
        • Kotlin
      • Problem Solving
        • 백준
        • 프로그래머스
        • SWEA
      • Computer Science
        • 알고리즘
        • 컴퓨터 네트워크
        • 이산수학
      • Developer
        • 후기
        • 자료정리
        • 취업 | 취준
        • 웹개발 교육 프로그램
        • TIL
  • 블로그 메뉴

    • 홈
    • Github
  • 공지사항

    • 프로그래밍 공부 중😊
  • 인기 글

  • 태그

    ZeroCho
    자바스크립트
    d3
    자바
    뉴렉처
    웹사이트
    프로그래머스
    클론 프로젝트
    AWS
    타입스크립트
    프로젝트
    mysql
    리액트
    Next.js
    플러터
    강의내용정리
    백준
    Jiraynor Programming
    구현
    공식문서
    파이썬
    SWEA
    컴퓨터네트워크
    spring boot
    bfs
    React
    Til
    포트폴리오
    알고리즘
    블로그 제작
  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
청량리 물냉면
플러터로 기상청 날씨 앱 만들기 일지 1. UI 디자인

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.