Giới thiệu Widgetbook – Storybook dành cho Flutter
Như tiêu đề, Widgetbook là 1 package giúp tạo Storybook dành cho Flutter; nó giúp developers thiết lập danh mục các widgets của họ, thử nghiệm 1 cách nhanh chóng trên các thiết bị và themes; đồng thời có thể dễ dàng chia sẻ cho designers và khách hàng.
Use cases cho Widgetbook
- Xây dựng các widgets 1 cách độc lập và test chúng 1 cách trực quan
Widgetbook cung cấp 1 môi trường để xây dựng các UIs 1 cách độc lập. Chúng cho phép bạn có thể phát triển các widgets mà không bị ảnh hưởng từ các phụ thuộc thành phần khác của màn hình. Bạn có thể nhanh chóng hiển thị UIs trên các thiết bị giả lập khác nhau, giúp bạn có thể kiểm tra (test) và phát triển các lỗi giao diện.
![](https://anywaymeika.files.wordpress.com/2022/03/2da75-1tdtlzy5s2mvpuddcww_vkw.gif)
![](https://anywaymeika.files.wordpress.com/2022/03/0b495-1eouamwa93bcdlk7fvskdsq.gif)
- Có 1 cái nhìn tổng quan về tất cả các widgets của bạn
Khi projects của bạn càng ngày càng nhiều widgets được tạo ra, thì việc có 1 quyển từ điển để dễ dàng tìm kiếm, tra cứu cách sử dụng của những widgets sẵn có trong projects là 1 điều hết sức cần thiết. Đây cũng là ý nghĩa của việc tạo ra Storybook.
Tìm ngay việc làm ReacJS HOT tại TopDev!
![](https://anywaymeika.files.wordpress.com/2022/03/951a4-1bbtc0drzyvdvcbtdzihyew.gif)
- Nâng cao khả năng hợp tác với designer, PO và khách hàng
Widgetbook cung cấp services giúp bạn có thể đẩy storybook widgets và màn hình của bạn lên host giúp khách hàng và các bên liên quan có thể dễ dàng review trên các thiết bị và themes khác nhau 1 cách dễ dàng; từ đó giúp giảm bớt tối đa thời gian họp và chỉnh sửa cho phần UIs trong dự án.
Cách cài đặt và sử dụng Widgetbook
Link package: https://pub.dev/packages/widgetbook
![](https://anywaymeika.files.wordpress.com/2022/03/2-2.png?w=1024)
- Thêm dependency vào pubspec.yaml
# pubspec.yaml
dev_dependencies:
widgetbook:
- Cấu trúc thư mục
example_app
+ lib
+--- main.dart
+ widgetbook
+--- main.dart
+--- widgetbook.dart
File widgetbook/widgetbook.dart chứa khai báo Widgetbook
class HotReload extends StatelessWidget {
const HotReload({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Widgetbook(...);
}
}
File widgetbook/main.dart khai báo hàm main để chạy app
void main() {
runApp(HotReload());
}
- Ví dụ sử dụng
class HotReload extends StatelessWidget {
const HotReload({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Widgetbook(
categories: [
WidgetbookCategory(
name: 'widgets',
widgets: [
WidgetbookWidget(
name: '$CustomWidget',
useCases: [
WidgetbookUseCase(
name: 'Default',
builder: (context) => CustomWidget(),
),
],
),
],
folders: [
WidgetbookFolder(
name: 'Texts',
widgets: [
WidgetbookWidget(
name: 'Normal Text',
useCases: [
WidgetbookUseCase(
name: 'Default',
builder: (context) => Text(
'The brown fox ...',
),
),
],
),
],
),
],
),
],
appInfo: AppInfo(
name: 'Widgetbook Example',
),
);
}
}
Bài viết gốc được đăng tải tại anywayblogs.com
Theo dõi những bài viết mới của TopDev nhé:
- Hướng dẫn cài đặt Flutter
- React là gì? Lộ trình trở thành lập trình viên React
- Top 22 công cụ cho lập trình viên React 2022
- M Mới ra trường không kinh nghiệm, sao làm BA?
- C Chuyển đổi SA key sang Workload Identity
- U Use Case Diagram và 5 sai lầm thường gặp
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- D Dart là gì? Ứng dụng của ngôn ngữ lập trình Dart
- C Chuẩn Hóa CV, Nhận Ngay Phím Chất
- S So sánh MySQL và MongoDB: Nên chọn CSDL nào?
- D Dân BA có cần phải rành về kỹ thuật???
- C CSS Selector là gì? Cách sử dụng các loại CSS Selector phổ biến
- P Phân biệt Sketch, Wireframe, Mockup, và Prototype?