Flutter는 Google이 개발한 사용자 인터페이스(UI) 프레임워크로, 크로스 플랫폼 앱 개발을 위해 사용됩니다. Flutter를 사용하면 iOS와 Android 모두에서 동일한 앱을 만들 수 있으며, 앱 개발 시간을 단축할 수 있습니다.

이번에는 RaisedButton 위젯을 사용하여 Flutter 앱에서 알림창을 표시하는 방법을 알아보겠습니다.

RaisedButton 이란?

RaisedButton은 버튼 위젯 중 하나로, 탭하면 함수나 작업을 실행할 수 있습니다. RaisedButton에는 여러 가지 속성과 스타일을 지정할 수 있으며, 이를 사용하여 버튼을 원하는 대로 디자인할 수 있습니다.

알림창 표시하기

1. 먼저, Flutter 프로젝트를 생성하고 편집할 IDE(예: Visual Studio Code)를 열어주세요.

2. 생성된 프로젝트의 main.dart 파일을 열고, RaisedButton을 추가합니다.

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('알림창 예제'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('알림'),
                    content: Text('알림창이 열렸습니다.'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('알림창 열기'),
          ),
        ),
      ),
    );
  }
}

1. 위 코드에서 RaisedButton 위젯의 onPressed 속성에 showDialog 함수를 사용하여 알림창을 표시합니다. showDialog 함수는 context와 builder로 이루어지며, 이를 사용하여 알림창의 내용을 정의합니다.

2. builder 함수에서 AlertDialog 위젯을 리턴하고, 알림창에 표시할 내용을 설정합니다. 이 예제에서는 알림창의 제목과 내용을 간단하게 설정하였습니다.

3. actions 속성을 사용하여 알림창에 버튼을 추가할 수 있습니다. 이 예제에서는 ‘확인’ 버튼을 추가하였으며, 누를 경우 알림창이 닫힙니다.

4. 코드 편집이 완료되면, 앱을 실행하여 확인해보세요. 알림창 열기 버튼을 누르면 알림창이 표시되며, 확인 버튼을 누르면 알림창이 닫히게 됩니다.

마무리

이번에는 Flutter의 RaisedButton을 사용하여 알림창을 표시하는 방법에 대해 알아보았습니다. RaisedButton 외에도 Flutter에는 다양한 위젯과 기능이 있으므로, 참고 자료를 통해 더 많은 기능을 배울 수 있습니다.