플러터 GetX 스크롤컨트롤러, 리스트뷰 관련 오류(Flutter GetX Scroll controller, Listview error)

Question

안녕하세요. 현재 대학생으로 flutter를 배워보고 싶어서 주먹구구로 찾아보면서 앱을 하나 만들고 있습니다.게시판의 무한 스크롤 기능을 구현하다가 다음과 같은 에러가 나왔습니다. 해당 에러는 Get.toNamed나 Get.offNamed와 같은 메소드로 PostList 페이지로 두 번 이상 라우팅할 시에 일어납니다.'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 158 pos 12: '_positions.length == 1': ScrollController attached to multiple scroll views.post_list.dart에서 게시글 목록 페이지를 보여주도록 작성하였습니다. GetView를 통해 PostList 클래스를 작성하였고, appbar 부분에서 게시판 카테고리 전환을 위해 getXcontroller로 구현한 커스텀 컨트롤러를 사용하였습니다. 그리고 게시글 목록은 커스텀 위젯으로 빼내서 PostListView라는 이름으로 작성하였습니다. 이 또한 같은 커스텀 컨트롤러를 사용하였습니다. 코드가 너무 길어져 일부 생략하여 작성하였습니다.class PostList extends GetView { const PostList({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( ~ children: [ Obx( () => InkWell( onTap: () { controller.reload(category: 'ALL'); }, child: Text( '전체', style: TextStyle( fontSize: 25, fontWeight: FontWeight.w700, color: (controller.currentCategory.value == 'ALL') ? Color(0xFF1E1E1E) : Color(0xFFAFAFAF)), ), ), ), ~ // 이외에도 다른 게시판들로 이동하는 버튼을 구현 body: Stack(children: [ PostListView(), // bottomNavigaitionBar Align( alignment: Alignment.bottomCenter, child: GetBuilder( init: BottomNavController(), builder: (controller) => BottomNavBar(), ), ), ]), // 게시글 작성 버튼 floatingActionButton: Padding( padding: const EdgeInsets.only(bottom: 80), child: SizedBox( width: 70, height: 70, child: FloatingActionButton( backgroundColor: Color(0xFF5BB6FF), shape: CircleBorder(), onPressed: () { Get.toNamed('/postWrite'); }, child: Icon( Icons.edit, color: Colors.white, ), ), ))), ); } } // 게시글 목록 class PostListView extends GetView { PostListView({super.key}); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(bottom: 75), child: Obx(() { if (controller.isLoading.value && controller.posts.isEmpty) { // 데이터를 로딩 중이며 불러온 게시물이 없을 때 print('loaing posts...'); return Center( child: CircularProgressIndicator(), ); } else if (!controller.isLoading.value && controller.posts.isEmpty) { // 로딩하지 않는 중이며 불러온 게시글이 없을 때 print('loading: ${controller.isLoading.value}'); print('postEmpty: ${controller.posts.isEmpty}'); return Center( child: Text('게시물이 없습니다.'), ); } else { // 데이터가 있는 경우 게시물 목록 표시 return ListView.separated( controller: controller.scrollController.value, itemCount: controller.posts.length + (controller.hasMore.value ? 1 : 0), separatorBuilder: (context, index) => Divider(), itemBuilder: (context, index) { // 인덱스가 불러온 게시글 수보다 작은 경우 (불러온 게시글 출력) if (index < controller.posts.length) { Post post = controller.posts[index]; return ListTile( contentPadding: EdgeInsets.fromLTRB(14, 0, 14, 5), title: Text( post.title, style: TextStyle( fontWeight: FontWeight.w600, fontSize: 20, ), ), subtitle: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( child: Text( post.content, style: TextStyle(color: Color(0xFF565656), fontSize: 15), maxLines: 2, ), ), SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.start, children: [ // 날짜와 작성자 Text( '${post.createDate.month.toString().padLeft(2, '0')}/${post.createDate.day.toString().padLeft(2, '0')} ${post.authorName}', style: TextStyle( color: Color(0xFF9F9F9F), fontSize: 16), ), // 댓글 개수 Spacer(), if (post.commentCount > 0) ...[ Icon(Icons.notes, size: 20, color: Color(0xFF565656)), SizedBox( width: 3, ), Text( post.commentCount.toString(), style: TextStyle( fontSize: 14, color: Color(0xFF565656)), ), ], // 좋아요 개수 if (post.likeCount > 0) ...[ SizedBox( width: 13, ), Icon(Icons.favorite_border, size: 20, color: Color(0xFF565656)), SizedBox( width: 3, ), Text( post.likeCount.toString(), style: TextStyle( fontSize: 14, color: Color(0xFF565656)), ) ] ], ), ], ), onTap: () => Get.toNamed('/postDetail', arguments: post.id.toString()), ); } else if (controller.hasMore.value) { // 더 불러올 데이터가 있는 경우 return Center( child: //CircularProgressIndicator(), LoadingAnimationWidget.hexagonDots( color: Colors.black, size: 40)); } else { // 불러올 데이터가 없는 경우 return SizedBox( child: Column( children: [ Text('게시글이 없습니다.'), IconButton( onPressed: controller.reload(), icon: Icon(Icons.refresh)), ], ), ); } }, ); } }), ); } } post_list_scroll_controller.dart에서 무한 스크롤 기능을 작성하였습니다. class PostListScrollController extends GetxController { static PostListScrollController get instance => Get.find(); var scrollController = ScrollController().obs; var posts = [].obs; var isLoading = false.obs; var hasMore = false.obs; var nextLink = ''.obs; var currentCategory = 'ALL'.obs; @override void onInit() { super.onInit(); print('init controller'); _getData(category: currentCategory.value); scrollController.value.addListener(() { try { if (scrollController.value.position.pixels == scrollController.value.position.maxScrollExtent && hasMore.value) { _getData(category: currentCategory.value); } } catch (e) { print('Error in scrollController listener: $e'); } }); } @override void onClose() { print('onClose'); scrollController.value.dispose(); super.onClose(); } _getData({String? category}) async { if (isLoading.value) return; isLoading.value = true; try { String postUri; // json 요청 보낸 적이 있음(게시글 더 불러오기) if (nextLink.value.isNotEmpty) { postUri = nextLink.value; } else { // json 요청이 처음임(게시글 목록 로드) String serverUri = dotenv.env['SERVER_URI']!; String postEndpoint = dotenv.env['POST_ENDPOINT']!; postUri = '$serverUri$postEndpoint'; if (category != null && category != 'ALL') { postUri = '$postUri?category=$category'; } } var response = await http.get( Uri.parse(postUri), ); if (response.statusCode == 200) { var jsonData = json.decode(utf8.decode(response.bodyBytes)); List fetchedPosts = (jsonData['posts'] as List) .map((postJson) => Post.fromJson(postJson)) .toList(); posts.addAll(fetchedPosts); nextLink.value = jsonData['nextLink']; hasMore.value = fetchedPosts.length == 10; } else if (response.statusCode == 404) { hasMore.value = false; } else { print('Failed to load data. Status code : ${response.statusCode}'); } } catch (e) { print('Error: $e'); } isLoading.value = false; } reload({String? category}) async { if (isLoading.value) return; isLoading.value = true; posts.clear(); nextLink.value = ''; currentCategory.value = category ?? 'ALL'; print(currentCategory); isLoading.value = false; await _getData(category: currentCategory.value); } } main.dart에서 컨트롤러 인스턴스를 생성해주었습니다.~ GetMaterialApp( ~ initialBinding: AppBinding(), ~ ) ~ class AppBinding extends Bindings { @override void dependencies() { Get.put(PostListScrollController()); } }하나의 scrollController에 여러 Listview가 연결되었기 때문에 에러가 발생한다고 합니다. 그러나 각 코드에서는 get.find로 이미 생성된 컨트롤러 인스턴스를 사용하기 때문에 문제가 발생하지 않을 것이라고 생각하는데도 같은 오류가 계속 발생해서 너무 곤란합니다ㅠㅠ 도와주시면 정말 감사드리겠습니다!!

녹차프라프치노한잔 · Answer

scrollController를 왜 obs로 하신거에요?

플러터 GetX 스크롤컨트롤러, 리스트뷰 관련 오류(Flutter GetX Scroll controller, Listview error)

1개의 답변

#getx 목록