如何设置Scaffold页面之间的Navigator动画背景色

Question

我试图在我的脚手架上使用不同的背景颜色，但是当我使用导航器推送到不同的页面时，显然动画是使用固定的白色背景执行的。

如何设置？

下面的示例代码和行为：

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,
    );
  }
}

Answer 1

显然这不是 Navigator 或 CupertinoPageTransition 的问题。他们工作，但与其他颜色。

不知何故，为基色定义过渡背景颜色的计算 Colors.white70 使其非常白，但在其他颜色中看起来并不差。

Answer 2

对于遇到这个问题的其他人，我的问题是我不小心使用了半透明颜色作为脚手架背景颜色：

const Color COLOR_DARK_GREY = Color.fromRGBO(31, 31, 31, 100);

不透明度值是从 0.0 到 1.0，所以这导致我有一个半透明的颜色。相反，我想要这样的东西：

const Color COLOR_DARK_GREY = Color.fromRGBO(20, 20, 20, 1);

有了这个，过渡将正常工作，并且在路线之间过渡时我不会得到奇怪的颜色或显示以前的背景。

如何设置Scaffold页面之间的Navigator动画背景色

How to set Navigator animation background color between Scaffold pages

animation

scaffold

flutter