Colin's Blog
[flutter] 플러터 Row 위젯을 이용한 모달 팝업창 만들기

플러터(Flutter)는 구글에서 제공하는 모바일 애플리케이션 개발 프레임워크로, 다양한 UI 작성을 위한 위젯(Widget)을 제공합니다. 이번 포스트에서는 플러터의 Row 위젯을 활용하여 모달 팝업창을 만들어보겠습니다.

1. 모달 팝업창 디자인 작성하기

먼저, 모달 팝업창의 디자인을 작성해야 합니다. 이 예시에서는 빨간색 배경과 흰색 텍스트를 가진 모달 팝업을 만들어보겠습니다.

class CustomModal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Hello, Modal!",
            style: TextStyle(color: Colors.white),
          ),
        ],
      ),
    );
  }
}

2. 모달 팝업창 호출하기

모달 팝업창은 해당 위젯을 다른 화면에 추가하여 호출할 수 있습니다. 예시로는 버튼을 클릭 시 모달 팝업창을 호출하는 기능을 구현해보겠습니다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Main Page"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text("Open Modal"),
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return CustomModal();
              },
            );
          },
        ),
      ),
    );
  }
}

3. 모달 팝업창 실행하기

마지막으로, 모달 팝업창을 실행하기 위해 메인 화면 실행 코드를 작성합니다.

void main() {
  runApp(MaterialApp(
    home: MainPage(),
  ));
}

위와 같은 코드를 실행하면 버튼을 클릭하면 모달 팝업창이 나타나게 됩니다.

이제 플러터의 Row 위젯을 이용하여 모달 팝업창을 만드는 방법을 알아보았습니다. 다양한 위젯을 조합하여 원하는 디자인의 모달 팝업창을 구성할 수 있으니, 창의성을 발휘하여 다양한 애플리케이션을 개발해보세요.

참고 자료

© 2018 Colin. All rights reserved.