[flutter] RaisedButton을 사용해 선택 목록 표시

07 Dec 2023

flutter

Flutter는 Google에서 개발한 UI 툴킷으로, 다양한 플랫폼에서 동일한 코드로 크로스 플랫폼 앱을 개발할 수 있습니다. RaisedButton은 Flutter에서 버튼을 생성하는 위젯 중 하나로, 선택 목록을 표시하는 데 사용될 수 있습니다.

RaisedButton 위젯 생성

RaisedButton 위젯을 생성하기 위해서는 Scaffold 위젯 안에서 사용해야 합니다. Scaffold 위젯은 앱의 기본적인 구조와 레이아웃을 표현하는 역할을 합니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RaisedButton Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('RaisedButton Example'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              // 버튼이 눌렸을 때 수행할 작업
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('선택 목록'),
                    content: Text('RaisedButton을 눌렀습니다!'),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('확인'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                },
              );
            },
            child: Text('RaisedButton'),
          ),
        ),
      ),
    );
  }
}

RaisedButton 사용 예제

위 예제 코드에서 RaisedButton을 누르면 AlertDialog가 나타나고 “확인” 버튼을 누르면 AlertDialog가 닫히는 동작을 수행합니다. 사용자 정의 작업을 정의하려면 onPressed 콜백을 수정하면 됩니다.

RaisedButton을 사용하여 선택 목록을 표시하는 예제를 만들었습니다. Flutter에서 다양한 위젯을 사용하여 UI를 개발할 수 있으며, RaisedButton은 그 중 하나입니다.