Flutter Ui 实验室（一）模态弹窗

一. Modal Page
效果图

代码如下：
main.dart

import 'package:flutter/material.dart';
import 'package:flutter_ui_demo/page/modal_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter UI Demo',
      theme: ThemeData(primaryColor: Colors.blue),
      routes: <String, WidgetBuilder>{
        '/modalpage': (BuildContext context) => new ModalPage(),
      },
      home: MyHomePage(title: 'Flutter UI Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Modal 弹窗'),
          onPressed: () => {
                // 使用这种 pushNamed 的方式没有效果
                // Navigator.of(context).pushNamed('/modalpage')
                
                // Navigator.of(context).push(TutorialOverlay()),

                // Navigator.of(context).push(PageRouteBuilder(
                //   opaque: false,
                //   pageBuilder: (BuildContext context, _, __) =>
                //       ModalPage())
                // ),

                Navigator.of(context).push(PageRouteBuilder(
                    opaque: false,
                    pageBuilder: (BuildContext context, Animation animation,
                            Animation secondaryAnimation) =>
                        FadeTransition(
                            //使用渐隐渐入过渡,
                            opacity: animation,
                            child: ModalPage()))),
              },
        ),
      ),
    );
  }
}

modal_page.dart

import 'package:flutter/material.dart';

class ModalPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text('Modal 弹窗'),
      // ),
      backgroundColor: Colors.black.withOpacity(0.65),
      body: Container(
        // color: Colors.brown,
        padding: EdgeInsets.only(bottom: 30),
        child: Align(
          alignment: Alignment.bottomCenter,
          child: RaisedButton(
            child: Text('返回'),
            onPressed: () => {
              Navigator.of(context).pop('')
            },
          ),
        ),
      ),
    );
  }
}

class TutorialOverlay extends ModalRoute<void> {
  @override
  Duration get transitionDuration => Duration(milliseconds: 500);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.5);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: SafeArea(
        child: _buildOverlayContent(context),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'This is a nice overlay',
            style: TextStyle(color: Colors.white, fontSize: 30.0),
          ),
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('Dismiss'),
          )
        ],
      ),
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}