Navigation dan routing memiliki fungsi untuk menentukan bagaimana alur atau mekanisme peralihan dari suatu screen ke screen lainnya. Misalnya dari splash screen ke halaman login, dari halaman login ke home page, dst.

Langkah yang pertama :

• Pertama adalah membuat sebuah project baru dengen nama project sesuai kebutuhan dan keinginan kita masing-masing
• Buat lah sebuah class Stateless bisa kita menggunakan Statelesswidget atau Statefullwidget disini saya menggunakan Statelesswidget

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

• Buatlah sebuah button pada flutter, button di flutter memiliki beberapa elemen seperti material button, elevatedbutton, textbutton, iconbutton, dan lai sebagainya. disini saya menggunakan materialbutton

return Scaffold(
  body: Center(
    child: Column(
      children: [
        MaterialButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => PageSatu()));
          },
          child: Text("Page 1"),
          color: Colors.redAccent,
        ),
        MaterialButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => PageKedua()));
          },
          child: Text("Page 2"),
          color: Colors.orange,
        ),
        MaterialButton(
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => PageKetiga()));
          },
          child: Text("Page 3"),
          color: Colors.green,
        )
      ],
    ),
  ),
);

• Selanjutnya kita membuat sebuah page selanjutnya

class _PageSatuState extends State<PageSatu> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Page 1"),
      ),
    );
  }
}

class PageKedua extends StatefulWidget {
  const PageKedua({Key? key}) : super(key: key);

  @override
  State<PageKedua> createState() => _PageKeduaState();
}

class _PageKeduaState extends State<PageKedua> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Page 2"),
      ),
    );
  }
}

class PageKetiga extends StatefulWidget {
  const PageKetiga({Key? key}) : super(key: key);

  @override
  State<PageKetiga> createState() => _PageKetigaState();
}

class _PageKetigaState extends State<PageKetiga> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Page Ketiga"),
      ),
    );
  }
}

• Selesai