การนำทางแบบประกาศและโอเวอร์เลย์สำหรับ 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 ให้ขับเคลื่อนการนำทางและโอเวอร์เลย์จากสถานะแทน

ก่อนหน้า

ภาพรวม