15. 플러터 : 버튼 종류

플러터에서 제공하는 수많은 종류의 버튼 중에서
많이 사용하는 버튼 일부를 이번에 보자.

해당 버튼 클래스의 이름을 제목으로 표시했다.
가장 많이 사용하는 RaisedButton, 버튼 눌림 기능이 없는 FlatButton,
상단 제목의 왼쪽이나 오른쪽에 주로 들어가는 IconButton(프린터),
안드로이드에서 주로 사용하는 공중에 떠있는 듯한 FloatingActionButton,
버튼은 아니지만 버튼처럼 사용할 수 있는 InkWell,
마지막으로 사진으로 만든 버튼까지.

버튼을 누르면  눌린 버튼의 클래스 이름을 하단에 스낵바 형태로 출력한다.
스낵바는 컨텍스트가 있어야 하고
StatelessWidget 클래스를 상속 받았기 때문에 별도로 저장을 하고 있다.

import 'package:flutter/material.dart';

void main() {
    runApp(MaterialApp(
        title: '버튼 종류',
        home: Scaffold(
            appBar: AppBar(title: Text('버튼 종류'),),
            body: MyApp(),
        ),
    ));
}

class MyApp extends StatelessWidget {
    BuildContext ctx;
    
    @override
    Widget build(BuildContext context) {
        ctx = context;
        return Center(
            child: Column(
                children: <Widget>[
                    RaisedButton(
                        child: Text('RaisedButton', style: TextStyle(fontSize: 24)),
                        onPressed: () => showMessage('RaisedButton'),
                    ),
                    FlatButton(
                        child: Text('FlatButton', style: TextStyle(fontSize: 24)),
                        onPressed: () => showMessage('FlatButton'),
                        color: Colors.green,
                        textColor: Colors.white,
                    ),
                    IconButton(
                        icon: Icon(Icons.print),
                        onPressed: () => showMessage('IconButton'),
                    ),
                    FloatingActionButton(
                        child: Icon(Icons.add),
                        onPressed: () => showMessage('FloatingActionButton'),
                    ),
                    InkWell(
                        child: Text('InkWell', style: TextStyle(fontSize: 24)),
                        onTap: () => showMessage('InkWell'),
                    ),
                    InkWell(
                        child: Image.asset('images/family_1.jpg', width: 120, height: 120),
                        onTap: () => showMessage('ImageButton'),
                    ),
                ],
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            ),
        );
    }
    
    void showMessage(String msg) {
        final snackbar = SnackBar(content: Text(msg));

        Scaffold.of(ctx)
            ..removeCurrentSnackBar()
            ..showSnackBar(snackbar);
    }
}

코드에서 그렇게 눈여겨볼 것은 없어 보인다.
가능하면 같은 형태로 만들기 위해 child와 onPressed 매개변수만 처리했다.

FlatButton 위젯은 Text 위젯을 통해서 출력이 표현되는 것이 아니라
color와 textColor 매개변수가 별도로 존재하기 때문에 따로 색상을 주어서 처리했다.

InkWell 위젯은 사용자 입력을 받을 수 있는 사각형의 단순 영역으로
실제 버튼처럼 동작하지는 않기 때문에 onTap 매개변수가 존재한다.
1회 탭이 아니라 더블탭부터 여러 가지 제스처를 제공하기 때문에 활용범위가 매우 넓은 위젯이다.

사진 버튼은 정해진 클래스가 없다.
이번 코드에서는 InkWell 위젯을 사용해서 구현했는데
child 매개변수로 Image 위젯만 전달하면 어떤 버튼이든 사진을 표시할 수 있다.
다만 해당 버튼이 갖고 있는 특징 때문에 눌렀을 때의 효과같은 것들은 적절한지 직접 확인해야 한다.