Repository: flutter
Issue: How to do navigations inside tab pages.
Labels: framework,d: api docs,f: routes,P3,team-framework,triaged-framework

The home page of my app is a tab. In the tab pages I want to navigate to to other screens but the navigated pages should stay within the constraints of the tab page instead of taking full screen space.

Here is the code. Currently Screen3 takes up the entire space covering the bottom tab bar.

```dart
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() {
        runApp(new MyApp());
}

class MyApp extends StatelessWidget {
    static var routes = <String, WidgetBuilder> {
      '/screen3': (BuildContext context) => new Screen3(),
    };
    
    static Route<BuildContext> _getRoute(RouteSettings settings) {
      var builder = routes[settings.name];
      if(builder != null) {
          return new MaterialPageRoute(
              settings: settings,
              builder: builder,
          );
      }
      return null;
    }

    Widget build(BuildContext context) {
        var app =new MaterialApp(
                home: new HomeTabs(),
                onGenerateRoute: _getRoute,
            );

        return app;
    }
}

class HomeTabs extends StatefulWidget {
    HomeTabs()
    :super();

    @override
    _HomeTabsState createState() => new _HomeTabsState();
}

class _HomeTabsState extends State<HomeTabs> with SingleTickerProviderStateMixin {
  TabController controller;
  _HomeTabsState() {
    //controller=new TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    if(controller == null) {
      controller=new TabController(length: 2, vsync: this);
    }
    
    return new Scaffold(
      bottomNavigationBar: new Material (
        child: new TabBar(
          tabs: <Tab> [
            new Tab(icon: new Icon(Icons.person)),
            new Tab(icon: new Icon(Icons.email))
          ],
          controller: controller,
        ),
        color: Colors.blue,
      ),
      body: new TabBarView(
        children: <Widget> [
          new Screen1(),
          new Screen2()
        ],
        controller: controller,
      )
    );
  }
}

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold( // 1
      appBar: new AppBar(
        title: new Text("Screen 1"), // screen title
      ),
      body: new Center(
              child: new RaisedButton(
                onPressed:(){
                  Navigator.of(context).pushNamed("/screen3");
                },
                child: new Text("Go to Screen 3"),
              ),
            )
      );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold( // 1
      appBar: new AppBar(
        title: new Text("Screen 2"), // screen title
      ),
      body: new Center(
              child: new RaisedButton(
                onPressed:(){
                  Navigator.of(context).pushNamed("/screen3");
                },
                child: new Text("Go to Screen 3"),
              ),
            )
        );
  }
}


class Screen3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold( // 1
      appBar: new AppBar(
        title: new Text("Screen 3"), // screen title
      ),
      body: new Center(
              child: new RaisedButton(
                onPressed:(){
                  Navigator.of(context).pop();
                },
                child: new Text("Back"),
              ),
            )
        );
  }
}
```

<img width="403" alt="home" src="https://user-images.githubusercontent.com/5688107/36925940-1d977314-1e2a-11e8-885b-babab679eb11.png">
<img width="405" alt="screen3" src="https://user-images.githubusercontent.com/5688107/36925941-1daf2838-1e2a-11e8-984a-1225cefa474d.png">