Trending
Sự khác biệt giữa Struct và Class
iOS: Hướng dẫn tạo certificate, App ID, Provisioning Profile để tải ứng dụng lên App store
Phương pháp Bell Curve trong đánh giá Performance của nhân viên. Hay là: “tại sao em perform ko đến nỗi tệ mà vẫn bị đánh giá D” ?!
ANT DESIGN – Điều gì khiến thư viện này vượt “mặt” Material-UI của Google?
[React] Class Component và Function Component, bạn chọn viết theo cách nào?
[MyBatis] Sử dụng MyBatis với Spring Boot
Tổng quan thư viện Underthesea – bộ công cụ mã nguồn mở xử lý ngôn ngữ tự nhiên tiếng Việt
Method Swizzling in Swift
[FLUTTER] Một số widget hữu ích trong Flutter (Phần 1)
How to make a super app?
techover.io
  • LOGIN
Uncategorized

[FLUTTER] Một số widget hữu ích trong Flutter (Phần 2)

by hieppham1999 April 5, 2022
by hieppham1999 April 5, 2022 269 views
0 comment 0FacebookTwitterLinkedinReddit

Ở số trước mình đã giới thiệu một vài widget hữu ích, anh em có thể tìm đọc lại tại đây.

Sang phần 2 này, mình sẽ tiếp tục giới thiệu đến anh em một vài widget ít phổ biến nhưng cũng khá thú vị. Bắt đầu ngay nhé 😀

1. Chip widgets

Đây là một loạt các widget có hình dạng mặc định là hình chữ nhật được bo tròn bốn góc (Stadium shape), có thể có avatar đằng trước để thể hiện hình ảnh. Vì có khá nhiều loại nên mình sẽ không đi sâu cụ thể mà chỉ giới thiệu qua cách sử dụng của chúng.

Chip widget
  • Chip: Đây là loại cơ bản nhất, chỉ đơn giản thể hiện thông tin, kèm theo avatar đằng trước nếu cần.
  • ActionChip: Widget này có thêm thuộc tính onPressed nên có thể click được. Đây có thể là một lựa chọn thay thế cho ElevatedButton, TextButton hay OutlinedButton. Nhưng cần lưu ý là widget này sẽ không có trạng thái disabled (tức thuộc tính onPressed không nhận giá trị null), cho nên widget này được khuyên dùng cho các item không cố định trong UI
    => use case sử dụng: khi người dùng tìm kiếm thông tin, dùng widget này để đưa ra cho người dùng các kết quả gợi ý.
  • FilterChip: Cũng giống như ActionChip nhưng có thêm thuộc tính selected, widget này được sử dụng như CheckBox hay Switch, phù hợp khi đặt filter tìm kiếm thông tin. Ví dụ tại đây
FilterChip
  • ChoiceChip: Gần tương tự FilterChip nhưng sử dụng khi muốn chọn 1 trong nhiều lựa chọn.
  • InputChip: Là sự kết hợp của những loại Chip bên trên, phù hợp khi thực hiện những tác vụ phức tạp.

2. ResizeImage

Thực ra đây cũng không hẳn là một widget nhưng nó khá là hay nên mình cũng xin giới thiệu cho những ai chưa biết 😀

Đôi khi anh em muốn thêm ảnh vào trong ứng dụng của mình để cho thêm sinh động, nhưng nếu ở những vị trí nhỏ mà chúng ta thêm những ảnh có size lớn vào thì sẽ khá là lãng phí bộ nhớ. ResizeImage sẽ giúp chúng ta giảm thiểu điều này

Cách sử dụng khá đơn giản, ResizeImage là một ImageProvider và cũng nhận vào một ImageProvider nên ta có thể sử dụng như sau:

Image(
    image: ResizeImage(
      NetworkImage(imageUrl)),
     ),

Như vậy là chúng ta có thể tiết kiệm được một chút bộ nhớ rồi 😀

3. SwitchListTile

Hầu hết các ứng dụng đều sẽ có phần cài đặt ứng dụng, và ở trong đó đôi khi sẽ có những lựa chọn theo kiểu bật / tắt, chúng ta sẽ nghĩ ngay đến widget Switch phải không nào?

