[개발일지] flutter 앱개발 4주차

<스파르타코딩 flutter 강의 수강일지>

 

4주차: API 사용법 익히기

1. Google API

Google 책 검색 API 공식문서

https://developers.google.com/books/docs/v1/reference/volumes/list

Volume: list  |  Google Books APIs  |  Google Developers

 

사용 예시

import 'package:http/http.dart' as http;

void main() async {
  // URL : https://www.googleapis.com/books/v1/volumes?q=고양이
  final url = Uri.https('www.googleapis.com', '/books/v1/volumes', {'q': '고양이'});
  
  // GET 방식 요청
  final res = await http.get(url);

  if (res.statusCode == 200) {
    // 성공시
    print(res.body);
  } else {
    // 실패시
    print(res.statusCode);
  }
}

 

 

2. dio: 통신 패키지 

Dart에서 HTTP 요청을 보낼 수 있도록 도와주는 통신 패키지

https://pub.dev/packages/dio/install

dio | Dart Package

 

설치

flutter pub add dio

 

사용법

// GET 메소드로 URL 요청
main() {
	Dio().get("URL");
}

// HTTP 요청은 응답하기까지 시간이 걸리므로 비동키 코드
// 동기로 작동하려면, async & await 추가
main() async {
	Response result = await Dio().get("URL");
	print(result.data); // data 안에 응답 내용이 들어 있습니다.
}

 

예시

  /// 퀴즈 가져오기
  void getQuiz() async {
    String trivia = await getNumberTrivia();
    setState(() {
      quiz = trivia;
    });
  }


  /// Numbers API 호출하기
  Future<String> getNumberTrivia() async {
    // get 메소드로 URL 호출
    Response result = await Dio().get('http://numbersapi.com/random/trivia');
    String trivia = result.data; // 응답 결과 가져오기
    print(trivia);
    return trivia;
  }

 

3. url_launcher: 웹 브라우저 패키지

url을 웹 브라우저에서 띄워준다

https://pub.dev/packages/url_launcher

url_launcher | Flutter Package

 

설치

flutter pub add url_launcher

 

사용법

1) IOS

VSCode → iOS → Runner→ Info.plist

5번째 줄에 추가

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>sms</string>
  <string>tel</string>
</array>

2) Android

VSCode → android → app → src → main → AndroidManifest.xml

35번째 줄에 추가, 줄 정렬 및 저장.

<!-- Provide required visibility configuration for API level 30 and above -->
<queries>
  <!-- If your app checks for SMS support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="sms" />
  </intent>
  <!-- If your app checks for call support -->
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
</queries>

 

3) 사용하기

//사용법
launchUrl(Uri.parse('url'))

 

예시

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

final Uri _url = Uri.parse('https://flutter.dev'); //Uri.parse 이용하여 써야함

void main() => runApp(
      const MaterialApp(
        home: Material(
          child: Center(
            child: ElevatedButton(
              onPressed: _launchUrl,
              child: Text('Show Flutter homepage'),
            ),
          ),
        ),
      ),
    );

Future<void> _launchUrl() async {
  if (!await launchUrl(_url)) {
    throw 'Could not launch $_url';
  }
}

 

 

알아둬야 할 것들

1. initState: 상태 초기화

상태를 초기화하는 메소드

이 메소드의 구현은 상속된 메소드 호출로 시작해야 함.

super.initState();

 

예시

class _HomePageState extends State<HomePage> {
  String quiz = ""; // 보여줄 퀴즈

  @override
  void initState() {
    super.initState();
    print('시작');
    getQuiz();
  }

 

2. 토글 함수 만들기

예시

// 토글 함수
  void toggleFavoriteImage(String catImage) {
    if (favoriteImages.contains(catImage)) {
      favoriteImages.remove(catImage);
    } else {
      favoriteImages.add(catImage);
    }

    notifyListeners();
  }

 

3. 그 외 위젯

1) Positioned.fill

left, right, top, bottom을 모두 0으로 준 것과 같음

Poistioned.fill을 사용하여 Stack의 공간을 위젯으로 채울 수 있음

 

예시

Stack(children:[
    Positioned.fill(
        child: FlutterLogo()
    ),
]);

 

2) PreferredSize

Appbar의 bottom 속성은 항상 PreferredSize 위젯으로 사용해야 함

return Scaffold(
	appBar: AppBar(
		bottom: PreferredSize(
      preferredSize: Size(width, height), // bottom 영역 크기
			child: 위젯,
		),
	),
);