Basic Navigation

Relax. We'll talk through this in plain words — no textbook voice.

A mobile app is rarely just one screen. You need to move between pages like Home, Detail, Profile, and Settings. In Flutter, Navigator manages the screen stack for you. push adds a new screen on top, and pop removes the current screen to go back.

dart

// First screen မှာ
ElevatedButton(
  child: const Text('Go to Details'),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const DetailScreen(),
      ),
    );
  },
)

// Detail screen မှာ
ElevatedButton(
  child: const Text('Go Back'),
  onPressed: () {
    Navigator.pop(context);
  },
)

You should see

Tapping "Go to Details" takes you to DetailScreen, and tapping "Go Back" returns you to the Home screen.

Next Steps

As your app gains more pages, learn Named Routes to manage them by route name.

Easy traps

Calling Navigator.push() from a context that isn't under a MaterialApp can cause route-related errors. Make sure MaterialApp sits at the root of your app.