[flutter] BottomSheet와 함께 사용하는 검색창 만들기

14 Dec 2023

flutter

BottomSheet는 화면 하단에서 추가적인 내용을 표시하는 일반적인 방법입니다.

BottomSheet 표시하기

showBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 200,
      color: Colors.white,
      child: Center(
        child: Text('BottomSheet 내용'),
      ),
    );
  },
);

BottomSheet를 표시하기 위해 showBottomSheet를 사용합니다. context와 builder 파라미터를 전달하고 BottomSheet 내용을 만듭니다.

BottomSheet와 함께 검색창 만들기

BottomSheet에 검색창까지 추가하려면 showBottomSheet 메서드 안에서 입력창을 포함하는 위젯을 반환하면 됩니다.

showBottomSheet(
  context: context,
  builder: (context) {
    return Container(
      height: 300,
      color: Colors.white,
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            decoration: InputDecoration(
              hintText: '검색어를 입력하세요',
              border: OutlineInputBorder(),
            ),
          ),
          // 다른 내용들 추가 가능
        ],
      ),
    );
  },
);

이제 BottomSheet 내에 검색창이 표시됩니다.

결론

BottomSheet와 검색창을 함께 사용하는 방법을 간단히 알아보았습니다. 이를 통해 사용자 경험을 향상시키면서 쉽게 접근할 수 있는 추가 기능을 제공할 수 있습니다.

Flutter 공식 문서에서 더 많은 정보를 찾아보세요.