서버와의 통신

get요청 post 요청에 대한 설명…

# pubspec.yml
dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4

<!-- Android src main  AndroidManifest-->
  <uses-permission android:name="android.permission.INTERNET" />

// main.dart 상단
import 'package:http/http.dart' as http;
import 'dart:convert';

위와 같이 세팅해줄 것

json 데이터 형식으로 가져오는 경우가 대부분일텐데..

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

result2 안에 jsonDecode 써서 json 가져와서 map 형태로 바꿔주면 됨.

list는 배열 map 은 객체 형태라고 생각하면 됨.

var map  = {'name' : 'john', 'age' : 20}
map['name'] // 이렇게 가져올 수 있음.

위에서 받은 data를 jsondata라는 변수에 담아서 아래와 같이 사용한다.

  Text('좋아요 : '+jsondata[index]['likes'].toString()),
  Text('글쓴이 : '+jsondata[index]['user'].toString()),
  Text('글내용 : '+jsondata[index]['content'].toString()),

그리고 이 data를 처음부터 가져온 상태가 아니기 때문에 if문으로 분기처리해준다.

Widget build(BuildContext context) {
    print(jsondata.isNotEmpty);
    if(jsondata.isNotEmpty) {
      return ListView.builder(
          itemCount: 3, // 몇번 반복?
          itemBuilder: (context, index){
            return
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.network(jsondata[index]['image'].toString()),
                  Text('좋아요 : '+jsondata[index]['likes'].toString()),
                  Text('글쓴이 : '+jsondata[index]['user'].toString()),
                  Text('글내용 : '+jsondata[index]['content'].toString()),
                ],
              );
          });
    }
    else {
      return CircularProgressIndicator();
    }

  }

최종 소스코드

또 여러가지 예외처리가 필요하다.

서버가 다운되었거나
요청경로가 이상한 경우

var result = await http.get(Uri.parse('https://codingapple1.github.io/app/data.json'));
    if(result.statusCode == 200){
      // 성공 코드
    }else {
      // 실패 코드
    }

Dio 라는 애를 사용해야하는 경우도 있음.

FuterBuilder 라는 애도 있음. 데이터를 자주 추가하기 어려움. 한번 가져오고 끝나는 경우에 사용해라

FutureBuilder (
  future: http.get(어쩌구),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('post에 데이터 있으면 보여줄 위젯')
    } 
    return Text('post에 데이터 없으면 보여줄 위젯')
  },
) 

future: 안에는 Future를 담은 state 이름을 적으면 됩니다. http.get() 이런거 직접 적어도 되긴 하지만 state에 저장했다가 쓰는게 좋을 수 있습니다.
builder: (){return 어쩌구} 안의 코드는 입력한 state 데이터가 도착할 때 실행해줍니다.
그리고 snapshot 이라는 파라미터가 변화된 state 데이터를 의미합니다. 그래서 아까와 같은 상황을 좀 더 매끄럽게 해결가능한데

중간에 변수 넣는 방법

Text('좋아요 : ${jsondata[index]["likes"]}'),

스크롤관련 설정할 때 필요한 부분

import 'package:flutter/rendering.dart';

스크롤바 높이 측정하려면 우선 ListView 담은 곳이 StatefulWidget 이어야 가능함.

StatefulWidget의 변수등록은 첫번째 클래스에서 해야하고 사용은 두번째 클래스에서 사용해야 함.

이런식으로 사용해야 함.

스크롤의 위치 체크는 항상 해야 함.
(바닥인지 체크하기 위해)
```dart
var scroll = ScrollController();

 scroll.addListener((){
      print(scroll.position.maxScrollExtent);
    });

숙제

맨 끝으로 가면 이미지 더 가져오게 만들 것.
밑으로 스크롤하면 하단바 숨기기 (이건 어떻게하지??)

Flutter 공부-14 서버와의 통신

서버와의 통신

중간에 변수 넣는 방법

스크롤관련 설정할 때 필요한 부분

숙제