Here we will how to do animation without any plugin in Flutter. We will use a low-level api RawDialogRoute.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
void _navigateToNewScreen(BuildContext context) {
Navigator.of(context).push(
RawDialogRoute(
pageBuilder: (context, animation, secondaryAnimation) {
return NewScreen();
},
barrierDismissible: false,
barrierColor: Colors.black54,
transitionDuration: const Duration(milliseconds: 600),
transitionBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(parent: animation, curve: Curves.easeOutBack),
),
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(1.0, 0.0), // Slide from right
end: Offset.zero,
).animate(
CurvedAnimation(parent: animation, curve: Curves.easeOut),
),
child: child,
),
),
);
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Enhanced RawDialogRoute')),
body: Center(
child: ElevatedButton(
onPressed: () => _navigateToNewScreen(context),
child: Text('Go to New Screen'),
),
),
);
}
}
class NewScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(title: Text('New Screen')),
body: Center(
child: ElevatedButton(
onPressed: () => Navigator.of(context).pop(),
child: Text('Go Back'),
),
),
);
}
}
RawDialogRoute in FlutterRawDialogRoute is a flexible, low-level class for creating custom modal routes. It provides several advantages over standard navigation methods like MaterialPageRoute or showDialog(), particularly when you need fine-grained control over transitions and behavior.
Custom Animations & Transitions
showDialog(), which uses predefined animations, RawDialogRoute allows full customization of enter and exit animations using transitionBuilder.Full-Screen or Partial Modal Support
showDialog() is mainly used for pop-ups, RawDialogRoute can be used for full-screen modals or custom dialogs that behave like new screens.Custom Dismiss Behavior
barrierDismissible: false prevents users from closing the dialog by tapping outside.Barrier Color Control
showDialog(), where the background dimming effect is fixed, RawDialogRoute lets you customize the barrier color and opacity.Lightweight & No Extra Overhead
RawDialogRoute doesn’t require MaterialPageRoute, making it useful for modals that don’t need an app bar or scaffold.Useful for Nested Navigation in Dialogs
RawDialogRoute gives you more control over transitions between these dialogs.RawDialogRoute?✔ Custom-designed pop-ups or modals with unique animations
✔ When showDialog()'s default animations are too restrictive
✔ For implementing fullscreen modals with smooth transitions
✔ When you need full control over dismiss behavior and barrier color
❌ For regular screen navigation—use MaterialPageRoute instead
❌ If you only need a simple popup—showDialog() is easier
