dart - Permanent view with navigation bar in Flutter

Question

I have a scenario where I have 2 views:

• View 1
• View 2

On a button press from View 1, Navigator.of(context).pushnamed('/view2') is invoked, which pushes View 2 to the screen. In this case, the entire view is transitioned from View 1 to View 2.

Is it possible to have a permanent view that will still stay on screen when transitioning from View 1 to View 2? Similar to how Soundclould does it with its play controls at the bottom. Where it's always permanently displayed no matter which screens you navigate to. This diagram depicts what I'm trying to achieve:

On iOS, I'm able to achieve this by having a Navigation Controller in a ContainerView in a ViewController, then have the permanent view occupy the bottom of the screen right below the ContainerView

Answer 1

You can use the same approach here. Parent widget can have two parts: Navigator and PermanentView. By pushing routes you will change only Navigator widget. Demo:

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Route _onRoute(RouteSettings settings) {
    final str = settings.name.split("/")[1];
    final index = int.parse(str, onError: (s) => 0);

    return new MaterialPageRoute(
        builder: (BuildContext context) => new Home(index: index));
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new MaterialApp(
            title: 'Flutter Demo',
            onGenerateRoute: _onRoute,
          ),
        ),
        new Container(
          height: 44.0,
          color: Colors.blueAccent,
          child: new Center(
            child: new Text("permanent view"),
          ),
        )
      ],
    );
  }
}

class Home extends StatelessWidget {
  Home({Key key, this.index}) : super(key: key);
  final int index;

  @override
  Widget build(BuildContext context) => new Scaffold(
        appBar: new AppBar(
          title: new Text("View ${index}"),
        ),
        body: new Center(
          child: new Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Text("View ${index}"),
              new FlatButton(
                  onPressed: () =>
                      Navigator.of(context).pushNamed("/${index + 1}"),
                  child: new Text("Push"))
            ],
          ),
        ),
      );
}

void main() {
  runApp(
    new MyApp(),
  );
}