Flutter - showModalBottomSheet

화면 하단부에 임시로 잠시 뜨는 PC에서 팝업같은 처리를 하는 ModalBottomSheet를 알아 보겠습니다.

flutter 기본 앱을 수정하여 floatingActionButton을 누르면 ModalBottomSheet가 뜨도록 하겠습니다.

floatingActionButton은 화면 중앙 하단에 있는 +버튼 입니다.

이 버튼을 누르면 ModalBottomSheet가 뜨고 거기서 텍스트를 입력받으면 기본 화면의 "Sample Text"자리에 뜨도록 수정되는 간단한 구조 입니다.

일단 ModalBottomSheet에 뜰 위젯을 보겠습니다.

import 'package:flutter/material.dart';

class BottomDialog extends StatefulWidget {
  final Function _textChange;

  BottomDialog(this._textChange);

  @override
  State<BottomDialog> createState() => _BottomDialogState();
}

class _BottomDialogState extends State<BottomDialog> {
  TextEditingController textEditingController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      padding: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          TextField(
            decoration: InputDecoration(labelText: 'Input String'),
            controller: textEditingController,
          ),
          ElevatedButton(
            onPressed: () {
              widget._textChange(textEditingController.text);
              Navigator.of(context).pop();
            },
            child: Text('Confirm'),
          ),
        ],
      ),
    );
  }
}

BottomDialog 라는 위젯으로 StatefulWIdget을 사용하고 있습니다.

중간에 TextField가 있는데 TextField는 가상 키보드로부터 입력을 받는 위젯으로 StatelessWidget을 사용하게 되면 키보드 입력 받은 이후 텍스트가 업데이트 되지 않게 됩니다.

따라서 TextField를 사용 한다면 해당 부분은 StatefulWidget을 사용 해야 합니다.

final Function _textChange;

이 부분은 생성자에 할당 받아서 텍스트 입력 이후 Confirm 버튼이 눌리게 되면 상위 main.dart로 정보를 전달하는 역할을 합니다.

Flutter는 위젯 자체를 특정하는 기능이 없습니다.

따라서 TextField에 현재 어떠한 Text가 있는지를 확인하려면 위젯을 특정해서 찾아들어가는 기능이 없고 TextEditingController라는 객체를 만들어 이를 TextField에 controller로 할당하여 처리합니다.

Confirm버튼이 눌렸을 경우 호출되는 내용중 Navigator.of(context).pop()부분이 있는데 이 부분은 ModalBottomSheet를 닫아주는 역할을 하게 됩니다.

 

class _MyHomePageState extends State<MyHomePage> {

  String textSample = 'Sample Text';

  void floatingButtonHandler(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (_) {
          return BottomDialog(ChangeText);
        });
  }

  void ChangeText(String value)
  {
    setState((){
      textSample = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              textSample,
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
        onPressed: () => floatingButtonHandler(context),
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

main.dart입니다.

화면 중앙에 표시되는 Text는 textSample에 바인딩 해 둡니다.

floatingActionButgton이 눌리게 되면 floatingButtonHandler가 호출되며 이것은 context가 필요하여 바로 핸들러 연결하지 못하고 익명함수를 사용하여 context까지 같이 넘기게 됩니다.

floatingButtonHandler에서는 showModalBottomSheet를 BottomDialog로 호출해 주어 BottomDialog를 화면에 띄워주게 됩니다.

이떄 ChangeText함수를 매개변수로 전달 해 주게 되고 이것이 Confirm버튼이 호출 될 떄 눌리게 됩니다.

ChangeText에서는 입력받은 값을 textSample에 넣게 되는데 setState()를 활용하여 화면이 업데이트 되도록 해 줍니다.