첫 번째 텍스트 필드 만들기

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 22번째.

TextField는 글자를 입력할 수 있는 상자입니다. 미리보기에서 탭한 다음 키보드로 입력하세요.

TextField(
  decoration: InputDecoration(
    labelText: 'Name',
    border: OutlineInputBorder(),
  ),
)

decoration:은 입력 필드의 모양을 설정합니다. labelText는 입력 필드의 이름입니다. 비어 있는 상자 안에 표시되고 입력을 시작하면 테두리 위로 올라가므로 이름이 항상 표시됩니다. OutlineInputBorder()는 상자 전체에 테두리를 그립니다. 이 설정이 없으면 텍스트 아래에 선만 표시됩니다.

hintText도 있습니다. you@example.com처럼 회색으로 표시되는 예시 문구이지만, 입력을 시작하는 즉시 사라집니다. 입력 필드의 이름을 지정할 때는 레이블을 사용하고, 힌트는 보조 용도로만 사용하세요.

입력 필드는 주어진 너비만큼 늘어납니다. 여기서 Column은 Padding 안에 있어 화면 가장자리에 붙지 않도록 합니다.

챌린지

쉬움

제목 아래에 16의 SizedBox 뒤에 사방에 테두리가 있는 Email 레이블의 TextField를 추가하세요.

직접 해보기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Sign Up')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Create your account', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}