CODEWITHSUNDEEP
flutterflutter-layout
Urvashi kharecha
Urvashi kharecha

Reputation: 869

TabBar is not showing another screen as a full screen - flutter

I need to create something like this

I am using bottom navigation bar as my home page. than in bottom navigation on item click opens a screen that contains TabBarView . In my tab bar view on tap of container i am doing::

onTap: (){
                  // _tabController.animateTo(value)
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => Screen(),fullscreenDialog: true));
                }

i get this output on the image shown below from the above code, i need to show second screen as a full screen like no app bar of tabbar screen.

Upvotes: 1

Views: 1932

Answers (2)

James
James

Reputation: 729

I found that to navigate from a screen with the appBar present, to one where the appBar is hidden, the best way that works for me is to modify the MaterialPageRoute slightly:

      Navigator.of(context, rootNavigator: true).push(
        MaterialPageRoute(
          builder: (context) => HomeScreen(),
        ),
      );

The key bit that does what you're looking for, for me, is adding rootNavigator: true to the command, since this pushes the page on top of the appBar.

Upvotes: 3

easeccy
easeccy

Reputation: 5086

If you want to hide AppBar and TabBarView for spesific states, you can put conditions on your widget tree.

class _ExampleState extends State<Example> {
  bool _control = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _control
            ? AppBar(
                title: Text("Title Text"),
              )
            : null,
        body: RaisedButton(
          onPressed: () {
            setState(() {
              _control = !_control;
            });
          },
          child: Text('Toggle AppBar'),
        ));
  }
}

Upvotes: 0

Related Questions