[Flutter] Basic Widget 기본 개념 (텍스트와 제스처)

위젯 실습 템플릿

// 위젯 실습용 파일
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: // 여기에 실습 코드 작성
        ),
      ),
    );
  }
}

---

1. 텍스트 관련 위젯

`Text`위젯은 글자를 적고 스타일링하는 위젯임. 첫 번째 포지셔널 파라미터에 원하는 문자열을 작성하고 `style`이라는 네임드 파라미터를 사용해 스타일을 지정함

Text(
"Lee Doseo",
  style: TextStyle(
  fontSize: 16.bitLength0fontWeight: FontWeight.w700,
  color: Colors.blue,
  ),
)

텍스트 관련 위젯

---

2. 제스처 관련 위젯

사용자가 키보드로 입력하는 행위 외의 모든 입력을 플러터에서는 제스처라고 부름.

`GestureDetector`위젯은 모든 제스처를 파라미터로 제공해줌. 제스처 관련 위젯은 하위 위젯에 탭이나 드래그처럼 특정 제스처가 입력됐을 때 인지하고 콜백 함수를 실행함. `Button`, `IconButton`, `GestureDetector`, `FloatingActionButton` 등이 있음

---

2-1. `Button`위젯

`package:flutter/material.dart`에서 기본으로 제공하는 버튼으로 `TextButton`, `OutlinedButton`, `ElevatedButton`이 있음

이 모든 버튼을 누르면 색이 변경되는 리플 효과를 지원함

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

TextButton(
 onPressed: () {},
  style: TextButton.styleFrom(
   foregroundColor: Colors.red,
  ),
  child: Text("텍스트 버튼")
)

TextButton

---

OutlinedButton(
 onPressed: () {},
  style: OutlinedButton.styleFrom(
   foregroundColor: Colors.red,
  ),
  child: Text("아웃라인드 버튼")
)

아웃라인드 버튼

---

ElevatedButton(
 onpressed: () {},
  style: ElevatedButton.styleFrom(
   backgroundColor: Colors.red,
  ),
  child: Text("엘레베이티드 버튼"),
)

---

2-2. `IconButton`위젯

`IconButton`은 아이콘을 버튼으로 생성하는 위젯임. `icon`파라미터에 보여주고 싶은 아이콘을 넣을 수 있음!

`onPressed`파라미터에 `IconButton`을 누르면 실행할 콜백 함수를 제공할 수 있음

아이콘은 글리프 기반의 아이콘을 사용할 수 있으며 `Icons`클래스를 통해 플러터에서 제공하는 기본 아이콘들을 사용할 수 있음.

IconButton(
 onPressed: () {},
 icon: Icon(
  Icons.home,
 ),
)

IconButton 위젯

---

2-3. `GestureDetector` 위젯

손가락으로 하는 여러가지 입력을 인지하는 위젯

GestureDetector(
 onTap: (){
  print("on tap");
 },
 onDoubleTap: (){
  print("on double tap");
 },
 onLongPress: (){
  print("on long press");
 },
 child: Container(
  decoration: BoxDecoration(
    color: Colors.red,
  ),
  width: 100.0,
  height: 100.0,
 ),
)

GestureDetector 위젯

원탭, 더블탭, 프레스 상태 표시

 

아래 표는 `GestureDetector`가 제공하는 제스처들임.

매개변수	설명	매개변수 타입
`onTap`	위젯을 탭했을 때 호출	`void Function()`
`onTapDown`	탭이 시작될 때 호출 (터치가 시작된 순간)	`void Function(TapDownDetails)`
`onTapUp`	탭이 끝났을 때 호출 (터치가 떨어진 순간)	`void Function(TapUpDetails)`
`onTapCancel`	탭이 취소되었을 때 호출	`void Function()`
`onDoubleTap`	두 번 연속 탭했을 때 호출	`void Function()`
`onLongPress`	길게 눌렀을 때 호출	`void Function()`
`onLongPressStart`	길게 누르기 시작 시 호출	`void Function(LongPressStartDetails)`
`onLongPressEnd`	길게 누른 후 손을 뗐을 때 호출	`void Function(LongPressEndDetails)`
`onLongPressMoveUpdate`	길게 누른 상태에서 손가락을 움직일 때 호출	`void Function(LongPressMoveUpdateDetails)`
`onVerticalDragStart`	수직 드래그 시작 시 호출	`void Function(DragStartDetails)`
`onVerticalDragUpdate`	수직 드래그 중 움직일 때 호출	`void Function(DragUpdateDetails)`
`onVerticalDragEnd`	수직 드래그 끝났을 때 호출	`void Function(DragEndDetails)`
`onHorizontalDragStart`	수평 드래그 시작 시 호출	`void Function(DragStartDetails)`
`onHorizontalDragUpdate`	수평 드래그 중 움직일 때 호출	`void Function(DragUpdateDetails)`
`onHorizontalDragEnd`	수평 드래그 끝났을 때 호출	`void Function(DragEndDetails)`
`onPanStart`	터치 후 어느 방향으로든 드래그 시작 시 호출	`void Function(DragStartDetails)`
`onPanUpdate`	드래그 중 손가락이 움직일 때 호출	`void Function(DragUpdateDetails)`
`onPanEnd`	드래그 끝났을 때 호출	`void Function(DragEndDetails)`
`onScaleStart`	핀치 제스처 시작 시 호출 (확대/축소)	`void Function(ScaleStartDetails)`
`onScaleUpdate`	핀치 중 손가락이 움직일 때 호출	`void Function(ScaleUpdateDetails)`
`onScaleEnd`	핀치 제스처 종료 시 호출	`void Function(ScaleEndDetails)`

---

2-4. `FloatingActionButton`위젯

`FloatingActionButton`은 `Material Design`에서 추구하는 버튼 형태임. `FloatingActionButton`과 `Scoffold`를 같이 사용하면 특별한 어려움 없이 특이한 형태의 디자인을 구현할 수 있음

import "package:flutter/material.dart";

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

class FloatingActionButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Text("클릭"),
        ),
        body: Container(),
      ),
    );
  }
}

이 코드만 예시가 조금 다르기 떄문에 전체 코드를 공유하겠음.

---

일단 여기까지가 텍스트와 제스처 관련 위젯임 아직까지 어려운건 없으나 어디에 무엇을 넣어야할지가 고민되는정도같음.

다음엔 디자인과 배치를 공부해보겠음.

 

 

https://github.com/Leedoseo/Flutter_WidgetStudy

GitHub - Leedoseo/Flutter_WidgetStudy

 

 

출처 : 코드 팩토리의 플러터 프로그래밍