#16 - Fade route in Flutter

Date: 2018-07-07 12:00 - dart

Route for navigator that applies fade between widgets. Ideal to use with Hero animations.

import 'package:flutter/material.dart';

class FadeRoute<T> extends MaterialPageRoute<T> {
  FadeRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    return new FadeTransition(opacity: animation, child: child);
  }
}

class SimpleFadeRoute<T> extends FadeRoute<T> {
  SimpleFadeRoute({ Widget child, RouteSettings settings })
      : super(builder: (_) => child, settings: settings);
}

Previous snippet | Next snippet