Modal Bottom Sheet Widget In Flutter!

이번에는 pub.dev에서 제공하는 bottom sheet 위젯에 대해 살펴볼꺼다! 

 

바텀시트는 의외로 많이 사용되는데, 이걸 생으로 다 만들기엔 시간이 많이 소요된다!ㅠㅠ 그래서 간단하게 제공하는 플러그인을 사용할건데 우선 먼저 필수옵션 및 추가옵션에 대해 알아보자!

해당부분은 영어를 번역해서 작성하기에는 번역이 매끄럽지 않은 부분이 있어, 참고사이트를 그대로 가지고 왔다

Two Required Properties of the Modal Bottom Sheet :

BuildContext: The build context for a particular widget can change the location over time. Because it helps the creation method to determine which widget it is going to pull and it also helps in determining the position of the widget to be pulled in the widget tree.

WidgetBuilder: The builder widget needs to pass a widget, but only has a function that returns the widget.

Some Optional Properties of the Modal Bottom Sheet :

1. shape: Using shape properties, we can give a circular border and color of the border according to our own.
2. background: Using shape properties, we can give a circular border and color of the border according to our own.
3. elevation: The elevation property is used to raise the shadow of the bottom sheet and it is an optional property.

선택옵션을 잘 이용하면 자유자재로 사용할 수있을거같다!

하단에는 demo코드 이다

나는 함수로 만들어놓고 사용했다

showModalBottomSheet(
    context: context,
    builder: (context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: new Icon(Icons.photo),
            title: new Text('Photo'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.music_note),
            title: new Text('Music'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.videocam),
            title: new Text('Video'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: new Icon(Icons.share),
            title: new Text('Share'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      );
    });

 

*참고 사이트*

 

https://pub.dev/packages/modal_bottom_sheet

modal_bottom_sheet | Flutter Package

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

Modal Bottom Sheet In Flutter