Overview

GetX를 사용하여 bottom sheet를 만들어 보자.

showModalBottomSheet

action in Appbar

AppBar의 action에 bottom Sheet를 호출하는 action을 추가 해보자!

1. CustomScrollView에 slivers 에 SliverAppBar을 넣어준다.

 Widget _customView(BuildContext context) {
    return CustomScrollView(
      slivers: [
        _appbar(context),
		...
      ],
    );
  }

2. SliverAppBar의 actions 에 버튼과 이벤트를 연결한다.

Widget _appbar(BuildContext context) {
    return SliverAppBar(
    ...
      actions: [
        Container(
          alignment: Alignment.center,
          child: GlobalButton(
            onClick: () async {
              _showBottomSheet(context);
            },
            child: const Icon(
              Icons.more_vert,
              color: Colors.black87,
            ),
          ),
        )
      ],
    );
  }

3. showModalBottomSheet에 BuildContext를 인자로 넘겨주고, bottomSheet에 보여준 children을 넣어준다.

Future _showBottomSheet(BuildContext context) {
    return showModalBottomSheet(
      context: context,
      enableDrag: true,
      builder: (BuildContext context) {
        return SizedBox(
          height: 220.h,
          child: Column(
            children: [              
              _SheetItem(
                icon: Icons.ios_share,
                onTap: () async => controller.item.value.Share(),
                title: '공유하기',
              )
            ],
          ),
        );
      },
    );
  }

showModalBottomSheet

showModalBottomSheet가 포함하고 있는 속성값은 다음과 같다.

Future<T?> showModalBottomSheet<T>({
    required BuildContext context,
	required WidgetBuilder builder,
	Color? backgroundColor,
	double? elevation,//z 축 높이. 기본 0. 그림자가 생김
	ShapeBorder? shape,//모양
	Clip? clipBehavior,
	BoxConstraints? constraints,
	Color? barrierColor,
	bool isScrollControlled = false,
	bool useRootNavigator = false,
	bool isDismissible = true,
	bool enableDrag = true,//bottomSheet 드래그 가능
	bool useSafeArea = false,
	RouteSettings? routeSettings,
	AnimationController? transitionAnimationController,
	Offset? anchorPoint
})

event in BottomSheet

_SheetItem(
	icon: Icons.do_disturb_on,
	onTap: () async {
		// DO-exit bottom sheet
		Get.back();

		var result = await Get.toNamed(Routes.REPORT.replaceAll(
                                ':content_id', controller.postId.value)) ??
                            false;

		if (result) {
			Get.back(result: true);
			GlobalToastWidget(message: '신고가 완료되었습니다.');
		}
	},
	title: '신고하기',
	color: ColorPath.lineErrorColor),

bottom Sheet 안에 있는 아이템을 눌러 이벤트가 처리되고, 이후 별도의 동작이 필요하다면 위와 같이 구성하는 것이 좋다.
위는 포스트를 신고하고, 신고페이지로 이동하여 접수하고, 해당 결과 값에 따라 포스트에서 나갈 것인지 동작을 정하고 있다.

참고

알고보면 간단한데