Trường văn bản đầu tiên

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 22 trên 34.

TextField là một ô để mọi người nhập văn bản. Nhấn vào ô trong phần xem trước rồi nhập bằng bàn phím.

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

decoration: thiết lập giao diện của trường nhập liệu. labelText đặt tên cho trường: nhãn nằm bên trong ô trống và di chuyển lên viền khi bạn bắt đầu nhập, nhờ vậy tên luôn hiển thị. OutlineInputBorder() vẽ viền bao quanh ô; nếu không có, chỉ có một đường bên dưới văn bản.

Còn có hintText, một ví dụ màu xám như you@example.com, nhưng ví dụ này biến mất ngay khi bạn nhập. Dùng nhãn để đặt tên cho trường nhập liệu, và chỉ dùng gợi ý như phần bổ sung.

Trường nhập liệu kéo dài theo chiều rộng được cấp. Ở đây, Column nằm bên trong Padding, giúp nó cách xa các cạnh màn hình.

Thử thách

Dễ

Bên dưới tiêu đề, sau một SizedBox có kích thước 16, hãy thêm một TextField có nhãn Email và viền xung quanh.

Tự làm thử

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)),
          ],
        ),
      ),
    );
  }
}