입력 위젯

•

TextField

•

Checbox

•

Radio

•

Switch

•

Button

◦

TextButton

◦

ElevatedButton

◦

OutlineButton

TextField

사용자로부터 텍스트를 입력받을 수 있는 위젯

문법

TextField(
  controller: TextEditingController(),  // 텍스트 필드의 값과 상호 작용하기 위한 컨트롤러 (옵션)
  decoration: InputDecoration(
    labelText: 'Enter your text',  // 텍스트 필드의 라벨 (옵션)
    hintText: 'Type something...',  // 텍스트 필드 내에 힌트를 제공 (옵션)
  ),
  onChanged: (value) {
    // 텍스트가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextField Example'),
        ),
        body: Center(
          child: TextField(
            controller: TextEditingController(),
            decoration: InputDecoration(
              labelText: 'Enter your text',
              hintText: 'Type something...',
            ),
            onChanged: (value) {
              print('Text value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Checbox

사용자가 선택 여부를 나타낼 수 있는 위젯

문법

Checkbox(
  value: true,  // 체크박스의 초기값 (true 또는 false)
  onChanged: (value) {
    // 체크박스의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Checkbox Example'),
        ),
        body: Center(
          child: Checkbox(
            value: true,
            onChanged: (value) {
              print('Checkbox value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Radio

여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 위젯

문법

Radio(
  value: 1,  // 라디오 버튼의 값
  groupValue: selectedValue,  // 그룹 내에서 현재 선택된 값
  onChanged: (value) {
    // 라디오 버튼의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  int selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Radio Example'),
        ),
        body: Center(
          child: Radio(
            value: 1,
            groupValue: selectedValue,
            onChanged: (value) {
              print('Radio value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Switch

사용자가 특정 옵션의 상태를 토글할 수 있는 스위치 위젯

문법

Switch(
  value: true,  // 스위치의 초기값 (true 또는 false)
  onChanged: (value) {
    // 스위치의 상태가 변경될 때 실행되는 콜백 함수
  },
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Switch Example'),
        ),
        body: Center(
          child: Switch(
            value: true,
            onChanged: (value) {
              print('Switch value changed: $value');
            },
          ),
        ),
      ),
    );
  }
}
Dart
복사

Button

•

TextButton

•

ElevatedButton

•

OutlineButton

TextButton

간단한 텍스트 버튼

문법

TextButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('TextButton Example'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () {
              print('TextButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사

ElevatedButton

높은 표면에서 떠오르는 효과를 가진 버튼

문법

ElevatedButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ElevatedButton Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('ElevatedButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사

OutlineButton

외곽선이 있는 버튼

문법

OutlinedButton(
  onPressed: () {
    // 버튼이 눌렸을 때 실행되는 콜백 함수
  },
  child: Text('Press me'),  // 버튼에 표시될 텍스트
)
Dart
복사

예시

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('OutlinedButton Example'),
        ),
        body: Center(
          child: OutlinedButton(
            onPressed: () {
              print('OutlinedButton pressed');
            },
            child: Text('Press me'),
          ),
        ),
      ),
    );
  }
}
Dart
복사