Question 79780 in Flutter Question posted in
The official Flutter documentation can be found here.

Default tab controller flutter

i want to ask how do i navigate tabs inside the DefaultTab, i have DefaultTabController Page that i name it OrderList inside OrderList i have 3 different tab which Progress,Complete and Cancel when i click button i want to navigate it to OrderList that show Cancel page. Below is my code. If i directly navigate to OrderList, it will show the first page which is progress, i wanted it to navigate to the 3rd page which is the cancel page.

class _OrderListState extends State<OrderList> {


  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.teal[300],
        ),
        child: Scaffold(
          bottomNavigationBar: BottomNavigationBarForAppClient(indexNum: 1),
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: const Text('Order List'),
            centerTitle: true,
            flexibleSpace: Container(
              decoration: BoxDecoration(
                color: Colors.teal[300],
              ),
            ),
          ),
          body: Column(
            children: [
              TabBar(tabs: [
                Tab(
                  text: 'In Progress',
                ),
                Tab(
                  text: 'Completed',
                ),
                Tab(
                  text: 'Cancelled',
                ),
              ]),
              Expanded(
                child: TabBarView(children: [
                  ProgressClient(),
                  CompletedClient(),
                  CancelledClient(),
                ]),
              )
            ],
          ),
        ),
      ),
    );
  }
}

this is the other page code. As you can see here i navigate it to OrderList() and the default tab inside OrderList ProgressClient , i want it to go to the CancelledClient tab

IconButton(
              onPressed: () {
                Navigator.pushReplacement(context,
                    MaterialPageRoute(builder: (context) => OrderList()));
              },
              icon: Icon(Icons.arrow_back, size: 40, color: Colors.white)),

the button

OrderList Page

Tags:

2

Answers


  1. 0 
    class _OrderListState extends State<OrderList> with TickerProviderStateMixin {


    TabBar(
       controller: TabController(initialIndex: 3, vsync: this,length: 3)
       ..

    add controller and set initialInde(index of page which you want)

    Login or Signup to reply.
  2. 0

    Try to use route argument like on push

    Navigator.pushReplacement(
    context,
    MaterialPageRoute(
        builder: (context) => OrderList(),
        settings: RouteSettings(arguments: 2)));

    And on orderList using TabController.

    class OrderList extends StatefulWidget {
  const OrderList({super.key});

  @override
  State<OrderList> createState() => _OrderListState();
}

class _OrderListState extends State<OrderList>
    with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(length: 3, vsync: this);
  @override
  Widget build(BuildContext context) {
    final int? callBackTabIndex =
        ModalRoute.of(context)?.settings.arguments as int?;
    if (callBackTabIndex != null && callBackTabIndex == 2) {
      WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
        controller.animateTo(2);
      });
    }
    return Container(
      decoration: BoxDecoration(
        color: Colors.teal[300],
      ),
      child: Scaffold(
        // bottomNavigationBar: BottomNavigationBarForAppClient(indexNum: 1),
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          title: const Text('Order List'),
          centerTitle: true,
          flexibleSpace: Container(
            decoration: BoxDecoration(
              color: Colors.teal[300],
            ),
          ),
        ),
        body: Column(
          children: [
            TabBar(
              controller: controller,
              tabs: [
                Tab(
                  text: 'In Progress',
                ),
                Tab(
                  text: 'Completed',
                ),
                Tab(
                  text: 'Cancelled',
                ),
              ],
              onTap: (value) {},
            ),
            Expanded(
              child: TabBarView(controller: controller, children: [
                ElevatedButton(
                    onPressed: () {
                      Navigator.of(context).push(MaterialPageRoute(
                        builder: (context) => AnotherWidget(),
                      ));
                    },
                    child: Text("NA")),
                Text("CompletedClient"),
                Text("CancelledClient"),
              ]),
            )
          ],
        ),
      ),
    );
  }
}

    for test case

    class AnotherWidget extends StatelessWidget {
  const AnotherWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ElevatedButton(
          onPressed: () {
            Navigator.pushReplacement(
                context,
                MaterialPageRoute(
                    builder: (context) => OrderList(),
                    settings: RouteSettings(arguments: 2)));
          },
          child: Text("NV"),
        ),
      ],
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search