[flutter] RaisedButton을 사용해 대화식 선택기 표시

07 Dec 2023

flutter

안녕하세요! Flutter를 사용해 대화식 선택기를 표시하는 방법을 알려드리겠습니다.

먼저, Flutter에서 RaisedButton 위젯을 사용할 것입니다. RaisedButton은 버튼을 만들고 이를 눌렀을 때 콜백 함수를 실행해주는 역할을 합니다.

아래는 RaisedButton을 사용해 대화식 선택기를 표시하는 예제 코드입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('대화식 선택기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '선택된 값: $_selectedValue',
              style: TextStyle(fontSize: 20),
            ),
            RaisedButton(
              child: Text('선택하기'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (BuildContext context) {
                    return AlertDialog(
                      title: Text('값 선택'),
                      content: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          RaisedButton(
                            child: Text('옵션 1'),
                            onPressed: () {
                              setState(() {
                                _selectedValue = '옵션 1';
                              });
                              Navigator.of(context).pop();
                            },
                          ),
                          RaisedButton(
                            child: Text('옵션 2'),
                            onPressed: () {
                              setState(() {
                                _selectedValue = '옵션 2';
                              });
                              Navigator.of(context).pop();
                            },
                          ),
                          RaisedButton(
                            child: Text('옵션 3'),
                            onPressed: () {
                              setState(() {
                                _selectedValue = '옵션 3';
                              });
                              Navigator.of(context).pop();
                            },
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

위의 코드에서는 RaisedButton을 누르면 showDialog 함수를 사용해 AlertDialog를 표시합니다. AlertDialog 안에는 세 개의 RaisedButton이 있는데, 각각 ‘옵션 1’, ‘옵션 2’, ‘옵션 3’의 값을 선택할 수 있도록 합니다. 각 옵션을 선택하면 _selectedValue 변수의 값을 변경하고 AlertDialog를 닫도록 설정합니다.

이제 Flutter 앱에서 RaisedButton을 사용해 대화식 선택기를 표시할 수 있습니다. 선택된 값을 표시할 때는 해당 값을 화면에 출력하면 됩니다.

참고 자료: