80. [Flutter] CustomScrollView Sliver안에 Scroll류 위젯을 쓰고 싶다면

SliverFillRemaining를 사용하자

CustomScrollView 로 Sliver [] 을 구성하는 중에 다른 Scroll류 위젯을 안에 사용하고싶을 경우가 있습니다.

보통은 Expanded로 화면의 빈곳을 전부 차지하며 랜더링 오류를 막아주지만, 이를 위해 Expanded를 사용하면 오류가 발생합니다.
이를 해결하기 위해서는 Scroll류 위젯을 SliverFillRemaining 위젯으로 감싸주면 사용이 가능합니다.!

---

예시로 ScrollablePositionedList라는 패키지를 설치하여 넣어줬습니다.

---

예시소스)

 

class TestView extends StatelessWidget {
  const TestView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        resizeToAvoidBottomInset: true,
        body: Center(
          child: Column(
            children: [
              Expanded(
                child: CustomScrollView(	//CustomScrollView 안에
                  slivers: [
                    SliverFillRemaining(	//SliverFillRemaining 을 Expanded 위젯처럼 사용
                      child: ScrollablePositionedList.separated( //Scroll류 위젯 사용
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return ListTile(
                            title: Text('$index 번째 ListTile 입니다.'),
                          );
                        },
                        separatorBuilder: (context, index) {
                          return const SizedBox(
                            height: 10,
                          );
                        },
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ));
  }
}