[Flutter] 하단에 고정된 스크롤 가능한 바텀시트 DraggableScrollableSheet 사용하기

하단에 고정된 시트를 만들어야 했는데, 

생각보다 쉽게 구현할 수 있었다. 

다만 구글링이 올래걸렸다.. 다 생각했던 대로 원하는대로 움직이지를 않았다우...

우선 고정된 시트는 DraggableScrollableSheet을 통해서 구현할 수 있다. 

 

시트 구성하기

시트 구성코드는 아래와 같다. 

DraggableScrollableSheet(
        initialChildSize: 0.25,
        maxChildSize: 0.8,
        minChildSize: 0.25,
        controller: sheetController,
        builder: (BuildContext context, scrollController) {
          return Container(
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              ),
            ),
            child: CustomScrollView(
              controller: scrollController,
              slivers: [
                SliverToBoxAdapter(
                  child: Center(
                    child: Container(
                      decoration: const BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      height: 4,
                      width: 80,
                      margin: const EdgeInsets.symmetric(vertical: 10),
                    ),
                  ),
                ),
                SliverList.list(
                  children: [
                    ListTile(
                      title: Text('리~~~스트'),
                    ),
                  ],
                )
              ],
            ),
          );
        },
      );

 

Stack으로 화면을 묶어주면 된다.

Stack(
    children: [
      CustomNaverMapView(),  
      _bottomSheet(),
    ],
  ),

 

---

전체 코드
전체코드는 아래와 같습니다. 

class MapView extends StatefulWidget {
  const MapView({super.key});

  @override
  State<MapView> createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  final DraggableScrollableController sheetController =
      DraggableScrollableController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          CustomNaverMapView(),  
          _bottomSheet(),
        ],
      ),
    );
  }

  _bottomSheet() => DraggableScrollableSheet(
        initialChildSize: 0.25,
        maxChildSize: 0.8,
        minChildSize: 0.25,
        controller: sheetController,
        builder: (BuildContext context, scrollController) {
          return Container(
            clipBehavior: Clip.hardEdge,
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(50),
                topRight: Radius.circular(50),
              ),
            ),
            child: CustomScrollView(
              controller: scrollController,
              slivers: [
                SliverToBoxAdapter(
                  child: Center(
                    child: Container(
                      decoration: const BoxDecoration(
                        color: Colors.black,
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      height: 4,
                      width: 80,
                      margin: const EdgeInsets.symmetric(vertical: 10),
                    ),
                  ),
                ),
                SliverList.list(
                  children: [
                    ListTile(
                      title: Text('리스트~'),
                    ),
                    ListTile(
                      title: Text('화면 구성!'),
                    ),
                  ],
                )
              ],
            ),
          );
        },
      ); 
}

 

참고한 블로그

https://medium.com/@rishi_singh/create-a-draggable-scrollable-bottomsheet-with-flutter-0ec50d93a3b9

Create a Draggable Scrollable BottomSheet with Flutter