[Flutter] Modal bottom sheet 상단에 border radius 주기

Scaffold를 사용하는 경우

• Modal bottom sheet 안에서 Scaffold의 AppBar를 활용하는 경우
• ModalBottomSheetRoute의 border radius와 Clip.hardEdge를 설정한다.
• showModalBottomSheet()를 사용하는 경우:

  showModalBottomSheet(
  	context: context,
  	shape: const RoundedRectangleBorder(
  		borderRadius: BorderRadius.vertical(
  			top: Radius.circular(24),
  		),
  	),
  	clipBehavior: Clip.hardEdge,
  	builder: (context) => Scaffold(
  		appBar: AppBar(...),
  		body: Container(...),
  	),
  )
  

• Navigator.push에 ModalBottomSheetRoute를 직접 사용하는 경우:

  final route = MaterialPageRoute(
  	shape: const RoundedRectangleBorder(
  		borderRadius: BorderRadius.vertical(
  			top: Radius.circular(24),
  		),
  	),
  	clipBehavior: Clip.hardEdge,
  	builder: (context) => Scaffold(
  		appBar: AppBar(...),
  		body: Container(...),
  	),
  );
  Navigator.of(context).push(route);
  

일반 widget을 사용하는 경우

• Scaffold 없이 Container 같은 일반 widget을 사용할 때는 Container의 decoration에서 border를 설정할 수 있다.
• 먼저 ModalBottomSheetRoute의 backgroundColor를 Colors.transparent로 제거한다.

  showModalBottomSheet(
  	context: context,
  	backgroundColor: Colors.transparent,
  	builder: (context) => const Container(...),
  )
  

• 이후 builder에서 반환하는 Container의 decoration에서 border radius와 Clip.hardEdge를 설정한다.

  Container(
  	decoration: BoxDecoration(
  		borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
  	),
  	clipBehavior: Clip.hardEdge,
  	child: SomeWidget(),
  )
  

Scaffold를 사용하지만 radius를 widget 안에서 설정하고 싶은 경우

showModalBottomSheet(
	context: context,
	// 1. 전체 배경은 투명하게
	backgroundColor: Colors.transparent,
	// 2. Container로 border radius 설정
	builder: (context) => const Container(
		// 3. 필요하다면 content 영역 높이 고정 가능
		height: MediaQuery.sizeOf(context) * 0.8,
		decoration: BoxDecoration(
			borderRadius: BorderRadius.vertical(
				top: Radius.circular(24),
			),
		),
		clipBehavior: Clip.hardEdge,
		// 4. Scaffold의 background color와 appBar, body 적용
		child: Scaffold(
			appBar: AppBar(...),
			body: SomeWidget(...),
		),
	),
);

• Border radius와 Clip.hardEdge를 설정한 Container의 child로 Scaffold를 사용하면 비슷한 효과를 줄 수 있다.
• Scaffold를 감싸는 Container를 활용해서 modal bottom sheet를 특정 높이로 고정시키는 등 customizing에 용이하다.