[flutter] BottomSheet 헤더 추가하는 방법

14 Dec 2023

flutter

Flutter에서 BottomSheet는 화면 아래에 나타나는 모달시트를 만들어줍니다. BottomSheet에 헤더를 추가하면 사용자가 BottomSheet의 콘텐츠를 더 잘 이해하고 상황을 파악하기 쉬워집니다.

BottomSheet 위젯 작성

먼저, BottomSheet 위젯을 작성하고 그 안에 헤더를 추가해보겠습니다.

showBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () {
              // Add your custom logic here
              Navigator.pop(context);
            },
          ),
          // Add more list tiles or other content here
        ],
      ),
    );
  },
);

위의 예시에서 showBottomSheet 메서드를 사용하여 BottomSheet를 보여주는데, 여기서 builder 함수에서 Container 위젯 안에 Column을 통해 BottomSheet의 콘텐츠를 정의합니다.

헤더 추가하기

이제 BottomSheet의 헤더를 추가해보겠습니다. BottomSheet의 시작 부분에 헤더를 위한 Container를 추가하고 그 안에 Text 위젯을 넣어주면 됩니다.

showBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text('BottomSheet Header', style: TextStyle(fontWeight: FontWeight.bold)),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () {
              // Add your custom logic here
              Navigator.pop(context);
            },
          ),
          // Add more list tiles or other content here
        ],
      ),
    );
  },
);

위의 예시에서 Container 위젯을 사용하여 BottomSheet의 헤더를 정의합니다. 이 헤더 위에 Text 위젯을 추가하고 해당 텍스트에 원하는 내용과 스타일을 적용할 수 있습니다.

이제 BottomSheet에 헤더를 성공적으로 추가했습니다!

마무리

Flutter에서 BottomSheet에 헤더를 추가하는 방법을 알아보았습니다. 헤더를 통해 BottomSheet의 내용과 목적을 더 명확하게 표현할 수 있습니다. 원하는 스타일 및 콘텐츠로 헤더를 꾸밀 수 있다는 점을 기억해두세요.

참고 링크:

감사합니다!