Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Kamran BekirovKamran Bekirov

Reach out if you want same care for your Flutter apps 🩵

Disable page transitions on web and desktop

CupertinoPageRoute and MaterialPageRoute animations belong to mobile. On your Flutter web app, they look cheap. The web is click and open, with no transition animation.

Set this in your theme:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
  
const PageTransitionsTheme appPageTransitionsTheme = PageTransitionsTheme(
  builders: {
    .android: kIsWeb 
      ? _NoPageTransitionsBuilder() 
      : ZoomPageTransitionsBuilder(),
    .iOS: kIsWeb 
      ? _NoPageTransitionsBuilder() 
      : CupertinoPageTransitionsBuilder(),
  
    .macOS: _NoPageTransitionsBuilder(),
    .windows: _NoPageTransitionsBuilder(),
    .linux: _NoPageTransitionsBuilder(),
    .fuchsia: _NoPageTransitionsBuilder(),
  },
);
  
class _NoPageTransitionsBuilder extends PageTransitionsBuilder {
  const _NoPageTransitionsBuilder();
 
  @override
  Duration get transitionDuration => Duration.zero;
  
  @override
  Duration get reverseTransitionDuration => Duration.zero;
  
  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return child;
  }
}

Then assign:

MaterialApp(
  theme: ThemeData(
    // ...your theme...
    pageTransitionsTheme: appPageTransitionsTheme,
  ),
);

Result on web:

That's the beauty of Material theme: context.push, context.pushNamed, and declarative routes all run through it. Nothing else to change.

Not using MaterialApp? Customize it at your router (go_router uses pageBuilder). The rule holds: native defaults on Android and iOS, even in a mobile browser, and no transition on web and desktop.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me