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

Flutter: Changing Pages within a Tab of a TabBar

what is the most straight-forward way of dynamically changing the types of widgets displayed within the same Tab of a TabBarView, after pressing a button?

I dont want to completely move to a new page with a Navigator, because I want to keep the TabBar and stay in the same Tab, but replace the widgets that are displayed within that Tab.

Thank you to any helpers 🙂

Tags:

2

Answers


  1. 0

    The TabBar widget has a controller that handles tab switching internally without the need for a navigator.

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

  @override
  State<Widget> createState() => WidgetState();
}

class WidgetState extends extends State<Widget> with TickerProviderStateMixin {

    late TabController _tabController;
    @override
    void initState() {
        super.initState();
        _tabController = TabController(length: 2, vsync: this); //length is the number of desired tabs
    }

    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                bottom: TabBar(
                    controller: _tabController,
                    tabs: [
                        Tab(
                            text: 'Tab 1', 
                        ),
                        Tab(
                            text: 'Tab 2',
                        ),
                    ],
                )
            ),
            body: TabBarView(
                controller: _tabController,
                children: [
                    Widget2(),
                    Widget3()
                ],
            ),
        )
    }
}
    Login or Signup to reply.
  2. 0

    If you want to simply avoid to use Navigator and display other widgets when the Tab on the TabBar where Tapped you can follow the example given on the Flutter docs.

    If you pay attention, the body content on the first example is displayed according to the index of the TabBar Icon were Tapped. If you Tap the first Icon, it will show the first content on the TabBarView children.

    return Scaffold(
  appBar: AppBar(
    title: const Text('TabBar Sample'),
    bottom: TabBar(
      controller: _tabController,
      tabs: const <Widget>[
        Tab(
          icon: Icon(Icons.cloud_outlined),
        ),
        Tab(
          icon: Icon(Icons.beach_access_sharp),
        ),
        Tab(
          icon: Icon(Icons.brightness_5_sharp),
        ),
      ],
    ),
  ),
  body: TabBarView(
    controller: _tabController,
    children: const <Widget>[
      Center(
        child: Text("It's rainy here"),
      ),
      Center(
        child: Text("It's cloudy here"),
      ),
      Center(
        child: Text("It's sunny here"),
      ),
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search