Flutter: 기능성 위젯(Text / TextField / Switch / Slider / GestureDetector / Image)

Flutter에서는 UI를 단순히 보여주는 것뿐만 아니라,

사용자와 상호작용할 수 있는 기능성 위젯도 제공합니다.
이번 포스팅에서는 대표적인 기능성 위젯들을 정리해 보겠습니다.

 

Text / TextField / Switch / Slider / GestureDetector / Image

 

 

1. Text 위젯 (텍스트 출력 위젯)

- Text 위젯은 앱 화면에 문자열을 표시할 때 사용합니다.

   다양한 스타일과 정렬 옵션을 제공하여 텍스트의 모양과 배치를 제어할 수 있습니다.

//Text위젯 예시

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
  ),
),

📌 자주 사용되는 style 옵션
1. fontSize: 텍스트 크기 설정

2. fontWeight: 텍스트 굵기 설정

3. color: 텍스트 색상 설정

4. letterSpacing: 텍스트 문자 간격 설정

5. wordSpacing: 텍스트 단어 간격 설정

6. decoration: 텍스트 장식 추가 (밑줄, 취소선 등)

7. fontFamily: 텍스트 글꼴 설정

//Text 스타일 옵션 적용한 예제

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontStyle: FontStyle.italic,
    letterSpacing: 2.0,
    wordSpacing: 4.0,
    decoration: TextDecoration.underline,
    fontFamily: 'Roboto',
  ),
)​

 

2. TextField 위젯 (사용자 입력받기)

- TextField 위젯은 사용자가 텍스트를 입력할 수 있는 입력 상자를 생성합니다.

   ㄴ 다양한 스타일과 입력 제어 옵션을 제공하여 사용자 입력을 처리할 수 있습니다.

- 검색창, 로그인, 댓글 등 다양한 곳에 활용됩니다.

//TextField 위젯 예제

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
  ),
)

📌 자주 사용되는 TextField의 옵션
1. maxLength
- 사용자가 입력할 수 있는 최대 문자 수 설정

2. readOnly
- 텍스트 필드를 읽기 전용으로 설정 > 사용자가 텍스트를 수정할 수 없음

3. textAlign
- 텍스트의 정렬 방식 설정

4. decoration
- 텍스트 필드의 장식 설정 (레이블, 힌트 텍스트, 아이콘 등을 포함할 수 있음)

5. controller
- 텍스트 필드의 상태를 제어하는 컨트롤러 설정
   ㄴ 텍스트를 읽고 쓰거나 텍스트 필드의 상태를 관리 가능

 

3. Switch 위젯 (ON/OFF 스위치 토글)

- Switch 위젯은 사용자가 켜기/끄기 상태를 전환할 수 있는 토글 스위치를 생성합니다.

   ㄴ 주로 설정이나 옵션을 활성화/비활성화하는 데 사용됩니다.

//Switch 위젯 예제

Switch(
  value: true,
  onChanged: (bool newValue) {
    // 토글 이벤트 처리 
  },
)

 

4. Slider 위젯 (값 조절 바)

- 사용자가 지정된 범위 내에서 값을 선택할 수 있는 슬라이더를 생성합니다.

  숫자 값을 드래그해서 조절할 수 있는 위젯입니다.

   ㄴ 주로 볼륨 조절, 밝기 조절 등에 사용됩니다.

//Slider 위젯 예제

Slider(
  value: 50,
  min: 0,
  max: 100,
  onChanged: (double newValue) {
    // 슬라이더 변경값에 따른 이벤트 처리 
  },
)

 

 ㄴ min, max: 범위 설정

 

5. GestureDetector (터치 이벤트 감지)

- 다양한 제스처(탭, 스와이프, 핀치 등)를 감지하여 해당 제스처에 대한 콜백을 제공하는 위젯입니다.

  사용자의 상호작용을 처리하는 데 사용됩니다.

//GestureDetector 위젯 예제

GestureDetector(
  onTap: () {
    // 탭 이벤트 발생
  },
  child: Container(
    color: Colors.blue,
    width: 100,
    height: 100,
  ),
)

📌 자주 사용되는 TextField의 옵션
1. onTap: 사용자가 위젯을 탭할 때 호출되는 콜백 함수

2. onLongPress: 사용자가 위젯을 길게 누를 때 호출되는 콜백 함수

3. onDoubleTap: 사용자가 위젯을 더블 탭할 때 호출되는 콜백 함수

4. behavior
- GestureDetector의 동작 방식을 정의합니다.
   이 옵션을 통해 제스처 감지의 범위와 방식에 영향을 줄 수 있습니다.
   HitTestBehavior 열거형의 세 가지 값 중 하나를 선택할 수 있습니다
   ㄴ deferToChild, opaque, translucent.

 

6. Image 위젯 (이미지 표시)

- 여러 소스(네트워크, 로컬 파일 등)에서 이미지를 불러와 화면에 표시합니다.

  다양한 크기 조정 및 배치 옵션을 제공합니다.

//Image 위젯 예제

 Scaffold(
  backgroundColor: Colors.blue,
  body: Center(
    child: Image.network(
      '', // ' ' 괄호안에이미지경로입력하여호출
      width: 200,
      height: 200,
    ),
  ),
),

 

✨

1. Text: 글자 표시

2. TextField: 사용자의 텍스트 입력받기

3. Switch: ON/OFF 상태 전환

4. Slider: 드래그로 숫자 조절

5. GestureDetector: 터치 이벤트 감지 및 처리

6. Image: 이미지 보여주기 (로컬 or URL)