Search code examples
animationflutterscaffold

How to set Navigator animation background color between Scaffold pages


I'm trying to use a different background color on my Scaffolds, however when I push to different page using Navigator, apparently the animation is performed using a fixed white background.

How do I set it?

Example code and behavior below:

Navigating to and from page with white background

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator, how to set animation background?',
      theme: ThemeData(
        primarySwatch: Colors.indigo,
        scaffoldBackgroundColor: Colors.white70,
        canvasColor: Colors.white70,

        /* none of those work on the animation:

        backgroundColor: Colors.white70,
        splashColor: Colors.white70,
        dialogBackgroundColor: Colors.white70,
        accentColor: Colors.white70,
        cardColor: Colors.white70,
        bottomAppBarColor: Colors.white70,
        cursorColor: Colors.white70,
        disabledColor: Colors.white70,
        buttonColor: Colors.white70,
        dividerColor: Colors.white70,
        errorColor: Colors.white70,
        highlightColor: Colors.white70,
        hintColor: Colors.white70,
        indicatorColor: Colors.white70,
        secondaryHeaderColor: Colors.white70,
        selectedRowColor: Colors.white70,
        textSelectionColor: Colors.white70,
        textSelectionHandleColor: Colors.white70,
        toggleableActiveColor: Colors.white70,
        unselectedWidgetColor: Colors.white70,
        */
      ),
      home: Page(
        title: 'Home Page',
        childPageTitle: 'Child Page',
      ),
    );
  }
}

class Page extends StatefulWidget {
  Page({Key key, this.title, this.childPageTitle}) : super(key: key);
  final String title;
  final String childPageTitle;

  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page> {
  @override
  Widget build(BuildContext context) {
    Widget button;

    if (widget.childPageTitle != null) {
      button = FloatingActionButton(
        onPressed: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => Page(title: widget.childPageTitle))),
        child: Icon(Icons.navigate_next),
      );
    }

    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(child: Text(widget.title)),
      floatingActionButton: button,
    );
  }
}

Solution

  • Apparently this is not a problem with the Navigator, or more specifically the CupertinoPageTransition. They work, but with other colors.

    Somehow the calculation which defines the transition background color for a base color Colors.white70 makes it very white, but that doesn't look bad in other colors.

    transition in red

    transition in white30