* 네트워크 통신을 하여 서버에 접속하고 데이터를 가져와 책 목록을 보여주는 기능을 구현하였다.
초기 셋팅
- pubspec.yaml 파일을 열고 dependencies 에 http 패키지를 추가후 pub get
- main.dart에서 패키지 불러오기
네트워크 통신을 위한 셋팅
- 네트워크 통신을 하려면 접속할 대상 URL이 있어야 한다.
- JSON은 파일 크기도 작으면서 태그를 이용하여 값을 확인할 수 있기 때문에 많이 사용한다.
- 카카오에서 발급받은 REST API 키를 이용하여 구현하였다. (지워진부분)
- 사용자가 버튼을 누르면 http.get을 통해 url에 입력한 주소에 데이터를 요청한다.
해당 주소의 서버가 응답하면 가져온 데이터를 result에 넣고 그중 본문을 출력한다.
- async 키워드는 비동기 처리 방식으로 onPressed()함수가 비동기로 동작한다는 의미이다.
따라서 await를 통해 서버가 데이터를 넘겨줄 때까지 대기한다. 그리고 서버로부터 데이터를 받으면 JSON형태의 데이터를 출력한다.
- 네트워크 통신은 속도나 데이터양 같은 외부 요인 때문에 정확한 데이터를 받아온 다음에 처리해야한다.
따라서 네트워크 프로그래밍을 할 때는 비동기 방식으로 구현한다.
- 플로팅 버튼을 누르면 getJSONData() 함수를 호출하도록 하였다.
- 비동기로 주고 받기 위해 getJSONData()함수에 async를 선언하고 await를 이용해 통신하며 Future를 반환한다.
*Future는 비동기 처리에서 데이터를 바로 처리할 수 없을 때 사용한다.
- url 변수에는 카카오 API에 데이터를 요청하는 URL을 넣는다.
ex)
"dapi.kakao.com 서버에 있는 v3/search/book API입니다. 제목에 Hello가 포함된 책을 주세요"
http://dapi.kakao.com/v3/search/book?target=title&query=Hello
1----------------------------------------- 2----------- 3-------------
1. 요청할 도메인이다. 카카오에서 책을 검색하는 API를 나타낸다.
2. 도메인에 요청할 파라미터이다. target 파라미터에 title을 전달한다.
3. query 파라미터에 검색어 Hello을 전달한다.
도메인에 ? 이후의 파라미터를 전달해서 데이터를 요청한다. 파라미터는 &기호로 구분하여 여러 개를 지정할 수 있다.
target 과 query등 파라미터 이름은 API개발사가 제공하는 문서에 나와 있으므로 참고하여 사용하면 된다.
불러온 데이터를 List에 넣기
- List 형태의 변수에 넣는다. initState() 함수에서 data 변수를 초기화를 시켜줘야한다
- 리스트 형태로 화면에 출력하기
- 데이터가 0일 때는 Text 위젯을 출력, 서버로부터 데이터를 받으면 ListView.builder로 표시하게 된다.
- image.network는 네트워크에 있는 이미지를 가져오는 위젯이다. URL을 이용해 간단하게 화면에 출력할 수 있다.
- 카드 위젯에서 Row와 Column을 이용하여 화면을 배치하였다.
MediaQuery.of(context).size는 지금 스마트폰의 화면 크기를 의미한다.
화면의 넓이에서 이미지를 뺀 나머지만큼만 제목을 입력하도록 하였다. 만약 그냥 출력할 경우 영역을 벗어난 부분에 노란색 빗금으로 오류가 출력된다.
검색 기능 구현하기
- 텍스트필드를 이용하여 사용자가 직접 검색어를 입력할 수 있게 구현,
- 사용자가 입력한 단어가 제목에 포함된 책을 찾아 표시해주는 기능
- initState() 함수에서 TextEditingController를 초기화한다.
- 컨트롤러에서 받은 데이터를 URL 질의에 적용할 수 있도록 getJSONData() 함수에 있는 url을 수정한다.
스크롤로 책 정보 추가하기
- 정보를 불러온 뒤 스크롤을 내릴 때마다 이어 새로운 책을 받아 표시
- 페이지 단위로 불러올 수 있게 URL구성을 수정한다.
- int page = 1; 과 스크롤컨트롤러를 선언 후 initState() 함수에서 생성한 스크롤 컨트롤러의 addListener()함수를 이용해 스크롤할 때 이벤트를 받도록 처리한다.
offset은 목록에서 현재 위치를 double형 변수로 나타내며, 스크롤할 때마다 offset을 검사해 maxScrollExtent보다 크거나 같고 스크롤 컨트롤러의 position에 정의된 범위를 넘어가지 않으면 목록의 마지막이라고 인식한다. 그러면 page를 1만큼 증가한 후 getJSONData()함수를 호출한다.
- 정의한 스크롤 컨트롤러를 ListView.build() 함수의 controller 옵션에 입력한다.
- 버튼을 누를 때마다 기존 내용을 지우고 페이지를 1로 초기화하는 clear 코드 추가
* 네트워크를 이용해 서버에서 데이터를 가져와 표시하는 앱을 구현하였다. 외부 패키지와 API를 이용하는 방법도 알아보았다.
* 전체 코드 보기
GitHub - shinjoo95/flutter_http
Contribute to shinjoo95/flutter_http development by creating an account on GitHub.
github.com
'flutter > development' 카테고리의 다른 글
| 간단한 todo_list 만들기 (0) | 2022.11.15 |
|---|---|
| 동물 목록 어플 만들기(ListView)[2] (0) | 2022.11.12 |
| 동물 목록 어플 만들기(ListView)[1] (0) | 2022.11.12 |
| 계산기 구현하기 (0) | 2022.11.08 |
| 연락처 앱 만들기 (0) | 2022.10.26 |
