Navigate to a new screen in Flutter

In Flutter, navigating to a new screen is an essential feature that allows users to interact with different parts of your app. In this post, we’ll explore the various ways you can navigate to a new screen in Flutter.

The Basic Method: Using Navigator and MaterialPageRoute

The most basic method of navigating to a new screen involves using the `Navigator` widget along with the `MaterialPageRoute`. The following code snippet demonstrates this:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: const Text(
            'Navigate to a new screen >>',
            style: TextStyle(fontSize: 24.0),
          ),
          onPressed: () {
            _navigateToNextScreen(context);
          },
        ),
      ),
    );
  }

  void _navigateToNextScreen(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => NewScreen()));
  }
}

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('New Screen')),
      body: const Center(
        child: Text(
          'This is a new screen',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

This code snippet creates an app with two screens: `HomeScreen` and `NewScreen`. When the user presses the button on `HomeScreen`, it navigates to `NewScreen` using the `_navigateToNextScreen` function.

Loading new screens with Flutter’s pre-canned animations

Flutter provides various transition classes that can be used to load new screens with animations. For example, you can use the `OpenContainer` widget to transform one screen into another.

@override
Widget build(BuildContext context) {
  return Card(
    color: Colors.white,
    elevation: 2.0,
    child: OpenContainer(
      transitionType: ContainerTransitionType.fadeThrough,
      closedColor: Theme.of(context).cardColor,
      closedElevation: 0.0,
      openElevation: 4.0,
      transitionDuration: Duration(milliseconds: 1500),
      openBuilder: (BuildContext context, VoidCallback _) => THENEXTSCREEN(),
      closedBuilder: (BuildContext _, VoidCallback openContainer) {
        return ListTile(
          leading: Icon(Icons.album),
          title: Text("ITEM NAME"),
        );
      },
    ),
  );
}

This code snippet uses the `OpenContainer` widget to transform a card into another screen when pressed.

Shared Axis Transition

The shared axis transition is similar to that in Tab or Stepper. You can use the `PageTransitionSwitcher` along with a state to model transition between active and previous page.

@override
Widget build(BuildContext context) {
  return Consumer(
    builder: (context, state, child) {
      return PageTransitionSwitcher(
        duration: const Duration(milliseconds: 1500),
        reverse: !state.isFirstPage,
        transitionBuilder: (
          Widget child,
          Animation animation,
          Animation secondaryAnimation,
        ) {
          return SharedAxisTransition(
            child: child,
            animation: animation,
            secondaryAnimation: secondaryAnimation,
            transitionType: SharedAxisTransitionType.horizontal,
          );
        },
        child: state.isFirstPage? FIRSTPAGE() : SECONDPAGE(),
      );
    },
  );
}

This code snippet uses the `SharedAxisTransition` to switch between two pages.