Flutter 플러터 텍스트 필드 Textfield 사용법 간단 구현

코드 작성

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextField 예제',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TextFieldExample(),
    );
  }
}

class TextFieldExample extends StatefulWidget {
  @override
  _TextFieldExampleState createState() => _TextFieldExampleState();
}

class _TextFieldExampleState extends State<TextFieldExample> {
  String _enteredText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TextField 예제'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              onChanged: (value) {
                // TextField 내용이 변경될 때마다 호출되는 콜백 함수
                setState(() {
                  _enteredText = value;
                });
              },
              decoration: InputDecoration(
                labelText: '입력하세요', // 힌트 텍스트
                border: OutlineInputBorder(), // 텍스트 필드의 외곽선 스타일
              ),
            ),
            SizedBox(height: 20.0),
            Text(
              '입력된 텍스트: $_enteredText',
              style: TextStyle(fontSize: 18.0),
            ),
          ],
        ),
      ),
    );
  }
}