การนำทางแบบประกาศและโอเวอร์เลย์สำหรับ Flutter
ควบคุมหน้า Navigator 2.0 และโอเวอร์เลย์เฉพาะหน้าจอโดยไม่ใช้ Navigator.push/pop หรือ showDialog
หน้าเป็นข้อมูล
PageEntry เก็บเฉพาะเมทาดาทา UI ถูกสร้างโดย resolver ของคุณ
โอเวอร์เลย์เฉพาะหน้าจอ
ไดอะล็อกและ bottom sheet ถูกจำกัดต่อหน้าจอโดยไม่ต้องใช้สถานะส่วนกลาง
ไม่ยึดติดกับสถานะ
ใช้ setState, Riverpod, Bloc หรือ Provider ได้ ไม่ต้องพึ่งพา dependency
ขั้นตอนแรก
ติดตั้ง declarative_nav และเรนเดอร์หน้าด้วย resolver callback
การติดตั้ง
flutter pub add declarative_nav
คู่มือการใช้งาน
app_root.dart
class AppRoot extends StatefulWidget {
const AppRoot({super.key});
@override
State<AppRoot> createState() => _AppRootState();
}
class _AppRootState extends State<AppRoot> {
OverlayRequest? _overlay;
late List<PageEntry> _pages;
@override
void initState() {
super.initState();
_pages = const [PageEntry(key: 'home', name: '/home')];
}
Widget buildPage(BuildContext context, PageEntry page) {
return HomePage(onOpenDialog: _openDialog);
}
@override
Widget build(BuildContext context) {
return DeclarativePagesNavigator(
pages: _pages,
buildPage: buildPage,
onPopTop: _popTop,
canPopTop: () => _overlay == null,
);
}
}
หมายเหตุสำคัญ
แพ็กเกจนี้หลีกเลี่ยง Navigator.push/pop และการเรียก showDialog ให้ขับเคลื่อนการนำทางและโอเวอร์เลย์จากสถานะแทน
ก่อนหน้า
ภาพรวมถัดไป
การติดตั้ง