[flutter] RaisedButton을 사용해 종료 버튼 만들기

07 Dec 2023

flutter

안녕하세요! Flutter로 앱을 개발하고 계신다면, RaisedButton을 사용하여 종료 버튼을 만드는 방법에 대해 알려드리겠습니다.

RaisedButton은 터치 이벤트를 감지하여 버튼을 누를 수 있도록 해주는 위젯입니다. 이를 활용하여 사용자가 앱을 종료할 수 있는 버튼을 만들어보겠습니다.

1. RaisedButton 위젯 추가하기

먼저, RaisedButton 위젯을 앱의 위젯 트리에 추가해야 합니다. RaisedButton 위젯은 material 패키지에 포함되어 있기 때문에, import 문을 통해 해당 패키지를 가져올 필요가 있습니다.

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter App'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // 종료 버튼을 눌렀을 때의 동작 정의
          },
          child: Text('종료'),
        ),
      ),
    );
  }
}

2. onPressed 콜백 함수 구현하기

RaisedButton의 onPressed 속성에는 버튼을 눌렀을 때 실행되는 콜백 함수를 지정할 수 있습니다. 이 콜백 함수에는 종료 버튼을 눌렀을 때의 동작을 정의해야 합니다.

RaisedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('앱 종료'),
          content: Text('정말로 앱을 종료하시겠습니까?'),
          actions: [
            FlatButton(
              child: Text('아니오'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text('예'),
              onPressed: () {
                Navigator.of(context).pop();
                // 앱 종료 코드 작성
              },
            ),
          ],
        );
      },
    );
  },
  child: Text('종료'),
),

3. AlertDialog로 확인 메시지 표시하기

AlertDialog는 사용자에게 확인 메시지를 표시할 수 있는 팝업 창입니다. 앱 종료 전에 사용자로부터 확인을 받기 위해 AlertDialog를 사용하겠습니다.

위 코드에서 onPressed 콜백 함수 안에 AlertDialog를 생성하고 이를 showDialog 함수로 표시합니다. AlertDialog에는 앱 종료 여부를 묻는 메시지와 예/아니오 버튼이 포함되어 있습니다. 예 버튼을 누르면 앱이 종료되도록 코드를 작성해야 합니다.

FlatButton(
  child: Text('예'),
  onPressed: () {
    Navigator.of(context).pop();
    // 앱 종료 코드 작성
    SystemNavigator.pop();
  },
),

앱 종료 코드 작성 부분에는 SystemNavigator.pop()을 사용하여 앱을 종료하는 코드를 작성합니다.

이제 위 코드를 통해 RaisedButton을 사용하여 종료 버튼을 만들 수 있습니다.

프로젝트 코드에 적용해서 확인해보세요. 잘 작동할 것입니다.