Flutter - 로또앱 & 날씨앱

로또앱

svg 이용할때는 flutter_svg 라이브러리 사용

ListTile

리스트 한줄을 위해 미리 만들어진 위젯
leading, title, subtitle, trailing 이용하여 UI 구성

UI 배치

css에서 absolute, fixed 사용하듯이 flutter 에서는 Stack 과 Positioned 위젯 사용하여 배치 ( e.g. FAB )

FAB 에는 heroTag 라는게 존재하는데, 한 위젯내에 여러 FAB 가 선언되는 경우 동일한 default tag 값이 설정됨
페이지 이동 시 동일한 tag 값은 애니메이션 과정에서 오류 발생.
애니메이션 과정은 다음과 같음
A 라는 FAB 의 heroTag 가 b1 이라면, 이동할 페이지의 FAB 역시 heroTag 가 b1 일때, 자연스러운 FAB 레이아웃 이동 애니메이션이 동작

외부 API 연동하기

http 라이브러리 이용하여 통신
안드로이드에서 인터넷 접근 권한 허용을 위해 아래 파일 수정

android > app > src > main > AndroidManifest.xml

IOS 에서는 기본으로 인터넷 접근 권한이 포함되어 있음
FutureBuilder
Future 상태를 감시하다가 결과에 맞는 UI 그려주는 위젯
실행 흐름
api 호출 > 생성자에 결과 담기 > initState 에서 해당 fetch 함수 결과를 변수에 초기화 > FutureBuilder 에서 동적 UI 페인팅

factory
객체를 만들기 전에 가공하거나 조건을 걸고 싶을 때 사용하는 특별한 생성자
late
변수 선언 먼저 하고 초기화는 나중에

---

날씨앱

플랫폼별 퍼미션 설정

모든 앱은 OS 안에서 격리된 공간인 샌드박스 안에서만 실행.
앱은 기본적으로 자신의 폴더 외에는 접근이 안되는데, 선언된 퍼미션을 통해 샌드박스를 뚫고 외부 데이터에 접근 가능

Google Play나 Apple App Store는 앱이 선언한 권한과 실제 기능이 일치하는지 심사하고, 권한 선언 없이 민감한 데이터에 접근하려고 시도하는 앱은 아예 스토어 등록 자체가 거부됨

android

// AndroidManifest.xml
// 위치정보

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

ios

// Info.plist
// 위치정보

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>

위치 및 시간 변경

async 함수 내에서 context 사용법?

예를 들어 로그인 버튼 클릭하고 서버로부터 응답 받기 전에 사용자가 뒤로가기를 눌러 현재 위젯이 사라진 경우 해당 로그인 함수 안에 context 는 이미 dispose 된 context 를 사용하려하여 에러 발생
이 경우 State 클래스에 정의된 멤버 변수인 mounted 로 해결

Future<void> login(BuildContext context) async {
    await Future.delayed(const Duration(seconds: 2)); // 서버 요청 가정

	// 해결 코드
 	if (!mounted) return; 

    // ⚠️ 파란 밑줄
    Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => const HomePage()),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => login(context),
      child: const Text('로그인'),
    );
  }