[ Flutter ] 버튼

ElevatedButton

ElevatedButton(
  child: Text('Button'),
  color: Colors.orange,  // 색상
  onPressed: () {        // 클릭시 실행할 코드
  },
),

 

TextButton

TextButton(
  child: Text('Button'),
  onPressed: () { },
),

 

OutlinedButton

OutlinedButton(
  onPressed: () {}
  child: Text("Button"),
),

 

IconButton

IconButton(
  icon: Icon(Icons.add),
  color: Colors.red,  // 아이콘 색상
  iconSize: 100.0,    // 아이콘 크기 기본값 24.0
  onPressed: () { },  // 클릭시 실행할 코드
),

◻️  다른 위젯과 다르게 자식 위젯을 포함할 수 없기 때문에 child 프로퍼티가 없다.

 

FloatingActionButton

FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () { },
),

◽  Scaffold의 floatingActionButton 프로퍼티에 바로 사용할 수도 있고, 일반적인 버튼처럼 단독 사용할 수도 있다.

 

GestureDetector와 InkWell

GestureDetector(
  onTap: () {
    // 클릭 시 실행
  },
  child: [위젯],
),

InkWell(
  onTap: () {
    // 클릭 시 실행
  },
  child: [위젯],
),

💬  글자나 그림 같이 이벤트 프로퍼티가 없는 위젯에 터치 이벤트를 적용하고 싶을 때 사용하는 위젯

💬  InkWell 위젯으로 감싸고 클릭하면 물결 효과가 나타나지만 GestureDetector 위젯은 나타나지 않는다.

 

CheckBox와 Switch

var isChecked = false;

Checkbox(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    }
  },
),

Switch(
  value: isChecked,
  onChanged: (value) {
    setState(() {
      isChecked = value;
    }
  },
),

💬  상태를 나타낼 불리언 타입의 변수가 필요하고, value 프로퍼티에 설정한다.

💬  onChanged 이벤트는 체크값이 변할 때마다 발생하는데 여기서 변경된 값이 불리언 value 인수로 넘어오며 setState() 함수를 통해 value 프로퍼티에 지정한 변숫값을 변경하며 UI를 다시 그린다.

 

Radio와 RadioListTile

enum Gender { MAN, WOMEN }

// In State Class Field
Gender _gender = Gender.MAN;

// In State Class Build Function
ListTile(
  title: const Text('남자'),
  leading: Radio(
    value: Gender.MAN,
    groupValue: _gender,
    onChanged: (value) {
      setState(() {
        _gender = value as Gender;
      });
    },
  ),
),
ListTile(
  title: const Text('여자'),
  leading: Radio(
    value: Gender.WOMEN,
    groupValue: _gender,
    onChanged: (value) {
      setState(() {
        _gender = value as Gender;
      });
    },
  ),
),

enum Gender { MAN, WOMEN }

// In State Class Field
Gender _gender = Gender.MAN;

// In State Class Build Function
RadioListTile(
  title: const Text('남자'),
  value: Gender.MAN,
  groupValue: _gender,
  onChanged: (value) {
    setState(() {
      _gender = value as Gender;
    });
  },
),
RadioListTile(
  title: const Text('여자'),
  value: Gender.WOMEN,
  groupValue: _gender,
  onChanged: (value) {
    setState(() {
      _gender = value as Gender;
    });
  },
),

💬  그룹 내에서 하나만 선택할 때 사용하는 위젯이다.

💬  그룹이 되는 항목을 열거형으로 정의하고, groupValue 프로퍼티에 열거형으로 정의한 Gender 타입의 변수를 지정하고, onChanged 이벤트에서 변경된 값을 반영한다.

💬  ListTile 대신 RadioListTile을 사용하면 가로 전체가 터치 영역이 된다.

 

DropDownButton

// In State Class Field
final _valueList = ['첫 번째', '두 번째', '세 번째'];
var _selectedValue = '첫 번째';

// In State Class Build Function
DropdownButton(
  value: _selectedValue;
  items: _valueList.map(
    (value) {
      return DropdownMenuItem(
        value: value,
        child: Text(value),
      );
    },
  ).toList(),
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
),

💬  value 프로퍼티에 표시할 값을 지정하고, items 프로퍼티에는 표시할 항목을 DropdownMenuItem 클래스의 인스턴스들을 담은 리스트로 지정해야 한다.

 

Chip

Chip(
  avatar: CircleAvatar(
    child: Text(emails[index].substring(0, 1)),
  ),
  label: Text(emails[index]),
  onDeleted: () {
    setState(() {
      emails.removeAt(index);
    });
  },
),

💬  태그나 선택목록 UI를 만들 수 있다.

💬  다양한 종류의 Chip 위젯

    ◽  ChoiceChip : 하나를 선택할 수 있는 칩

    ◽  FilterChip : 여러 개를 선택할 수 있는 칩

    ◽  ActionChip : 버튼 형식의 칩

    ◽  InputChip : 보다 복합적인 칩