Flutter là một framework mã nguồn mở phát triển bởi Google, được sử dụng để xây dựng ứng dụng di động đa nền tảng. Trong Flutter, giao diện người dùng được xây dựng từ các thành phần như Button, Text, Image, và nhiều thành phần khác. Trong bài viết này, chúng ta sẽ tìm hiểu về Button trong Flutter và các loại Button mà Flutter cung cấp.
Button là gì và tại sao quan trọng trong ứng dụng di động?
Button là một thành phần UI cho phép người dùng tương tác với ứng dụng. Người dùng có thể nhấn vào Button để kích hoạt một hành động nào đó trong ứng dụng. Button là một phần quan trọng trong thiết kế ứng dụng di động vì nó giúp cung cấp một giao diện người dùng dễ sử dụng và tương tác.
Các loại Button trong Flutter
ElevatedButton
ElevatedButton trong Flutter là một Button có hình dạng dạng nổi, được tạo thành từ một hình chữ nhật, có border và background color. ElevatedButton có thể thay đổi màu sắc và kích thước dễ dàng. ElevatedButton cũng là một trong những button được dùng phổ biến nhất.
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
child: const Text('ElevatedButton chỉ với text'),
),
),
SizedBox(
width: double.infinity,
child: ElevatedButton.icon(
onPressed: () {},
icon: const Icon(Icons.star),
label: const Text('ElevatedButton có text và icon'),
),
),
OutlinedButton
OutlinedButton về cơ bản nó là một TextButton nhưng có đường viền xung quanh. OutlinedButton là một button quan trọng trong flutter đóng vai trò là một button phụ thường được dùng cho các sự kiện phụ. Ví dụ chúng ta đang ở màn hình Login. Ta có 2 button Sign in và Sign up thì Sign in sẽ sử dụng ElevatedButton cho chức năng chính của màn hình và OutlinedButton cho Sign up vì Sign up chỉ là tính năng phụ dẫn đến màn hình đăng nhập.
SizedBox(
width: double.infinity,
child: OutlinedButton(
onPressed: () {},
child: const Text('OutlinedButton chỉ với text'),
),
),TextButton
TextButton trong Flutter là một Button không có hình dạng nổi, thường được hiển thị dưới dạng văn bản hoặc icon. TextButton không có border mặc định và có thể có border chỉ khi được nhấn vào. TextButton thích hợp để sử dụng trong các trường hợp cần một Button đơn giản.
SizedBox(
width: double.infinity,
child: TextButton(
onPressed: () {},
child: const Text('TextButton chỉ với text'),
),
),
SizedBox(
width: double.infinity,
child: TextButton.icon(
onPressed: () {},
icon: const Icon(Icons.star),
label: const Text('TextButton có text và icon'),
),
),
IconButton
Không giống với IconButton trong Flutter là một Button có hình dạng hình ảnh, thường được sử dụng để hiển thị các icon và kết hợp với văn bản hoặc các thành phần khác. IconButton được tạo thành từ một hình tròn có thể thay đổi kích thước và màu sắc.
SizedBox(
width: double.infinity,
child: IconButton(
onPressed: () {},
icon: const Icon(Icons.star),
),
),
FloatingActionButton
FloatingActionButton trong Flutter là một Button nổi nằm trên giao diện người dùng, thường được sử dụng để thực hiện các hành động quan trọng trong ứng dụng. FloatingActionButton thường có hình dạng hình tròn, có một icon đi kèm và có các hiệu ứng hover và pressed.
FloatingActionButton thường được dùng trong thuộc tính floatingActionButton của Scaffold Widget người dùng có thẻ tùy chỉnh vị trí của nó thông qua thuộc tính floatingActionButtonLocation
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.star),
),
DropdownButton
DropdownButton trong Flutter là một Button kết hợp với một danh sách các mục để người dùng có thể chọn từ danh sách. Khi nhấn vào DropdownButton, danh sách các mục sẽ xuất hiện và người dùng có thể chọn một mục. DropdownButton thường được sử dụng để chọn trong một số lượng lớn các mục.
Đúng như cái tên, DropdownButton thường dùng cho các chức năng có thể cho người dùng chọn 1 trong nhiều giá trị. Ví dụ như chọn Quận Huyện, …
SizedBox(
width: double.infinity,
child: DropdownButton(
value: selectedValue,
items: const [
DropdownMenuItem(value: 'option1', child: Text('Option 1')),
DropdownMenuItem(value: 'option2', child: Text('Option 2')),
],
onChanged: (String? value) {
setState(() {
selectedValue = value ?? '';
});
},
),
)PopupMenuButton
PopupMenuButton trong Flutter là một Button kết hợp với một danh sách các lựa chọn. Khi nhấn vào PopupMenuButton, danh sách các lựa chọn sẽ xuất hiện và người dùng có thể chọn một lựa chọn. PopupMenuButton thường được sử dụng để hiển thị các tùy chọn trong các tính năng bổ sung của ứng dụng.
PopupMenuButton<String>(
initialValue: 'itemOne',
// Callback that sets the selected popup menu item.
onSelected: (String item) {
setState(() {});
},
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'itemOne',
child: Text('Item 1'),
),
const PopupMenuItem<String>(
value: 'itemTwo',
child: Text('Item 2'),
),
const PopupMenuItem<String>(
value: 'itemThree',
child: Text('Item 3'),
),
],
);
Sử dụng Button trong Flutter
Cách tạo Button trong Flutter
Để tạo một Button trong Flutter, ta có thể sử dụng các Widget từ thư viện material.dart của Flutter. Ví dụ, để tạo một ElevatedButton, ta có thể sử dụng widget ElevatedButton và cung cấp các thuộc tính như child (văn bản hiển thị trên Button), onPressed (hành động khi nhấn vào Button), và color (màu sắc của Button).
Tùy chỉnh giao diện Button
Flutter cho phép chúng ta tùy chỉnh giao diện của Button bằng cách thay đổi các thuộc tính như màu sắc, kích thước, font chữ, border và nhiều thuộc tính khác. Chúng ta có thể sử dụng các thuộc tính có sẵn hoặc tạo các Widget tùy chỉnh để tạo giao diện mong muốn cho Button.
Ví dụ trong đoạn code dưới đây. Ta đã có thể thay đổi màu nền của button thành màu đỏ. Ngoài ra cũng có thể thay đổi nhiều thuộc tính giao diện khác của button mà styleFrom cung cấp.
SizedBox(
width: double.infinity,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
),
onPressed: () {},
child: const Text('ElevatedButton chỉ với text'),
),
),
Xử lý sự kiện khi nhấn vào Button
Trong Flutter, chúng ta có thể xử lý sự kiện khi người dùng nhấn vào Button bằng cách gán một hàm vào thuộc tính onPressed của Button. Khi Button được nhấn, hàm này sẽ được thực thi, và chúng ta có thể thực hiện các hành động, thay đổi trạng thái của ứng dụng hoặc thực hiện các logic khác.
Kết luận
Trở lại Button trong Flutter, chúng ta đã tìm hiểu về các loại Button như RaisedButton, FlatButton, IconButton, FloatingActionButton, DropdownButton, và PopupMenuButton. Chúng ta đã biết cách tạo Button và tùy chỉnh giao diện của chúng. Bên cạnh đó, chúng ta cũng đã tìm hiểu cách xử lý sự kiện khi người dùng nhấn vào Button. Button là một phần quan trọng trong việc xây dựng giao diện người dùng trong ứng dụng Flutter và nó giúp tăng tính tương tác của ứng dụng.
Có những câu hỏi thường gặp sau đây:
Làm cách nào để thay đổi màu sắc của một RaisedButton?
Để thay đổi màu sắc của một ElevatedButton trong Flutter, chúng ta có thể sử dụng thuộc tính color và set giá trị mới cho nó. Ví dụ: ElevatedButton.styleFrom(backgroundColor: Colors.blue, …)
Làm cách nào để tạo một FloatingActionButton với một icon tùy chỉnh?
Để tạo một FloatingActionButton với một icon tùy chỉnh, chúng ta có thể sử dụng thuộc tính child của FloatingActionButton và cung cấp một Widget Icon với icon tùy chỉnh. Ví dụ: FloatingActionButton(child: Icon(Icons.add), …). Ngoài ra chúng ta có thể sử dụng thêm thư viện flutter_svg để có thể sử dụng hình ảnh với extension là .svg để hiển thị icon.
Làm cách nào để tạo một DropdownButton với một danh sách các mục?
Để tạo một DropdownButton với một danh sách các mục, chúng ta có thể sử dụng thuộc tính items của DropdownButton và cung cấp một danh sách các Widget DropdownMenuItem với các mục khác nhau. Ví dụ:
DropdownButton(
items: [
DropdownMenuItem(child: Text('Option 1'), value: 'option1'),
DropdownMenuItem(child: Text('Option 2'), value: 'option2'),
],
)Button nào thích hợp để sử dụng trong trường hợp cần một Button đơn giản?
TextButton thích hợp để sử dụng trong trường hợp cần một Button đơn giản với hiển thị dưới dạng văn bản hoặc icon, mà không có border mặc định.
Tại sao nên sử dụng Button trong Flutter?
Button là một phần quan trọng trong việc tạo ra một giao diện người dùng tương tác và trực quan trong ứng dụng di động. Sử dụng Button trong Flutter giúp cải thiện tính tương tác của ứng dụng và cho phép người dùng thao tác và tương tác dễ dàng với ứng dụng.
TOP FLUTTER PACKAGE MÀ BẠN NÊN BIẾT VÀO NĂM 2023
