Flutter SizeTransition and PageRouteBuilder not working

Question

I am trying to get my list item to expand fullscreen. As per the material recommendation. PageRouterBuilder seems like the way to go, SlideTransition and ScaleTransition both worked well, but SizeTransition doesn't seems to work. When I clicked on the list item, the new page gets displayed straight away. I am expecting it to be clipped at start.

Code below.

Thanks in advance for the help!

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    timeDilation = 10.0;
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: new Text("Test Expand")),
      body: ListView(children: <Widget>[
        new ListTile(
            title: new Text("Todo 1"),
            onTap: () {
              _onTap(context, 1);
            }),
        new ListTile(
            title: new Text("Todo 2"),
            onTap: () {
              _onTap(context, 2);
            })
      ]),
    );
  }

  void _onTap(BuildContext context, int i) {
    Navigator.of(context).push(new PageRouteBuilder(pageBuilder:
            (BuildContext context, Animation animation,
                Animation secondaryAnimation) {
          return TaskPage(task: i);
        }, transitionsBuilder: (BuildContext context,
            Animation<double> animation,
            Animation<double> secondaryAnimation,
            Widget child) {
          return new SizeTransition(sizeFactor: animation, child: child);
        }));
  }
}

class TaskPage extends StatelessWidget {
  final int task;

  TaskPage({this.task});

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("Edit")),
        body: new Text("Task " + task.toString()));
  }
}

Answer 1

The root widget of your page is forced to fill the screen, for a simple reason: Flutter don't know how it should align a route that doesn't actually fill the screen.

So, to simplify things, it justs force a fill.

To solve that simply wrap your root widget into an Align:

PageRouteBuilder(
  transitionsBuilder: (context, animation, __, child) {
    return Align(
      child: SizeTransition(
        sizeFactor: animation,
        child: child,
      ),
    );
  },
),