Flutter Widgets 사용법 (Button) 사용법

안녕하세요 무사도입니다.

 

 

오늘은 Flutter Widget 중  버튼에 대해서 알아보겠습니다.

1.Flutter 에서 주로 쓰이는 버튼은 세 종류가 존재 합니다.

    1-1. TextButton(과거의 FlatButton)

    1-2. ElevatedButton(과거에 Raised Button)

    1-3. OutlinedButton

2.참고 사이트 https://material.io/components/buttons#anatomy

 

아무런  theme 나 색을 지정하지 않을경우 메인 테마의 색을 따라 하게 됩니다. 

우선 첫번째로

 

1.  TextButton (과거에 Flat Button) 은  기본적으로 바탕에 영역에 대한 표시가 없이 버튼이 나타납니다.

기본 사용 방법은 아래와 같습니다.

1.기본 용법 
TextButton(onPressed: (버튼 응답함수), child: Text("이것은 텍스트 버튼입니다.")),

2. 아이콘 추가 
TextButton.icon(onPressed: (버튼 응답함수),
    icon: Icon(Icons.star),
    label: Text("아이콘 텍스트 버튼 입니다.")
)

위 코드를 실행 시키면 아래와 같은 텍스트 버튼이 나타납니다. 물론 텍스트만 있지만 버튼입니다. Material 디자인의 결과물입니다. 

저는 컬러를 정하지 않고 메인테마를 Blue 로 지정했기 때문에

여기에 스타일을 변경하기 위해서는 style에  StyleForm을 추가 하게 됩니다.

TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
  ),
  onPressed: () { },
  child: Text('TextButton'),
),

위 코드를 실행하면 아래와 같이 실행 됩니다.

 

2. Elevated Button(과거 Raised Button) 입니다. 가장 흔하게 볼수 있는  버튼의 형태입니다.

동작을 유도하는 가장 흔하게 사용하는 버튼입니다.

 

ElevatedButton(onPressed: (버튼 응답함수),
    child: Text("엘리베이티드 버튼")),
ElevatedButton.icon(
  icon: Icon(Icons.home),
  label: Text('ElevatedButton'),
  onPressed: (버튼 응답함수),
),

상기 코드를 실행 하면 아래와 같은 화면으로나타납니다.

물론 컬러 변환은 StyleForm 을 추가 하시면 됩니다.

 

3. Outlined Button 입니다. 팝업의 취소 처럼 동작을 유도 하지 않는 형태로 나타낸다.

OutlinedButton(onPressed: (버튼응답 함수),
    child: Text("외곽선 버튼")
),
OutlinedButton.icon(onPressed: (버튼응답 함수), icon: Icon(Icons.home), label: Text("제목")),

위 코드를 실행 하면 다음과 같이 외곽선이 있는 버튼이 나타납니다.

물론 

 

 

4. Toggle Button 입니다. 버튼을 누를때마다 상태값이 변하는 버튼으로 

     사용자가 선택한 현재 상태를 표시 해주는데 사용 합니다.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Text("WIFI"),
  ],
  onPressed: (int index) {
    setState(() {
      _selections1[index] = !_selections1[index];
    });
  },
  isSelected: _selections1,
),

토글 버튼은 버튼을 누른 상태 값을 저장 해야 하기 때문에

List<bool> _selections1 = List.generate(3, (index) => false);

클래스 밖에 리스트도 추가 해 주었습니다.

 

실행 결과는 다음과 같습니다.

 

5. 아이콘 버튼입니다. 

 - 텍스트 없이 이모티로만 표현되는 버튼이고  상태값을 저장할수도 있지만 동작을 연결 해주는 편입니다.

Text("Icon Button"),
IconButton(onPressed: (버튼 응답 함수), icon: Icon(Icons.star)),

저는 텍스트 코드로 버튼 이름을 출력 해 주었습니다.

실행결과는 다음과 같습니다.

 

일단 가볍게 버튼의 종류에 대해 알아보고 기본 사용법을 익혀 보았습니다.

 

감사합니다.