[Flutter] 플러터 #14 - TextField

플러터에서 사용하는 Mercurial 스타일과 Cupertino 스타일의 입력란을 알아보겠습니다.

입력란 위젯은 사용자로부터 텍스트 값을 입력받는 데 사용됩니다.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class TextFieldWidget extends StatefulWidget {
  @override
  _TextFieldWidgetState createState() => _TextFieldWidgetState();
}

class _TextFieldWidgetState extends State<TextFieldWidget> {
  String _mercurialValue = '';
  String _cupertinoValue = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField Widget'),
      ),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(20.0),
            child: Text(
              'Mercurial Style',
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            child: TextField(
              onChanged: (value) {
                setState(() {
                  _mercurialValue = value;
                });
              },
              decoration: InputDecoration(
                labelText: 'Enter a value',
              ),
            ),
          ),
          SizedBox(height: 20.0),
          Text(
            'Entered value: $_mercurialValue',
            style: TextStyle(fontSize: 16.0),
          ),
          Padding(
            padding: EdgeInsets.all(20.0),
            child: Text(
              'Cupertino Style',
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20.0),
            child: CupertinoTextField(
              onChanged: (value) {
                setState(() {
                  _cupertinoValue = value;
                });
              },
              placeholder: 'Enter a value',
            ),
          ),
          SizedBox(height: 20.0),
          Text(
            'Entered value: $_cupertinoValue',
            style: TextStyle(fontSize: 16.0),
          ),
        ],
      ),
    );
  }
}

TextFieldWidget 클래스는 StatefulWidget을 상속하여 상태를 관리하는 위젯입니다. _TextFieldWidgetState 클래스는 State 클래스를 상속하여 TextFieldWidget의 상태를 관리합니다. _mercurialValue와 _cupertinoValue 변수는 각각 Mercurial 스타일과 Cupertino 스타일 입력란에 입력된 값을 추적합니다.

 

build 메서드에서는 Scaffold 위젯을 생성하여 앱의 기본 뼈대를 구성합니다. appBar는 상단의 앱 바를 나타내며, body는 Column을 사용하여 여러 위젯을 세로로 배치합니다.

 

Mercurial 스타일의 입력란은 TextField 위젯을 사용하여 구현합니다. onChanged 속성은 입력란의 값이 변경될 때 호출되는 콜백 함수를 정의합니다. decoration 속성은 입력란의 외관을 지정하는 데 사용됩니다.

 

Cupertino 스타일의 입력란은 CupertinoTextField 위젯을 사용하여 구현합니다. onChanged 속성과 placeholder 속성은 Mercurial 스타일의 입력란과 동일한 역할을 수행합니다.

 

이 예제 코드를 사용하면 플러터 앱에서 Mercurial 스타일과 Cupertino 스타일의 입력란을 사용할 수 있습니다. 각 입력란은 사용자가 텍스트를 입력하면 해당 값을 추적하고, 상태 관리를 통해 값을 업데이트합니다.

 

다음은 예시 코드의 실행 화면 입니다.