To provide custom animations, I can either extend MaterialPageRoute or PageRouteBuilder and they both seem to do the same job. So, what's the difference between the two and which one should I use?

Here's the code snippet:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(
        onPressed: () => Navigator.push(context, Foo/BarRoute(Scaffold(appBar: AppBar()))),
        child: Text('Navigate'),
      ),
    );
  }
}

class FooRoute<T> extends MaterialPageRoute<T> {
  final Widget page;
  FooRoute(this.page) : super(builder: (_) => page);

  @override
  Widget buildTransitions(_, animation, __, ___) {
    return FadeTransition(opacity: animation, child: page);
  }
}

class BarRoute<T> extends PageRouteBuilder<T> {
  final Widget page;
  BarRoute(this.page) : super(pageBuilder: (_, __, ___) => page);

  @override
  Widget buildTransitions(_, animation, __, ___) {
    return FadeTransition(opacity: animation, child: page);
  }
}

The only difference I saw was on running the app on an iOS device where MaterialPageRoute tries to insert some iOSed type sliding animation in the background.