Flutter 서버와 데이터 주고 받기("로딩 중" 구현하기)

바다구름·2023년 3월 8일

Flutter

목록 보기

12/19

앱에서 서버의 데이터를 가져와보자.

1. pubspec.yaml 파일 코드 수정

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4

http: ^0.13.4 라는 코드를 추가하자.(띄어 쓰기에 주의)

2. main.dart 파일 코드 수정

//최상단 부분에
import 'package:http/http.dart' as http;
import 'dart:convert';

3. android/app/src/main/AndroidManifest.xml 파일수정

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

해당 위치에 코드를 추가 해주자

4. 서버한테 get 요청 날려보자

getData() async { // await를 사용하기 위해 함수 생성.
  var result = await http.get( Uri.parse('https://codingapple1.github.io/app/data.json') );
  print( jsonDecode(result.body) ) //가져온 값이 JSON형식이라 풀어주기위해jsonDecode() 함수 사용
}

await 을 붙이면 해당 코드가 다 끝나고 다음 코드 실행 줌. 근데 await을 아무데나 붙일 수 없어서 함수 안에 async 를 써줘야함.
Uri.parse 안에 주소를 가져온 뒤 출력하면 이상한 문자들이 뜨는데 result.body를 해야 {[],[],[]} 이런 식으로 가져와 줌
가져온 값 을 출력하면 {["key":"value"]} 이런 식으로 " "이 붙어서 오는데 이러면 사용 할 수 없기 때문에 jsonDecode() 함수 안에 가져온 값을 넣어서 따옴표들을 제거하여 사용.

5. 가져온거 데이터 바인딩

var data = [];

  getData() async {
    var result = await http.get(Uri.parse('https://codingapple1.github.io/app/data.json'));
    var result2 = jsonDecode(result.body);
    setState(() {
      data = result2;
    });
  }

  //페이지 실행되면 getData 함수 바로 실행
  @override
  void initState() {
    super.initState();
    getData();
  }

getData라는 함수를 생성하여 서버에서 가져온 값을 data 라는 state변수에 삽입.
페이지가 실행되면 getData 함수를 실행하기 위해 void initState 를 사용.

print(data[0]);

//결과
{id: 0, image: https://codingapple1.github.io/app/img0.jpg, likes: 5, date: July 25, content: 등을 대라 등대, liked: false, user: John Kim}

Text(data[0]['user'])

//결과 
//John Kim

6. 오류 수정("로딩 중" 표기하기)

지금 코드를 실행하면 페이지 로드시 잠깐 붉은 화면이 뜬다.
이유는 서버에 데이터를 아직 안가져왔는데 바로 호출(Text(data[0]['user']))하여 그렇다.

if(data.isNotEmpty) { // 불러오면 실행
	Text(data[0]['user']
} else { // 아직 안불러왔다면 실행
     return 
     Text('로딩중~);
     //CircularProgressIndicator(); 로딩바
 }