Flight with Flutter: Chapter 4 – Navigation, Routing, and Animations

Navigation and animations give Flutter apps life. They allow users to move between screens, interact with dialogs, and enjoy smooth, expressive transitions. In this chapter, we’ll cover navigation, routing, dialogs, and animations—from simple to advanced.

A. Navigation and Routing

In Flutter, navigation is handled with the Navigator class. Each screen (or “route”) is a widget. You can push new routes onto the stack, and pop them to go back.

1. Basic Navigation

// HomeScreen.dart
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const DetailScreen()),
    );
  },
  child: const Text('Go to Details'),
);

// DetailScreen.dart
ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Back'),
);

2. Named Routes

For larger apps, it’s better to define named routes in MaterialApp and navigate by name:

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => const HomeScreen(),
      '/details': (context) => const DetailScreen(),
    },
  ));
}

// Navigate by name:
Navigator.pushNamed(context, '/details');

3. Passing Data Between Screens

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailScreen(data: 'Hello'),
  ),
);

// In DetailScreen:
final String data;
DetailScreen({required this.data});

B. Modals and Dialogs

Flutter makes it easy to show dialogs, modals, and bottom sheets with built-in functions:

// Alert dialog
showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: const Text('Title'),
    content: const Text('This is a dialog!'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: const Text('OK'),
      ),
    ],
  ),
);

// Bottom sheet
showModalBottomSheet(
  context: context,
  builder: (context) => const Text('This is a bottom sheet'),
);

C. Animations in Flutter

Animations make your app feel alive. Flutter offers two approaches: implicit and explicit.

1. Implicit Animations

Implicit animations handle transitions for you—just change a property and Flutter animates the difference.

AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: isBig ? 200 : 100,
  height: isBig ? 200 : 100,
  color: isBig ? Colors.blue : Colors.red,
  child: const FlutterLogo(size: 75),
)

Toggle isBig with setState to see the animation.

2. Explicit Animations

Explicit animations give you full control with AnimationController and tweens.

class FadeInDemo extends StatefulWidget {
  const FadeInDemo({super.key});
  @override
  State<FadeInDemo> createState() => _FadeInDemoState();
}

class _FadeInDemoState extends State<FadeInDemo>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: _controller,
      child: const Text('Animated!'),
    );
  }
}

3. Hero Animations

Hero animations create smooth transitions of shared elements between screens:

// On first screen
Hero(
  tag: 'profile-pic',
  child: Image.network('https://...'),
);

// On second screen
Hero(
  tag: 'profile-pic',
  child: Image.network('https://...'),
);

D. Best Practices

• Use named routes for clarity in larger apps.
• Use implicit animations for most UI updates.
• Switch to explicit animations when you need fine-grained control.
• Hero animations are perfect for smooth page transitions.
• For complex apps, explore Navigator 2.0 for advanced use cases.

Further Reading

• Passing data with Navigator | Flutter docs
• Animations overview | Flutter docs
• Flutter Animations Tutorial | GeeksforGeeks

Key Takeaways

• Navigation allows users to move between screens and share data.
• Dialogs and bottom sheets are easy to implement with built-in functions.
• Implicit animations simplify transitions, while explicit animations give full control.
• Hero animations create engaging, smooth transitions between screens.

Next Up: Building and Deploying Your First Real App

In Chapter 5 of Flight with Flutter, we’ll bring it all together by building and deploying your first real Flutter app to production.