{"id":793,"date":"2025-10-12T13:17:25","date_gmt":"2025-10-12T13:17:25","guid":{"rendered":"https:\/\/sungaipuar.info\/wordpress\/?p=793"},"modified":"2025-10-12T13:17:25","modified_gmt":"2025-10-12T13:17:25","slug":"navigation-routing-multiple-screen","status":"publish","type":"post","link":"https:\/\/sungaipuar.info\/wordpress\/navigation-routing-multiple-screen\/","title":{"rendered":"Navigation &amp; Routing : Multiple Screen"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">tugas ini dapat dilihat melalui link <a href=\"https:\/\/github.com\/ZakyAH123\/Pratikum-4-Aplikasi-Mobile.git\">github berikut<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Langkah Pengerjaan<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buat file dart baru dengan nama\u00a0<code>multipleScreen.dart<\/code>\u00a0di dalam folder lib<\/li>\n\n\n\n<li>Berikut kode untuk menampilkan tampilan multi screen<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nvoid main() => runApp(const MyNav());\n\nclass MyNav extends StatelessWidget {\n  const MyNav({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      \/\/ home: const HomePage(), \/\/ &lt;-- HAPUS BARIS INI\n      initialRoute: '\/',\n      routes: {\n        '\/': (context) => const HomePage(),\n        '\/product': (context) => const MyProduct(),\n      },\n    );\n  }\n}\n\n\/\/ HOME PAGE\nclass HomePage extends StatelessWidget {\n  const HomePage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Home Page')),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &#91;\n            ElevatedButton(\n              onPressed: () {\n                Navigator.push(\n                  context,\n                  MaterialPageRoute(\n                    builder: (context) =>\n                        const MyProfile(id: 101, name: \"laptop\"),\n                  ),\n                );\n              },\n              child: const Text('Go to Profile'),\n            ),\n            ElevatedButton(\n              onPressed: () {\n                Navigator.pushNamed(\n                  context,\n                  '\/product',\n                  arguments: {'id': 100, 'name': 'Laptop Gaming'},\n                );\n              },\n              child: const Text('Go to Product'),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n\/\/ MY PROFILE\nclass MyProfile extends StatelessWidget {\n  final int id;\n  final String name;\n\n  const MyProfile({super.key, required this.id, required this.name});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('My Profile')),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &#91;\n            Text('ID: $id', style: const TextStyle(fontSize: 20)),\n            Text('Name: $name', style: const TextStyle(fontSize: 20)),\n            const SizedBox(height: 20),\n            ElevatedButton(\n              onPressed: () {\n                Navigator.pop(context);\n              },\n              child: const Text('Back to Home'),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n\n\/\/ MY PRODUCT\n\nclass MyProduct extends StatelessWidget {\n  const MyProduct({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    final args =\n        ModalRoute.of(context)!.settings.arguments as Map&lt;String, dynamic>?;\n    final int id = args?&#91;'id'] ?? 0;\n    final String name = args?&#91;'name'] ?? 'Unknown';\n\n    return Scaffold(\n      appBar: AppBar(title: const Text('Product')),\n      body: Center(\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &#91;Text('Product ID: $id'), Text('Product Name: $name')],\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Widget Product Page<\/strong>: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna ke halaman produk detail page<\/li>\n\n\n\n<li><strong>Widget Produk Detail Page<\/strong>: menampilkan halaman produk dengan app bar dan tombol yang mengarahkan pengguna kembali ke halaman sebelumnya yaitu produk page<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Outputnya:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"643\" height=\"892\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image.png\" alt=\"\" class=\"wp-image-794\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image.png 643w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-216x300.png 216w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ketika tombol &#8220;go to profile&#8221; ditekan output akan menjadi:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"643\" height=\"892\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-1.png\" alt=\"\" class=\"wp-image-795\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-1.png 643w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-1-216x300.png 216w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>ketika tombol &#8220;go to product&#8221; ditekan:<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"643\" height=\"892\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-2.png\" alt=\"\" class=\"wp-image-796\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-2.png 643w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-2-216x300.png 216w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">LATIHAN<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Buatlah halaman login dan halaman utama, kemudian inputkan username dan password, Ketika diklik login akan berpindah ke halaman utama dengan mengirimkan data username dan password, tampilkan data tersebut pada halaman utama.<\/li>\n\n\n\n<li>Beberapa widget flutter telah menggunakan Konsep navigation dan routing seperti Tabs, Bottom Navigation Bar dan Drawer. Berikan contoh penerapan salah satu dari ketiga widget tersebut<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pada latihan ini saya membagi tugas ini menjadi 3 file dengan nama:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>main.dart<\/li>\n\n\n\n<li>login_page.dart<\/li>\n\n\n\n<li>home_page.dart<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">untuk main.dart kodingan sebagai berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\nimport 'login_page.dart'; \/\/ Pastikan nama file ini sesuai\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Aplikasi Login Flutter',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: const LoginPage(), \/\/ Halaman awal adalah LoginPage\n    );\n  }\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">untuk login_page.dart kodingan seperti berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\nimport 'home_page.dart'; \/\/ Pastikan nama file ini sesuai\n\nclass LoginPage extends StatefulWidget {\n  const LoginPage({super.key});\n\n  @override\n  State&lt;LoginPage> createState() => _LoginPageState();\n}\n\nclass _LoginPageState extends State&lt;LoginPage> {\n  \/\/ Controller untuk mengambil teks dari TextFormField\n  final TextEditingController _usernameController = TextEditingController();\n  final TextEditingController _passwordController = TextEditingController();\n\n  void _handleLogin() {\n    final String username = _usernameController.text;\n    final String password = _passwordController.text;\n\n    \/\/ Navigasi ke HomePage dan mengirim data menggunakan Navigator.push\n    Navigator.push(\n      context,\n      MaterialPageRoute(\n        builder: (context) => HomePage(\n          username: username,\n          password: password,\n        ),\n      ),\n    );\n  }\n\n  @override\n  void dispose() {\n    \/\/ Penting: Membuang controller saat widget dihapus\n    _usernameController.dispose();\n    _passwordController.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text('Halaman Login'),\n      ),\n      body: Padding(\n        padding: const EdgeInsets.all(16.0),\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.center,\n          children: &lt;Widget>&#91;\n            \/\/ Input Username\n            TextFormField(\n              controller: _usernameController,\n              decoration: const InputDecoration(\n                labelText: 'Username',\n                border: OutlineInputBorder(),\n              ),\n            ),\n            const SizedBox(height: 20),\n\n            \/\/ Input Password\n            TextFormField(\n              controller: _passwordController,\n              obscureText: true, \/\/ Untuk menyembunyikan teks password\n              decoration: const InputDecoration(\n                labelText: 'Password',\n                border: OutlineInputBorder(),\n              ),\n            ),\n            const SizedBox(height: 30),\n\n            \/\/ Tombol Login\n            ElevatedButton(\n              onPressed: _handleLogin,\n              child: const Text('Login'),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">dan untuk home_page.dart seperti berikut:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nclass HomePage extends StatelessWidget {\n  \/\/ Properti untuk menyimpan data yang dikirim dari halaman login\n  final String username;\n  final String password;\n\n  \/\/ Constructor untuk menerima data\n  const HomePage({\n    super.key,\n    required this.username,\n    required this.password,\n  });\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: const Text('Halaman Utama'),\n        \/\/ Tombol kembali (back) akan muncul otomatis\n      ),\n      body: Padding(\n        padding: const EdgeInsets.all(20.0),\n        child: Column(\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: &lt;Widget>&#91;\n            const Text(\n              'Selamat Datang di Halaman Utama!',\n              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),\n            ),\n            const SizedBox(height: 30),\n            \n            \/\/ Menampilkan data username\n            Text(\n              'Username Anda:',\n              style: TextStyle(fontSize: 16, color: Colors.grey&#91;700]),\n            ),\n            Text(\n              username,\n              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),\n            ),\n            const Divider(height: 30),\n\n            \/\/ Menampilkan data password\n            Text(\n              'Password Anda:',\n              style: TextStyle(fontSize: 16, color: Colors.grey&#91;700]),\n            ),\n            Text(\n              password,\n              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">OUTPUT AKAN SEPERTI BERIKUT:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>pertama pada halaman login dengan username: zaky dan password: hakim<\/li>\n\n\n\n<li>maka pada tampilan homepage akan keluar nama zaky hakim<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"892\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-3.png\" alt=\"\" class=\"wp-image-797\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-3.png 419w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-3-141x300.png 141w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>untuk tampilan home_page.dart<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"892\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-4.png\" alt=\"\" class=\"wp-image-798\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-4.png 419w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/10\/image-4-141x300.png 141w\" sizes=\"(max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>untuk membuat sebuah bottom navigation bar saya masih belum bisa<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>tugas ini dapat dilihat melalui link github berikut Langkah Pengerjaan LATIHAN Pada latihan ini saya membagi tugas ini menjadi 3 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-793","post","type-post","status-publish","format-standard","hentry","category-laporan"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/comments?post=793"}],"version-history":[{"count":1,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/793\/revisions"}],"predecessor-version":[{"id":799,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/793\/revisions\/799"}],"wp:attachment":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/media?parent=793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/categories?post=793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/tags?post=793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}