바텀시트 (BottomSheet)
바텀시트 (Bottom Sheet)은 모바일 앱 및 모바일 프레임워크에서 자주 사용되는 UI 요소 중 하나입니다. 이것은 화면 하단에서 위로 슬라이딩하여 추가 정보를 제공하거나 사용자와 상호 작용할 수 있는 패널 형태의 위젯입니다. 바텀시트를 사용하여 앱 내에서 다양한 작업 및 정보 표시를 구현할 수 있습니다.
바텀시트
바텀시트는 앱의 주요 콘텐츠 위에 오버레이로 표시되며, 사용자에게 다양한 옵션을 제공하거나 추가 정보를 제공하기 위해 사용됩니다. 화면 하단에서 위로 슬라이딩되어 나타나며, 사용자의 상호 작용에 따라 확장 및 축소될 수 있습니다.
기본 바텀시트
기본 바텀시트는 가장 간단한 형태의 바텀시트로, 간단한 목록이나 콘텐츠를 표시할 때 사용됩니다. 사용자는 목록 항목을 탭하여 선택하거나 콘텐츠를 볼 수 있습니다.
AgnesBottomSheet(
child: StandardBottomSheet(),
).showDefault();Open BottomSheet
사용자 정의 가능한 오픈 바텀시트로, 필요한 경우 오프셋과 스크롤 컨트롤러를 사용하여 조절할 수 있습니다. 이것은 사용자에게 추가적인 옵션을 제공하거나 상호 작용 가능한 콘텐츠를 표시하는 데 유용합니다.
AgnesBottomSheet(
child: OpenBottomSheet(
bottomSheetOffset: offset,
scrollController: openBottomSheetController,
),
).showDefault();Sticky BottomSheet
스티키 바텀시트는 바텀시트의 상단에 고정된 헤더를 가집니다. 사용자가 스크롤할 때 헤더는 축소되거나 확장될 수 있으며, 스크롤 시에 상세 정보와 함께 사용자에게 더 많은 콘텐츠를 제공하는 데 사용됩니다. 아래는 스티키 바텀시트의 예제입니다.
showModalBottomSheet(
context: context,
builder: (context) {
ScrollController scrollController = ScrollController();
return DraggableScrollableSheet(
initialChildSize: 0.9,
minChildSize: 0,
maxChildSize: 1,
builder: (BuildContext context,
ScrollController dragController) {
scrollController = dragController;
return ListView.builder(
controller: scrollController,
itemCount: _children.length + 1,
itemBuilder: (context, index) {
if (index == 0) {
return AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: double.infinity,
height: 100,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(
dragController.offset == 0.8
? 0
: 40),
topRight: Radius.circular(
dragController.offset == 0.8
? 0
: 40),
),
),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Expanded(
child: Center(
child: Text(
'Header',
style: Theme.of(context)
.textTheme
.headlineMedium,
),
),
),
Text(
' position ${dragController.offset}',
style: Theme.of(context)
.textTheme
.titleLarge,
)
],
),
);
} else {
final itemIndex = index - 1;
return _children[itemIndex];
}
},
);
},
);
},
);바텀시트 위젯을 활용하면 앱의 사용자 경험을 향상시키고 추가 정보를 제공하는 데 유용합니다. 각 유형의 바텀시트는 특정 사용 사례와 디자인 요구 사항에 맞게 선택하여 사용할 수 있습니다.
Last updated