qlevar_router icon indicating copy to clipboard operation
qlevar_router copied to clipboard

[Proposal] May we implement a TabPage or PageView with Qlevar?

Open abdojay opened this issue 2 years ago • 2 comments

Hello guys, I was wondering If it would be possible to get children's route act like TABS into a TabPage?

Example of the use case - MobileRoutes has three tabs

Route:

mobile_routes.dart
class MobileRoutes {
  static const String mobile = 'mobileRoute';

  static const List<Tab> tabs = <Tab>[
    Tab(text: 'Mobile stores'),
    Tab(text: 'Mobile products'),
    Tab(text: 'Mobile settings'),
  ];

  final route = QRoute.withChild(
      path: '/mobile',
      name: mobile,
      initRoute: '/stores',
      builderChild: (router) => MobileView(router),
      children: [
        QRoute(
          path: '/stores',
          pageType: QFadePage(),
          builder: () => MobileStoresView(),
        ),
        QRoute(
          path: '/products',
          pageType: QFadePage(),
          builder: () => MobileProductsView(),
        ),
        QRoute(
          path: '/settings',
          pageType: QFadePage(),
          builder: () => MobileSettingsView(),
        ),
     ]);
}

Widget:

mobile_view.dart
class _MobileViewState extends State<MobileView> {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController =
        TabController(length: MobileRoutes.tabs.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController,
            tabs: MobileRoutes.tabs,
          ),
        ),
        body: TabBarView(controller: _tabController, children: [
          MobileStoresView(),
          MobileSettingsView(),
        ]),
      );
}

And thank you so much guys, having a nice day!

abdojay avatar Mar 24 '22 14:03 abdojay

@SchabanBo We are also looking for this feature to be integrated, as I see you already added it to your ToDo list. I am eagerly waiting for it to get release as it will help our project.

Again thanks for the package.

manish1238 avatar Jul 21 '22 13:07 manish1238

Hi @abdojay @manish1238, I write an example on how to use TabView with qlevar_router. Can you please check it out and see if this what you wanted? I will close this issue after your feedbacks. Thanks

SchabanBo avatar Aug 11 '22 14:08 SchabanBo