Handling user input

김석윤·2025년 2월 9일

CheckboxListTile DatePickerDialog Dismissible SegmentedButton SwitchListTile TextField TimerPickerDialog buttons checkbox chip dropdownmenu form radio slider switch text

Flutter 공식문서

목록 보기

5/10

공식문서

Introduction to handling user input

About design system support
플러터 SDK에는 미리 만들어진 디자인 관련 컴포넌트가 존재한다. Material과 Cupertino다.
플러터 커뮤니티인 pub.dev에서 더 많은 디자인 패키지를 제공한다.
(ex. Fluent UI, macOS UI 등)

Buttons

int count = 0;

@override
Widget build(BuildContext context) {
  return ElevatedButton(
    style: ElevatedButton.styleFrom(
      textStyle: const TextStyle(fontSize: 20),
    ),
    onPressed: () {
      setState(() {
        count += 1;
      });
    },
    child: const Text('Enabled'),
  );
}

많이 쓰이는 버튼 위젯은 아래와 같다.

ElevatedButton
FilledButton
OutlinedButton
TextButton
IconButton
FloatingActionButton

style, callback, child가 가장 많이 쓰이는 속성들이다.

Text

@override
Widget build(BuildContext context) {
  return const SelectableText('''
Two households, both alike in dignity,
In fair Verona, where we lay our scene,
From ancient grudge break to new mutiny,
Where civil blood makes civil hands unclean.
From forth the fatal loins of these two foes''');
}

@override
Widget build(BuildContext context) {
  return RichText(
    text: TextSpan(
      text: 'Hello ',
      style: DefaultTextStyle.of(context).style,
      children: const <TextSpan>[
        TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
        TextSpan(text: ' world!'),
      ],
    ),
  );
}

Text는 문구 highlight를 할 수 없다. 하고 싶으면 SelectableText를 사용하면 된다.
하나의 문장에서 특정 부분에만 style을 주고 싶으면 RichText를 사용하면 된다.

TextField

final TextEditingController _controller = TextEditingController();

@override
Widget build(BuildContext context) {
  return TextField(
    controller: _controller,
    decoration: const InputDecoration(
      border: OutlineInputBorder(),
      labelText: 'Mascot Name',
    ),
  );
}

InputDecoration, controller, onChanged, onSubmitted가 가장 많이 쓰이는 속성이다.
obscureText로 텍스트를 안 보이게 처리할 수도 있고, readOnly로 읽기만 가능하도록 만들 수도 있다.

Form

final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        TextFormField(
          decoration: const InputDecoration(
            hintText: 'Enter your email',
          ),
          validator: (String? value) {
            if (value == null || value.isEmpty) {
              return 'Please enter some text';
            }
            return null;
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 16.0),
          child: ElevatedButton(
            onPressed: () {
              // Validate returns true if the form is valid, or false otherwise.
              if (_formKey.currentState!.validate()) {
                // Process data.
              }
            },
            child: const Text('Submit'),
          ),
        ),
      ],
    ),
  );
}