[Flutter] Future 다루기 & FutureBuilder

Future 다루기 & FutureBuilder

• 지난 숙제에서 나는 서버에서 받은 데이터의 길이에 따라 출력하도록 했는데
• 강사님은 기존 배열에 데이터가 있는지 여부에 따라 조건 분기로 했다.
  • 그래서 조건문을 통해 배열.isNotEmpty로 코드를 작성
    • 조금 이상한 부분은 idNotEmpty가 자동 완성은 없는데 조건 분기가 잘 됨…

    class Home extends StatelessWidget {
      Home({super.key, this.homeData});
      final homeData;
      @override
      Widget build(BuildContext context) {
        if (homeData.isNotEmpty){
          return ListView.builder(
            itemCount: homeData.length,
            itemBuilder: (context, idx){
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.network(homeData[idx]['image']),
                  Container(
                    margin: EdgeInsets.fromLTRB(10, 20, 10, 20),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Text('좋아요', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700),),
                            Text(homeData[idx]['likes'].toString(), style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700)),
                          ],
                        ),
                        Text(homeData[idx]['date'].toString()),
                        Text(homeData[idx]['content'].toString()),
                      ],
                    ),
                  )
                ],
              );
            },
          );
        } else {
          return Text('데이터 없다');
        }
      }
    }
    

• 그리고 서버로 요청 시 성공, 에러에 대한 조건 분기 또한 해줘야 추후 서비스 관리에 더욱 좋기에 아래와 같이 statusCode를 확인 후 처리해주기
  • 여기서 물론 Toast 같은 걸 추가하면 더 좋을 듯!

getData() async{
    var result = await http.get(Uri.parse('<https://codingapple1.github.io/app/data.json>'));
    if (result.statusCode == 200) {
      setState(() {
        homeData = jsonDecode(result.body);
      });
    } else {
      print('실패');
    }
  }

• 여기서 Dio 라는 패키지를 설치하게 되면 GET 요청과 같은 것들의 코드가 더욱 단축된다고 함
• 그리고 FuterBuilder() 위젯을 사용하게 되면 futuer에 작성한 것이 처리가 완료된 후 builder에 있는 함수를 실행하게 되어 위에 작성한 조건 분기에 대한 코드가 줄어 듦.
  • 여기서 futuer 라는 건 오래 걸리는 요청을 의미한다고 함. 
  • 다만 단점으로 데이터가 추후에 추가되지 않는 경우에 유용하게 사용된다고 한다.