I would like when I click on button "Nova Reserva", it opens a new screen, but in the same tab, without losing the TabBar.

APP enter image description here

Current enter image description here

Code TabBarView

TabBarView(
            controller: _tabController,
            children: const [
              HomeTab(),
              ResearchesTab(),
              SchedulesTab(),
              Center(
                child: Text('MENSAGENS'),
              ),
              Center(
                child: Text('CADASTROS'),
              ),
            ],
          ),

Code TabBar

child: TabBar(
                  physics: const BouncingScrollPhysics(),
                  controller: _tabController,
                  isScrollable: true,
                  indicatorPadding: EdgeInsets.symmetric(
                    vertical: size.height * .005,
                  ),
                  indicatorSize: TabBarIndicatorSize.label,
                  indicator: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                        color: CustomColors.orange,
                        width: size.height * .004,
                      ),
                    ),
                  ),
                  labelPadding: EdgeInsets.symmetric(
                    horizontal: size.width * .04,
                  ),
                  tabs: const [
                    TabBarTile(
                      image: 'assets/images/home.png',
                      label: 'Home',
                    ),
                    TabBarTile(
                      image: 'assets/images/pesquisas.png',
                      label: 'Pesquisas',
                    ),
                    TabBarTile(
                      image: 'assets/images/agendamentos.png',
                      label: 'Agendamentos',
                    ),
                    TabBarTile(
                      image: 'assets/images/mensagens.png',
                      label: 'Mensagens',
                    ),
                    TabBarTile(
                      image: 'assets/images/cadastros.png',
                      label: 'Cadastros',
                    ),
                  ],
                ),

In the button I'm using navigation with GetX, but I've also tried with MaterialPageRoute and I wasn't successful.

My objective enter image description here

CodePudding user response：

Create a Boolean variable that will change the tab bar's body according to its value. Change the tab bar's body content by changing the flag of the Boolean value.

Complete Code : -

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

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

  @override
  State<MyStatelessWidget> createState() => _MyStatelessWidgetState();
}

class _MyStatelessWidgetState extends State<MyStatelessWidget> {
  bool buttonOnePressed = false; // Declare the Boolean variable
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('TabBar Widget'),
          bottom: const TabBar(
            tabs: <Widget>[
              Tab(
                text: "Tab 1",
              ),
              Tab(
                text: "Tab 2",
              ),
              Tab(
                text: "Tab 3",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            const Center(
              child: Text("Tab 1"),
            ),
            buttonOnePressed   // Display widgets according to Boolean variable
                ? const Center(
                    child: Text("From Button 1"),
                  )
                : Center(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        ElevatedButton(
                          onPressed: () {
                            setState(() {
                              buttonOnePressed = true; // change Boolean value
                            });
                          },
                          child: const Text("Button 1"),
                        ),
                        const SizedBox(width: 30),
                        ElevatedButton(
                            onPressed: () {}, child: const Text("Button 2"))
                      ],
                    ),
                  ),
            const Center(
              child: Text("It's sunny here"),
            ),
          ],
        ),
      ),
    );
  }
}

Output : -