[Flutter] Modal Bottom Sheet (+ rounded corners) 사용하기

공부를 잘하는 분들은 알고계셨겠죠 공부만 하고 정리하지 않는다면 남는 게 없네요. 너무 당연한 이야기지만 저는 정리를 하지 않고 열심히 머릿속에 쌓아두었고 그 결과 똑같은 내용을 매번 검색하는 사람이 되었습니다. 물론 그 과정을 통해 익숙해지고 조금씩 성장하고 있었겠지만 이제는 똑같은 행동을 반복하지 않기위해 Widget을 정리하고자 합니다. 이 글을 통해 앱개발하면서 만난 위젯들을 정리하겠습니다. 🐾 

---

목차

1. Modal Bottom Sheet 간단한 설명

1-1. Modal Bottom Sheet 기본 화면

1-2. Modal Bottom Sheet 기본 코드 

2. Modal Bottom Sheet 꾸미기

2-1. Circular Corner 예시 화면

2-2. Circular Corner 예시 코드

3. 참고자료

---

 

1. Modal Botton Sheet

ModalBottomSheet는 사용자가 버튼을 클릭하면 뒤에 있는 내용을 가리는 하단 시트를 표시하는 데 사용합니다. 

설명을 표시하거나 유저에게 옵션을 제시할 때 이 위젯을 사용합니다. 두가지 속성(property)이 필수로 요구됩니다. 

 BuildContext : 가져올 위젯을 결정하고 위젯 트리에서 가져올 위젯의 위치를 결정하는 데 도움을 줍니다. 

WidgetBuilder : 위젯을 반환합니다.

 

1-1. 기본 예제 화면

1-2. 기본 예제 코드

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Modal Bottom Sheet Sample')),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: const Text('Test Me'),
        onPressed: () {
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      const Text('Modal BottomSheet'),
                      ElevatedButton(
                        child: const Text('Done!'),
                        onPressed: () => Navigator.pop(context),
                      )
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

---

2. Modal Bottom Sheet 꾸미기

2-1. Circular Corner 예시 화면

2-2. Circular Corner 예시 코드

이 부분을 구현하기 위해 두 군데의 코드를 변경했습니다.

먼저 MaterialApp에서 primarySatch와 canvasColor를 변경합니다. 

 MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.transparent,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Modal Bottom Sheet Sample')),
        backgroundColor: Colors.white,
        body: const MyStatelessWidget(),
      ),
    );

 

다음 showModalBottomSheet위젯의 코드를 변경합니다. 

showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        color: Colors.transparent,
        child: Container(
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(30),
              topRight: Radius.circular(30),
            ),

 

 

3. 참고자료

https://stackoverflow.com/questions/50376200/how-to-create-a-modal-bottomsheet-with-circular-corners-in-flutter

https://medium.flutterdevs.com/modal-bottom-sheet-in-flutter-dae05debbed2