📝 튜터님과 Widget 공부

✏️ DraggableScrollableSheet

사용자가 드래그해서 크기를 조절할 수 있는 스크롤 가능한 시트를 만들 때 사용하는 위젯
주로 하단 시트(bottom sheet) 형태로 많이 쓰임

기본 구조

DraggableScrollableSheet(
  initialChildSize: 0.5, // 시작 시트 비율 (화면의 50%)
  minChildSize: 0.25,    // 최소 크기
  maxChildSize: 1.0,     // 최대 크기
  builder: (context, scrollController) {
    return Container(
      color: Colors.blueAccent,
      child: ListView.builder(
        controller: scrollController, // 반드시 전달받은 controller 사용
        itemCount: 30,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    );
  },
);

주요 속성

속성	설명	타입	기본값
initialChildSize	시트가 처음 표시될 때 화면 비율	double (0~1)	-
minChildSize	시트가 줄어들 수 있는 최소 비율	double (0~1)	0.25
maxChildSize	시트가 늘어날 수 있는 최대 비율	double (0~1)	1.0
expand	시트가 남은 공간을 채울지 여부	bool	true
builder	시트 안에 표시될 위젯을 정의	(BuildContext, ScrollController) => Widget	-

사용 시 주의점

• ScrollController를 반드시 builder에서 사용해야 함
• 내부 스크롤과 시트 드래그가 충돌하지 않도록 함
• ListView, GridView, SingleChildScrollView 등 스크롤 위젯과 함께 사용 가능

Scaffold(
  body: Stack(
    children: [
      Container(color: Colors.grey[200]), // 배경
      DraggableScrollableSheet(
        initialChildSize: 0.4,
        minChildSize: 0.2,
        maxChildSize: 0.8,
        builder: (context, scrollController) {
          return Container(
            color: Colors.white,
            child: ListView(
              controller: scrollController,
              children: List.generate(20, (index) => ListTile(title: Text('Item $index'))),
            ),
          );
        },
      ),
    ],
  ),
);

---