Flutter SizeTransition и PageRouteBuilder не работают

Question

Я пытаюсь получить свой элемент списка, чтобы развернуть его в полноэкранном режиме.Согласно рекомендации материала.PageRouterBuilder кажется подходящим способом, SlideTransition и ScaleTransition оба работали хорошо, но SizeTransition, похоже, не работает.Когда я нажимаю на элемент списка, новая страница отображается сразу.Я ожидаю, что это будет обрезано в начале.

Код ниже.

Заранее спасибо за помощь!

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

Корневой виджет вашей страницы вынужден заполнять экран по простой причине: Flutter не знает, как он должен выравнивать маршрут, который фактически не заполняет экран.

Итак, чтобыупростить вещи, это просто принудительно заполнить.

Чтобы решить эту проблему, просто оберните ваш корневой виджет в Align:

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