Flutter 创建透明的路由页面

• 原文

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('home page'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.dialer_sip),
        onPressed: () {
          Navigator.of(context).push(SimpleRoute(
            name: 'aaa',
            title: 'aaa',
            builder: (_) {
              return Scaffold(
                backgroundColor: Colors.transparent,
                body: Center(
                  child: Container(
                    padding: EdgeInsets.all(12.0),
                    color: Colors.black,
                    child: Text(
                      'data',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              );
            },
          ));
        },
      ),
    );
  }
}

class SimpleRoute extends PageRoute {
  SimpleRoute({
    @required this.name,
    @required this.title,
    @required this.builder,
  }) : super(
          settings: RouteSettings(name: name),
        );

  final String title;
  final String name;
  final WidgetBuilder builder;

  @override
  String get barrierLabel => null;

  @override
  bool get opaque => false;

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 0);

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return Title(
      title: title,
      color: Theme.of(context).primaryColor,
      child: builder(context),
    );
  }

  /// 页面切换动画
  @override
  Widget buildTransitions(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }

  @override
  Color get barrierColor => null;
}