Flutter - AlertDialog(플러터 다이얼로그)

안녕하세요. 오늘부터

는 현재 공부중인 Flutter에 대해 포스팅을 해보도록 하겠습니다. 

원래 Native로 iOS, Android를 개발하여 App을 출시 했지만,

아무래도 1인 App 개발이다 보니 Native로 동시에 두개를 개발하기에는 조금 벅찬 감이 있더라구요. 

 

오늘 소개해 드릴 내용은 Flutter의 AlertDialog 입니다. 

일단 새로운 프로젝트를 생성해 주세요. 

 

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Dialog Sample',
      theme: new ThemeData(
        primarySwatch: Colors.red,
      ),
      home: new MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dialog'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          ],
        ),
      ),
    );
  }

새로운 프로젝트를 생성 후 필요 없는 주석이나 다른 코드들을 다 지운 상태입니다.

자 이상태에서 다이얼로그를 띄우기 위해선 

다이얼로그를 화면에 표시하기 위한 버튼 동작이 필요하겠죠?

 

버튼을 만들어 봅시다. 

 

children: <Widget>[
  RaisedButton(
    child: Text(
      'Dialog Open',
      style: TextStyle(
        fontSize: 20,
        color: Colors.blue,
        ),
      ),
      onPressed: () => FlutterDialog(),
  )
],

Flutter Button 종류도 굉장히 다양하지만, 오늘은 RaisedButotn 으로 구현해보도록 하겠습니다.

(Button종류는 나중에 따로 포스팅 하겠습니다.)

onPressed 이쪽 부분이 버튼을 눌렀을 때 동작하는 부분입니다. 

 

이런식으로 Dialog를 띄워주는 method하나를 구현해줍니다. 

 

  void FlutterDialog() {
    showDialog(
        context: context,
        //barrierDismissible - Dialog를 제외한 다른 화면 터치 x
        barrierDismissible: false,
        builder: (BuildContext context) {
          return AlertDialog(
            // RoundedRectangleBorder - Dialog 화면 모서리 둥글게 조절
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0)),
            //Dialog Main Title
            title: Column(
              children: <Widget>[
                new Text("Dialog Title"),
              ],
            ),
            //
            content: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  "Dialog Content",
                ),
              ],
            ),
            actions: <Widget>[
              new FlatButton(
                child: new Text("확인"),
                onPressed: () {
                  Navigator.pop(context);
                },
              ),
            ],
          );
        });
  }

간단하게 주석에 설명도 작성하였습니다. 

하단 actions 쪽에 보시면 Navigator.pop(context) 이쪽 부분이 이제 열려있는 Dialog를 닫는 부분입니다.

 

그렇게 시뮬을 실행하게 되면 하단과 같은 화면이 나오고 

 

Dialog Open 버튼을 클릭시 

저희가 작성했던 Dialog가 나오게 됩니다. 또한 barrierDismissible 때문에 Dialog 밖의 화면은 터치가 작동을 안하구요 

확인 버튼을 누르게 되면 Dialog가 사라지게 됩니다. 

 

또 다른 추가적인 기능도 차차 포스팅 하도록 하겠습니다. 

감사합니다. 

 

github : https://github.com/wp01053/Flutter_Dialog