Skip to main content

Flutter: Button, TextField và Form widgets

· 4 min read

Button, TextField và Form là những widget quan trọng để tạo giao diện tương tác trong ứng dụng Flutter. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. Button Widgets​

Flutter cung cấp nhiều loại button khác nhau để phù hợp với các nhu cầu khác nhau.

Button Widget Examples

1.1. ElevatedButton​

ElevatedButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Elevated Button'),
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
  ),
)

1.2. TextButton​

TextButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Text Button'),
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
  ),
)

1.3. IconButton​

IconButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  icon: const Icon(Icons.favorite),
  color: Colors.red,
)

1.4. OutlinedButton​

OutlinedButton(
  onPressed: () {
    // Xử lý sự kiện khi button được nhấn
  },
  child: const Text('Outlined Button'),
  style: OutlinedButton.styleFrom(
    side: const BorderSide(color: Colors.blue),
  ),
)

2. TextField Widget​

TextField widget được sử dụng để nhận input từ người dùng.

TextField Widget Examples

2.1. Basic TextField​

TextField(
  decoration: InputDecoration(
    labelText: 'Username',
    hintText: 'Enter your username',
    prefixIcon: const Icon(Icons.person),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

2.2. Password TextField​

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
    hintText: 'Enter your password',
    prefixIcon: const Icon(Icons.lock),
    suffixIcon: IconButton(
      icon: const Icon(Icons.visibility),
      onPressed: () {
        // Toggle password visibility
      },
    ),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

2.3. Number TextField​

TextField(
  keyboardType: TextInputType.number,
  decoration: InputDecoration(
    labelText: 'Age',
    hintText: 'Enter your age',
    prefixIcon: const Icon(Icons.numbers),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

3. Form Widget​

Form widget được sử dụng để quản lý và validate nhiều TextField cùng lúc.

Form Widget Examples

3.1. Basic Form​

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Email',
          hintText: 'Enter your email',
        ),
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your email';
          }
          return null;
        },
      ),
      TextFormField(
        decoration: const InputDecoration(
          labelText: 'Password',
          hintText: 'Enter your password',
        ),
        obscureText: true,
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter your password';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // Process form data
          }
        },
        child: const Text('Submit'),
      ),
    ],
  ),
)

3.2. Form với Custom Validation​

TextFormField(
  decoration: const InputDecoration(
    labelText: 'Phone Number',
    hintText: 'Enter your phone number',
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your phone number';
    }
    if (!RegExp(r'^\d{10}$').hasMatch(value)) {
      return 'Please enter a valid 10-digit phone number';
    }
    return null;
  },
)

4. Best Practices​

4.1. Button​

  • Sử dụng đúng loại button cho từng trường hợp
  • Thêm loading state cho button khi cần
  • Xử lý disable state khi cần thiết
  • Sử dụng const constructor khi có thể

4.2. TextField​

  • Luôn có label hoặc hint text
  • Sử dụng prefix/suffix icon khi cần
  • Xử lý keyboard type phù hợp
  • Validate input khi cần thiết

4.3. Form​

  • Sử dụng Form widget để quản lý nhiều field
  • Implement validation logic rõ ràng
  • Hiển thị error message rõ ràng
  • Xử lý form submission một cách an toàn

Kết luận​

Button, TextField và Form là những widget cơ bản nhưng rất quan trọng trong Flutter. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng tương tác hiệu quả.

Tài liệu tham khảo: