[Flutter 트랙] 앱개발 종합반 2-12 - 기능성 위젯

이번 시간에는 기능성 위젯에 대해 살펴보겠습니다. 기능성 위젯은 UI의 다양한 요소에 동적인 기능을 추가하는 데 사용됩니다.

1. 텍스트(Text) 위젯

텍스트 위젯은 글씨를 표현하는 기본적인 위젯입니다.

Text(
  "Hello, Flutter!",
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    letterSpacing: 2.0,
    decoration: TextDecoration.underline,
  ),
)

➡️ 위 코드에서는 **24px 폰트 크기, 파란색, 볼드, 자간(2px), 밑줄**이 적용된 텍스트가 표시됩니다.

2. 입력 필드(TextField) 위젯

TextField 위젯은 사용자의 입력을 받을 때 사용됩니다.

TextField(
  decoration: InputDecoration(
    labelText: "이름을 입력하세요",
    border: OutlineInputBorder(),
  ),
)

➡️ 입력란이 생성되며, **이름을 입력하면 라벨이 위로 이동하는 효과**가 적용됩니다.

3. 토글 스위치(Switch) 위젯

Switch 위젯은 ON/OFF 상태를 변경할 때 사용됩니다.

bool isSwitched = false;

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

➡️ 스위치를 켜고 끄는 UI가 적용됩니다.

4. 슬라이더(Slider) 위젯

슬라이더는 사용자가 범위 값을 조정할 때 사용됩니다.

double sliderValue = 50;

Slider(
  value: sliderValue,
  min: 0,
  max: 100,
  onChanged: (value) {
    setState(() {
      sliderValue = value;
    });
  },
)

➡️ **0~100 사이의 값을 조절할 수 있는 슬라이더**가 생성됩니다.

5. 제스처 감지(GestureDetector) 위젯

GestureDetector를 사용하면 **클릭, 더블 클릭, 길게 누르기 등의 이벤트**를 감지할 수 있습니다.

GestureDetector(
  onTap: () {
    print("클릭됨!");
  },
  onDoubleTap: () {
    print("더블 클릭됨!");
  },
  child: Container(
    width: 100,
    height: 50,
    color: Colors.blue,
    child: Center(child: Text("버튼")),
  ),
)

➡️ 버튼을 **클릭하거나 더블 클릭하면 이벤트가 실행됩니다.**

6. 이미지(Image) 위젯

Image 위젯은 **네트워크 또는 로컬 이미지**를 불러오는 데 사용됩니다.

Image.network("https://example.com/sample.jpg")

➡️ **URL에서 이미지를 불러옵니다.**

Image.asset("assets/logo.png")

➡️ **로컬 프로젝트의 assets 폴더에서 이미지를 불러옵니다.**

7. 기능성 위젯 정리

• Text: 텍스트 표시
• TextField: 사용자 입력
• Switch: ON/OFF 설정
• Slider: 범위 조절
• GestureDetector: 제스처 감지
• Image: 이미지 표시

➡️ 다음 강의에서는 실제 앱 화면을 구성하는 방법을 살펴보겠습니다.