[flutter] FlatButton을 사용하여 팝업 창을 만드는 방법은?

26 Dec 2023

flutter

먼저, 팝업 창이 표시될 때 실행될 콜백 함수를 작성해야 합니다. 그런 다음, FlatButton을 누를 때 팝업 창을 표시할 수 있는 showDialog 함수를 사용하여 팝업을 만들 수 있습니다.

아래는 간단한 예제 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Popup Example'),
        ),
        body: Center(
          child: FlatButton(
            child: Text('Show Popup'),
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('Popup Title'),
                    content: Text('This is a popup message.'),
                    actions: [
                      FlatButton(
                        child: Text('Close'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

위의 예제에서는 FlatButton을 생성하고 onPressed 콜백에 showDialog 함수를 사용하여 팝업을 만들었습니다. showDialog 함수의 builder 속성을 사용하여 AlertDialog를 만들고 제목, 내용 및 닫기 버튼을 추가했습니다.

이렇게 하면 FlatButton을 누를 때 팝업 창이 표시됩니다.