[Flutter] 바텀 시트 (showModalBottomSheet)

✍ showModalBottomSheet

바텀 시트를 띄울 수 있게 해주는 함수이다.

Future<T?> showModalBottomSheet<T>({
  required BuildContext context,
  required WidgetBuilder builder,
  Color? backgroundColor,
  double? elevation,
  ShapeBorder? shape,
  Clip? clipBehavior,
  BoxConstraints? constraints,
  Color? barrierColor,
  bool isScrollControlled = false,
  bool useRootNavigator = false,
  bool isDismissible = true,
  bool enableDrag = true,
  RouteSettings? routeSettings,
  AnimationController? transitionAnimationController,
  Offset? anchorPoint,
})

 

 

 

 

바텀 시트로 띄울 위젯을 builder 의 return 값으로 설정하고 context 를 넣어주면 된다.

showModalBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 300,
    );
  },
);

 

 

 

😶 모서리 모양 변경(ex. 모서리 둥글게)

리턴 값으로 설정한 위젯의 모서리의 모양을 바꾸고 싶다면 shape 인자(ShapeBorder)를 사용하면 된다.

ShapeBorder 로 사용할 수 있는 몇 가지 모양을 소개하면 다음과 같다.

• BeveledRectangleBorder({BorderSide side = BorderSide.none, BorderRadiusGeometry borderRadius = BorderRadius.zero}) : 평평하거나 "원형" 모서리가 있는 직사각형 가장자리를 만들 수 있다.
• CircleBorder({BorderSide side = BorderSide.none, double eccentricity = 0.0}) : 둥근 가장자리를 만들 수 있다.
• ContinuousRectangleBorder({BorderSide side = BorderSide.none, BorderRadiusGeometry borderRadius = BorderRadius.zero}) : RoundedRectangleBorder와 비슷하며, 직선 면과 둥근 모서리 사이의 부드러운 연속적인 전환이 있는 직사각형 가장자리를 만들 수 있다.
• RoundedRectangleBorder({BorderSide side = BorderSide.none, BorderRadiusGeometry borderRadius = BorderRadius.zero}) : 코너가 둥근 직사각형 가장자리를 만들 수 있다.
• StadiumBorder({BorderSide side = BorderSide.none}) : 스타디움 같은 가장자리를 만들 수 있다.

 

 

예시) 상단 모서리가 둥근 모양

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.greenAccent,
  shape: const RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topRight: Radius.circular(15.0),
      topLeft: Radius.circular(15.0),
    ),
  ),
  builder: (context) {
    return Container(
      height: 300,
    );
  },
);

 

 

😶 색상 변경 (backgroundColor, barrierColor)

backgroundColor 는 builder 에 설정한 위젯의 바탕색이 없을 경우 대신한다. barrierColor 는 설정한 위젯 외의 색을 정한다.

 

예시) backgroundColor = 초록색 , barrierColor = 연분홍색

showModalBottomSheet(
  context: context,
  backgroundColor: Colors.greenAccent,
  barrierColor: Colors.deepOrangeAccent.withOpacity(0.3),
  builder: (context) {
    return Container(
      height: 300,
    );
  },
);

 

 

😶 스크롤 가능, 위젯 크기(isScrollControlled)

isScrollControlled 가 true 라면 위젯 크기를 앱 화면의 반 이상을 차지하게 할 수 있고 위젯의 리스트뷰와 같은 스크롤 가능한 위젯을 사용할 수 있다. false 이면 위젯의 크기를 아무리 크게 해도 반 이상 늘어나지 않는다.

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  builder: (context) {
    return Container(
      height: 700,
    );
  },
);

 

 

😶 바텀 시트 종료 방법(isDismissible)

isDismissible 가 true 라면 위젯 밖을 클릭하면 바텀 시트가 종료된다. false 이면 위젯 밖을 클릭해도 종료되지 않는다. 바텀 시트를 종료하고 싶다면 Navigator.of(context).pop(); 을 실행한다.

showModalBottomSheet(
  context: context,
  isDismissible: false,
  builder: (context) {
    return Container(
      height: 300,
      child: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text("뒤로가기"),
        ),
      ),
    );
  },
);