[flutter] BottomSheet 텍스트 입력받는 방법

14 Dec 2023

flutter

Flutter에서 BottomSheet를 사용하여 사용자로부터 텍스트를 입력받는 방법은 매우 간단합니다. BottomSheet를 열고 그 안에 TextField 위젯을 추가하여 사용자로부터 입력을 받을 수 있습니다.

단계 1: BottomSheet 열기

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                labelText: 'Enter your text'
              ),
              onChanged: (value) {
                // 입력값 처리
              },
            ),
            SizedBox(height: 20.0),
            ElevatedButton(
              onPressed: () {
                // 입력된 값 사용
              },
              child: Text('Submit'),
            ),
          ],
        ),
      );
    },
  );
}

위 코드에서 _showBottomSheet 함수는 BottomSheet를 연 후에 사용자로부터 텍스트를 입력받을 준비를 합니다. TextField 위젯을 이용하여 입력 상자를 만들고, Submit 버튼을 누르면 입력된 값을 처리할 수 있습니다.

단계 2: BottomSheet 열기

위의 코드를 호출하여 실제로 BottomSheet를 열 수 있습니다.

_showBottomSheet(context);

context는 해당 화면의 BuildContext에 해당합니다.

이렇게하면 사용자가 BottomSheet를 열고 텍스트를 입력하고 제출할 수 있게 됩니다.

마치며

Flutter를 사용하면 BottomSheet를 통해 사용자로부터 쉽게 텍스트를 입력받을 수 있습니다. 이 방법을 사용하여 사용자와 상호작용하는 앱을 더욱 풍부하게 만들 수 있습니다.