UI Development Exam - InkWell, onTab Event

Flutter에서 사용되는 기본 버튼이었던 FlatButton, RaisedButton, OutlineButton 위젯은 TextButton, ElevatedButton, OutlinedButtond으로 바뀌었습니다. 각 버튼의 테마 속성 또한 TextButtonTheme, ElevatedButtonTheme, OutlinedButtonTheme로 바뀌었네요. 기존의 버튼 클래스는 사용이 불가능합니다.

 

 

해당 버튼들만 사용해도 개발하는 데에는 큰 문제가 없습니다만, 외부에서 제작한 이미지 파일을 버튼 이미지로 사용하기 위해서는 InkWell 위젯을 사용합니다. 컨테이너 위젯은 클릭 등의 사용자 이벤트를 감지하는 것이 불가능하기 때문에 컨테이너 위젯을 InkWell 위젯으로 감싸 사용자 이벤트에 반응하도록 프로그래밍합니다.

 

InkWell

 

InkWell 위젯의 사용 코드는 단순하기 때문에 프로그래밍 코드만 봐도 쉽게 이해할 수 있습니다.

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:my_profile/buttons/button_form.dart';

class MyButtonsForm extends StatefulWidget {

  @override
  _MyButtonsFormState createState() => _MyButtonsFormState();
}

class _MyButtonsFormState extends State<MyButtonsForm> {
  void onMyInkWellTab(String param) {
    print(param);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.all(20),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            flex: 7,
            child: InkWell(
              child: MyButtonForm("Follow", Colors.blueAccent, Colors.white),
              onTap: () => onMyInkWellTab("Follow Clicked"),
            )
          ),
          Expanded(
            flex: 1,
            child: SizedBox(),
          ),
          Expanded(
            flex: 7,
            child: InkWell(
              child: MyButtonForm("Message", Colors.white, Colors.blueAccent),
              onTap: () {
                onMyInkWellTab("Message Clicked");
              }
            )
          )
        ]
      )
    );
  }
}

import 'package:flutter/material.dart';

class MyButtonForm extends StatefulWidget {
  String _label;
  Color _buttonColor;
  Color _textColor;
  MyButtonForm(this._label, this._buttonColor, this._textColor);

  @override
  _MyButtonFormState createState() => _MyButtonFormState();
}

class _MyButtonFormState extends State<MyButtonForm> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 180,
      height: 35,
      alignment: Alignment.center,
      padding: EdgeInsets.all(5),
      decoration: BoxDecoration(
        color: widget._buttonColor,
        borderRadius: BorderRadius.circular(50),
        border: Border.all(color: Colors.black12, width: 1, style: BorderStyle.solid)
      ),
      child: Text(widget._label, style: TextStyle(color: widget._textColor),),
    );
  }
}

 

InkWell 위젯의 클릭 이벤트는 onTab 속성으로 설정합니다. 이 때 매개변수를 전달하여 Dart 코드에서 활용하기 위해서는 다음과 같이 프로그래밍해야 합니다.

 

onTap: () { // 매개변수 전달방법 1
  onMyInkWellTab("Message Clicked");
}

onTap: () => onMyInkWellTab("Follow Clicked") // 매개변수 전달방법 2

 

 

프로그래밍 결과는 다음과 같습니다.