이게 여러가지 방법이 있는 것 같다만, 일단 하나만 정리해보자...
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")),
*/
);
}
}