본문 바로가기

Flutter

플러터 api 데이타 가져와서 뿌리기

이게 여러가지 방법이 있는 것 같다만, 일단 하나만 정리해보자...

 

 

1. 뿌려줄 화면에 컨트롤러를 등록한다.

 ex: /pages/home.dart

 

 final HomeController controller = Get.put(HomeController());

 

 

2. 컨트롤러를 만들어준다.

ex : /controllers/home_controller.dart

// home dart가 onInit 됐을 띠 데이타를 불러오게 한다.

class HomeController extends GetxController { // 라이프 사이클이 있음 onInit, onClose...

  static HomeController get to => Get.find();

 

 //3번 Repository에서 가져온 데이타가 이상없으면 Rx 타입으로 등록한다. List 타입일 경우엔 RxList타입

 Rx<YoutubeVideoResult> youtubeResult = YoutubeVideoResult().obs; 

 

  @override

  void onInti(){

  _videoLoad();

  super.onInit();

}

  

  void _videoLoad(){  //모델을 감싸서 리파지토리 데이타를 불러올 주비가 되면 요걸 아래 2번 처럼 바꾼다

   // 로드 될 때 데이타에 접근할 수 있는 리파지토리를 만들어야 한다.

   Youtuberepository.to.loadVideos(); 

    //  YoutubeRepository를 바인딩에 영구등록한다.

    // binding.dart 에 Get.put(YoutubeRepository(), permanent:true) 추가

   }

   

// 2번

void _videoLoad () async { 

YoutubeVideoResult youtubeVideoResult =  await YoutubeRepository.to.loadVideos();

 // print(youtubeVideoResult.items.length); 를 찍어서 정상적으로 데이타가 찍히는 지 확인한다.

 

// 4번  

   if(youtubeVideoResult!=null && youtubeVideoResult.items!=null && youtubeVideoResult.items.length>0){

   youtubeResult(youtubeVideoResult); // youtubeResult에 youtubeVideoResult를 등록 이렇게 하면 자동으로 업데이트가 된다. 이렇게 하고 youtubeResult를 사용할 곳에서 참조해준다.

   }

}

 

3. 리파지토리를 만는다.

ex: /repositories/youtube_repository.dart

 

class YoutubeRepository extends GetConnect{ // get connect도 라이프사이클이 있음

  static YoutubeRepository get to => Get.find();

 

  @override

   void onInit(){

   httpClient.baseUrl = "https://www.googleapis.com";

   super.onInit();

   }

 

  Future<YoutubeVideoResult>   loadVideos() async {

   String url = "/youbue/v3/search?part=snippet&channelId=.........";

   // 데이타 불러와지는지 확인한다

  final response = await get(url);

    if(response.status.hasError){

      return Future.error(response.statusText);

    }else{

       if(response.body["items"]!= null && response.body["items"].length > 0){

        return YoutubeVideoResult.fromJson(response.body);

       }

      

    }

  }

 

 

4. 받아온 값을 화면에 뿌려주기 위해서 모델로 만들어준다.

 

5. 모델을 하나 더 감싸는 파일을 하나 더 만들어준다.

 

class YoutubeVideoReuslt {

 int totalResults;

 List<Video> items;

 

YoutubeVideoResult(

{   this.totalResults, this, items, }

);

 

factory YoutubeVideoResult.fromJson(Map<String, dynamic> json ) =>

   YoutubeVideoResult(

     totalResults: json["pageInfo"]["totalResults"],

     items : List<Video>.from(json["items"].map((data)=>Video.fromJson(data)))

    );

}

요렇게 하고 repository에 담아준다.

 

6. 컨트롤러에 Rx타입으로 등록한다. 위 2번에 //3번

  Rx youtubeResult = YoutubeVideoResult().obs; 

 

7. 데이타를 사용할 위젯을 obx로 감싸주고 데이타를 controller.youtubeResult.value.items.length 이런식으로 찍어준다.

 

class Home extends StatelessWidget {
  Home({Key? key}) : super(key: key);

  final HomeController controller = Get.put(HomeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('홈'),
      ),
        body: SafeArea(
          child: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: controller.youtubeDataResult.value.items.length,
            itemBuilder: (BuildContext context, int index){
              return Container(
                height: 100,
                color: Colors.lime,
                child: Text(
                    controller.youtubeDataResult.value.items.length != 0
                        ? controller.youtubeDataResult.value.items[index].snippet.title
                        .toString()
                        : "loading"
                        ),
                );
            }
            ),
          ),


        /*child: Obx(() => Text(
          controller.youtubeDataResult.value.items.length != 0
              ? controller.youtubeDataResult.value.items[0].snippet.title
                  .toString()
              : "loading")),
      */
    );
  }
}