Nhưng với góc nhìn của một người dùng, việc phải click đúng vào ô switch bé tí để có thể sử dụng khiến ta đôi khi cảm thấy hơi bất tiện. Đừng lo vì chúng ta đã có SwitchListTile :)))

Có thể hiểu nôm na đây chính là sự kết hợp của ListTile và Switch, chúng ta có thể click lên mọi điểm trong widget này để có thể kích hoạt nút switch, như vậy trải nghiệm người dùng (UX) sẽ được cải thiện thêm 😀

Anh em có thể xem ví dụ tại đây.

SwitchListTile

Lưu ý: CheckBox hay Radio cũng có lựa chọn tương đương là CheckBoxListTile và RadioListTile

Mình xin được phép kết thúc phần 2 tại đây, mong rằng những thông tin mình chia sẻ sẽ giúp ích được anh em trong quá trình làm việc 😀

Share this:

  • Tweet

Related

Flutter
0 comment 0 FacebookTwitterLinkedinReddit

Leave a Comment Cancel Reply

Save my name, email, and website in this browser for the next time I comment.

* By using this form you agree with the storage and handling of your data by this website.

previous post
Dart – extends Vs with Vs implements
next post
KIẾN THỨC CƠ BẢN VỀ DART (PHẦN 4)

You may also like

Flutter Custom Radio Button với Custom Shapes

April 20, 2022

[Flutter]Push Notification

April 19, 2022

Flutter – Các phím tắt IDE để giúp...

April 18, 2022

[Flutter] Bố cục Layout (Phần 2)

April 14, 2022

[Flutter] Bố cục Layout (Phần 1)

April 13, 2022

Shared Preferences trong Flutter

April 7, 2022

[Flutter]Tạo Widget với Android Native bằng Platform Views

April 7, 2022

[FLUTTER] MỘT SỐ WIDGET HỮU ÍCH TRONG FLUTTER...

April 7, 2022

[Flutter] Kiến trúc MVVM

April 6, 2022

Khác biệt giữa Future và Stream

April 6, 2022

Meta

  • Register
  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Recent Posts

  • Ánh xạ one-to-one unidirectional trong Hibernate
  • Hướng dẫn sử dụng Spring Boot với Hibernate
  • Hướng dẫn migrate cơ sở dữ liệu sử dụng Flyway trong ứng dụng Spring Boot
  • Mô đun hoá theo tầng hay mô đun hoá theo tính năng?
  • OWASP Top 10 for Mobile

Recent Comments

  • Hoàng on Android Local Maven (Android Library Part 2)
  • Đỗ Thành Đạt on iOS/Auto Layout – Phần 3: Anatomy of a Constraint, cách để tạo constraints bằng code
  • Anonymous on Cách thêm Unity Framework vào project IOS
  • Người buôn gió on Adobe xD to SWIFT
  • Không Biết Luôn on [Flutter]Push Notification

Archives

  • February 2023
  • January 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • January 2022
  • December 2021
  • November 2021
  • August 2021
  • July 2021
  • June 2021
  • April 2021
  • March 2021
  • January 2021
  • December 2020
  • November 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019

Categories

  • Admin’s Posts
  • Android
  • Apple
  • AWS
  • Backend
  • Business Analysis
  • CICD
  • Cloud
  • Common Knowledge
  • Continuous Delivery
  • Cross Platform
  • Developer life
  • Frontend
  • Gitlab
  • Hybrid
  • iOS
  • Java
  • macOS
  • Python
  • Sách dịch
  • Swift
  • Sysops
  • Tip
  • Uncategorized
  • Web
  • Webserver
  • Windows

Blog Stats

  • 54,882 hits
CICD GitlabCI Data Science #Swift #iOS #Apple lambda docker Layered Architecture apple tip cloud S3 Spring Boot git Swift web Flutter Machine Learning BA Software Architecture mobile app mysql programming pip serverless closures webserver python dynamodb ios rtsp streaming android backend aws react hooks Widget advanced Soft Skills react Java design pattern Business Analyst nginx CloudFront dart iOS Fresher Training
  • Facebook
  • Twitter
  • Linkedin
  • Youtube
  • Email
  • Rss
techover.io
  • LOGIN
 

Loading Comments...