Edu DaLatHub
  • Trang chủ
  • Flutter
  • WordPress Plugin
  • GoLang
  • ReactJS
  • NodeJS
  • Networking
    • Basic Networking
      • ARP
      • ICMP
      • TCP/UDP
    • Routing & Switching
      • RIP
      • OSPF
      • EIGRP
      • Redistribution
      • TSHOOT
      • WAN
Liên hệ

  • By  tinhphan
  • 0 comments
  • Tháng Năm 23, 2020

Tự tạo NavigationRail đơn giản trong Flutter!

Flutter vừa tung ra bản cập nhật 1.17 mới. Trong bản này được cập nhật thêm nhiều chức năng và widget mới. Trong đó có NavigationRail, các bạn có thể xem hình bên dưới.

Images app with navigation rail without icons and text labels
Nguồn material.io

Nhưng một vấn đề xảy ra khi mình muốn hiển thị Text và Icon theo chiều ngang thì lại không được hỗ trợ. Vì vậy mình quyết định tạo ra một widget riêng cho mình.

Giao diện mẫu

Chúng ta sẽ tạo ra hai widget, thứ nhất là NavigationHorizontalRail và NavigationHorizontalRailDestination. NavigationHorizontalRail để thực hiện việc chứa các widget NavigationHorizontalRailDestinantion và chứa các thuộc tính màu sắc, callback lắng nghe việc thay đổi lựa chọn của người dùng.

Đầu tiên, tạo ra widget là NavigationHorizontalRailDestination chứa các thuộc tính sau:

Ở hàm build, tuỳ thuộc vào UI của bạn mà bạn sẽ lên layout một cách hợp lý. Ở đây mình làm đơn giản như sau:

Tạo ra một statefulwidget tên là NavigationHorizontalRail chứa các thuộc tính sau:

Trong state của NavigationHorizontalRail khai báo một biến indexSelected để dễ dàng quản lý việc thay đổi và cập nhật ra ngoài.

Trong hàm build như sau:

Lúc sử dụng, ta viết như sau:

Ở đây mình sử dụng provider để quản lý state chỉnh.

_model.users là một danh sách dữ liệu
_model.indexSelected là một biến mặt định để chỉ định vị trí đầu tiên.

Vì NavigationHorizontalRail vẫn là một widget chứa list view, vì thế các bạn nên đặt trong một Expanded khi chứa trong Column nhé.

Chúc các bạn thành công!

Tags:
Flutter

Leave a Comment Cancel Reply

Your email address will not be published.*

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Don’t compare yourself with anyone in this world…if you do so, you are insulting yourself.

Bill Gates

When something is important enough, you do it even if the odds are not in your favor.

Elon Musk

Bài viết mới

  • Lorem Ipsum Sample Content123
  • Lorem Ipsum Sample Content
  • Hello world
  • Hello world
  • Hello world
  • Wide area networks (Phần 2)
  • Wide area networks (Phần 1)
  • Redistribution (Phần Cuối)
  • Redistribution (Phần 1)
  • OSPF – Open Shortest Path First (Phần Cuối)

Nơi chia sẻ về tin công nghệ, các kinh nghiệm lập trình. Xây dựng các khoá đào tạo lập trình, mạng, tin học văn phòng...

Thông tin liên hệ

  • 2/9 Phạm Ngũ Lão, Phường 3, Đà Lạt
  • 0865802659
  • info@dalathub.com

Copyright @ 2022 Edu DaLatHub