Flutter - RaisedButton 위젯

플러터의 가장 기본적인 버튼입니다.

RaisedButton 뿐만 아니라 FlatButton, DropdownButton, FloatingActionButton 등의 다양한 위젯들이 있습니다.

 

 

RaisedButton의 생성자는 아래와 같습니다.

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double focusElevation,
    double hoverElevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

 

onPressed 속성은 반드시 있어야 하며, 버튼 이벤트를 처리하기 위한 콜백 함수가 없다면 null을 넣으면 됩니다.

버튼에 들어가는 내용은 child 속성에 넣으면 됩니다.

 

 

 

아래는 RaisedButton의 예제입니다.

 

import 'package:flutter/material.dart';

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

class ButtonExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => ButtonExampleState();
}

class ButtonExampleState extends State<ButtonExample> {

  static const String _title = "Button";
  String _buttonState = 'OFF';

  void onClick() {
    print('onClick');
    setState(() {
      if (_buttonState == 'OFF') _buttonState = "ON";
      else _buttonState = 'OFF';
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('네모 버튼'),
              onPressed: onClick,
            ),
            Text('$_buttonState'),
            RaisedButton(
              child: Text('둥근 버튼'),
              onPressed: onClick,
              shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0)
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

• ButtonExample 클래스는 화면을 갱신하기 위해서 StatelessWidget이 아닌 StatefulWidget을 사용합니다.
• RaisedButton의 콜백으로는 onClick 함수를 지정했습니다.
• 리액트 뷰를 통해 Text('$_buttonState')에 새로운 값을 가져오기 위해 참조를 얻어왔습니다.

 

버튼 사이에 있는 Text 위젯의 동작 순서입니다.

1. 변수 _buttonState의 초깃값을 'OFF'로 지정했습니다.
2. 네모 버튼과 둥근 버튼을 누르면 onPressed를 통해 onClick함수를 실행합니다.
3. onClick함수 안에 있는 setState 함수를 통해 _buttonState값을 갱신합니다.
4. Text 위젯의 값이 변경됩니다.

 

 

 

위젯에 연결된 변수의 값이 변경될 때 UI도 같이 변경되는 것을 리액티브 프로그래밍이라고 합니다.

플러터에서는 기본적으로 리액티브 프로그래밍을 지원합니다. 따라서 간단하고 깔끔하게 코드를 짤 수 있습니다.