[Flutter] 텍스트 위젯, 제스처 위젯 - Button, IconButton, GestureDetector, FloatingActionButton

텍스트 위젯 (Text Widget)

 

화면에 글자를 보여주기 위해서는 글자를 렌더링 할 수 있는 위젯을 사용해야 한다. 해당 위젯은 여러가지가 있지만 대표적인 텍스트 관련 위젯은 'Text 위젯'이 있다.

 

Text 위젯

입력한 글자에 대해 스타일링 하는 위젯으로, 첫 번째 포지셔널 파라미터로 문자열을 입력 하고, style이라는 네임드 파라미터에 fontSize, fontWieght, color, fontFamiliy 등 스타일을 지정할 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child:
          Text(
            'HwanE Develop Blog',
            style: TextStyle(
              fontSize: 40.0,
              fontWeight: FontWeight.w900,
              color: Colors.amber,
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

제스처 위젯 (Gesture Widget)

 

제스처는 사용자가 키보드를 사용해 글자를 입력하는 행동 외의 모든 입력을 '제스처'라고 한다. 

 

제스처의 예로는 화면 한 번 탭하기, 두 번 탭하기, 길게 누르는 탭 등이 제스처이다. 제스처와 관련된 위젯은 하위 위젯에 특정 제스처가 발생했을 때를 인지하고 콜백 함수를 실행한다.

 

제스처 위젯으로는 Button, IconButton, GestureDetector, FloatingActionButton 위젯 등이 있다.

 

Button 위젯

플러터 머터리얼 패키지에서 기본 제공하는 버튼으로 아래의 같은 버튼이 있다.

• TextButton : 텍스트만 있는 버튼
• OutlinedButton : 테두리가 있는 버튼
• ElevatedButton : 입체적으로 튀어나온 느낌과 배경이 있는 버튼

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: (){},
                style: TextButton.styleFrom(
                  foregroundColor: Colors.red,
                ),
                child: Text('텍스트 버튼입니다'),
              ),
              OutlinedButton(
                  onPressed: () {},
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.green,
                  ),
                  child: Text('아웃라인드 버튼입니다')
              ),
              ElevatedButton(
                  onPressed: (){},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                  ),
                  child: Text('엘레베이티드 버튼입니다'))
            ],
          ),
        ),
      ),
    );
  }
}

---

 

IconButton 위젯

IconButton은 아이콘을 버튼으로 생성하는 위젯이다. 

icon: Icon( ) 매개변수에 원하는 아이콘을 넣어서 버튼으로 만들 수 있다.

onPressed: () {} 부분에 실행할 콜백 함수를 넣어 버튼을 눌렀을 때 함수를 실행시킬 수 있다.

Icons. 클래스를 통해서 플러터에서 제공하는 기본 아이콘을 사용할 수 있다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '알람시계',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.red,
                ),
              ),
              IconButton(onPressed: () {},
                icon: Icon(
                  Icons.access_alarm,
                ),
                iconSize: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

---

 

GestureDetector 위젯

GestureDetector은 이름에서 알 수 있듯이 손가락으로 하는 모든 입력을 탐지하는 역할을 한다. 위에서 다뤘던 제스쳐를 탐지하는 것이다. 

 

GestureDetector은 아래와 같은 제스쳐 매개변수를 제공하며, 해당 제스쳐가 발생했을 때 실행되는 함수를 설정할 수 있다.

제스쳐 매개변수	설명
onTap	한 번 탭 했을 때
onDoubleTap	두 번 연속으로 탭 했을 때
onLongPress	길게 눌렀을 때
onPanStart	수평 또는 수직으로 드래그가 시작되었을 때
onPanUpdate	수평 또는 수직으로 드래그 하는 동안 드래그 위치가 업데이트 될 때마다
onPanEnd	수평 또는 수직으로 드래그가 끝났을 때
onHorizontalDragStart	수평으로 드래그를 시작했을 때
onHorizontalDragUpdate	수평으로 드래그를 하는 동안 드래그 위치가 업데이트 될때마다
onHorizontalDragEnd	수평으로 드래그가 끝났을 때
onVerticalDragStart	수직으로 드래그를 시작했을 때
onVerticalDragUpdate	수직으로 드래그를 하는 동안 드래그 위치가 업데이트 될 때마다
onVerticalDragEnd	수직으로 드래그가 끝났을 때
onScaleStart	확대가 시작됐을 때
onScaleUpdate	확대가 진행되는 동안 확대가 업데이트 될 때마다
onScaleEnd	확대가 끝났을 때

 

버튼을 눌렀을 때 디버그 콘솔을 보면

해당 버튼의 클릭 제스쳐에 따라서 출력을 달리하는 것을 확인할 수 있다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () {
                  print('한번 탭 했습니다.');
                },
                onDoubleTap: () {
                  print('두번 탭 했습니다.');
                },
                onLongPress: () {
                  print('꾹 눌렀습니다.');
                },
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.amber,
                  ),
                  child: Text('버튼을 눌러보세요.'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

 

 

FloatingActionButton 위젯

FloatingActionButton 위젯은 Material Design에서 추구하는 버튼의 형태로, 동그란 위젯을 어려움 없이 디자인을 동그란 형태의 디자인 버튼을 구현할 수 있다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: (){},
          child: Icon(Icons.add),
        ),
        body: Center(
          child:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '알람시계',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w600,
                  color: Colors.blueAccent,
                ),
              ),
              IconButton(onPressed: () {},
                icon: Icon(
                  Icons.access_alarm,
                ),
                iconSize: 100,
                color: Colors.indigo,
              ),
            ],
          ),
        ),
      ),
    );
  }
}