{"id":245,"date":"2025-09-21T07:37:02","date_gmt":"2025-09-21T07:37:02","guid":{"rendered":"https:\/\/devia.infokand23.my.id\/laprak1\/?p=245"},"modified":"2025-09-27T07:02:21","modified_gmt":"2025-09-27T07:02:21","slug":"laporan-praktikum-aplikasi-mobile-2","status":"publish","type":"post","link":"https:\/\/devia.infokand23.my.id\/laprak1\/laporan-praktikum-aplikasi-mobile-2\/","title":{"rendered":"LAPORAN PRAKTIKUM APLIKASI MOBILE 2"},"content":{"rendered":"\n<p class=\"has-text-color has-link-color has-medium-font-size wp-elements-357f7b70450c1c8c8f250873e3fc3377\" style=\"color:#066a81\"><em>Setup Flutter Development, Stateless &amp; Statefull Widget, Basic<br>Widgets<\/em><\/p>\n\n\n\n<a href=\"https:\/\/github.com\/deviapujiastuti\/Aplikasi-Mobile\/tree\/7d50042dee04eb7b12c55d8b21d2a94e8b4714fa\/praktikum2\/hai\/lib\" target=\"_blank\">\n  <i class=\"fab fa-github\"><\/i> GitHub\n<\/a>\n\n\n\n<div class=\"wp-block-group alignfull has-background-color has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-16c0760e24b11d67e5dafb4871ba7d71\" style=\"padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-container-core-group-is-layout-97875daf wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group alignwide is-content-justification-space-between is-layout-flex wp-container-core-group-is-layout-256aec57 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-layout-flex wp-block-group-is-layout-flex\"><\/div>\n\n\n\n<div class=\"wp-block-group is-layout-flex wp-block-group-is-layout-flex\"><nav class=\"is-responsive items-justified-right wp-block-navigation is-content-justification-right is-layout-flex wp-container-core-navigation-is-layout-3817c3ed wp-block-navigation-is-layout-flex\" aria-label=\"Navigation\" \n\t\t data-wp-interactive=\"core\/navigation\" data-wp-context='{\"overlayOpenedBy\":{\"click\":false,\"hover\":false,\"focus\":false},\"type\":\"overlay\",\"roleAttribute\":\"\",\"ariaLabel\":\"Menu\"}'><button aria-haspopup=\"dialog\" aria-label=\"Open menu\" class=\"wp-block-navigation__responsive-container-open\" \n\t\t\t\tdata-wp-on-async--click=\"actions.openMenuOnClick\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t><svg width=\"24\" height=\"24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\"><rect x=\"4\" y=\"7.5\" width=\"16\" height=\"1.5\" \/><rect x=\"4\" y=\"15\" width=\"16\" height=\"1.5\" \/><\/svg><\/button>\n\t\t\t\t<div class=\"wp-block-navigation__responsive-container\"  id=\"modal-1\" \n\t\t\t\tdata-wp-class--has-modal-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-class--is-menu-open=\"state.isMenuOpen\"\n\t\t\t\tdata-wp-watch=\"callbacks.initMenu\"\n\t\t\t\tdata-wp-on--keydown=\"actions.handleMenuKeydown\"\n\t\t\t\tdata-wp-on-async--focusout=\"actions.handleMenuFocusout\"\n\t\t\t\ttabindex=\"-1\"\n\t\t\t>\n\t\t\t\t\t<div class=\"wp-block-navigation__responsive-close\" tabindex=\"-1\">\n\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-dialog\" \n\t\t\t\tdata-wp-bind--aria-modal=\"state.ariaModal\"\n\t\t\t\tdata-wp-bind--aria-label=\"state.ariaLabel\"\n\t\t\t\tdata-wp-bind--role=\"state.roleAttribute\"\n\t\t\t>\n\t\t\t\t\t\t\t<button aria-label=\"Close menu\" class=\"wp-block-navigation__responsive-container-close\" \n\t\t\t\tdata-wp-on-async--click=\"actions.closeMenuOnClick\"\n\t\t\t><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z\"><\/path><\/svg><\/button>\n\t\t\t\t\t\t\t<div class=\"wp-block-navigation__responsive-container-content\" \n\t\t\t\tdata-wp-watch=\"callbacks.focusFirstElement\"\n\t\t\t id=\"modal-1-content\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div><\/nav>\n\n\n<a href=\"https:\/\/devia.infokand23.my.id\/about.html\" target=\"_blank\">Document<\/a>\n\n\n\n<a href=\"https:\/\/devia.infokand23.my.id\/index.html\" target=\"_blank\">Home<\/a>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-small-font-size\">Tujuan praktikum ini yaitu pengguna mampu menginstall lingkungan flutter development, stateless dan statefull widget dan basic widgets flutter :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-small-font-size\">Pengguna mampu menyiapkan lingkungan development flutter seperti install sdk-flutter, git, android SDK, IDE dll<\/li>\n\n\n\n<li class=\"has-small-font-size\">Pengguna mampu membuat stateless dan statefull widget flutter<\/li>\n\n\n\n<li class=\"has-small-font-size\">Pengguna mampu membuat contoh basic widgets flutter<\/li>\n<\/ul>\n\n\n\n<p class=\"has-small-font-size\">Alat yang digunakan<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-small-font-size\">IDE (Visual Studio Code)<\/li>\n\n\n\n<li class=\"has-small-font-size\">Laptop yang sudah terinstal GIT<\/li>\n<\/ul>\n\n\n\n<p>Langkah-langkah<\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>A. Instalasi Lingkungan Flutter<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">Install Visual Studio lewat link berikut&nbsp;<a href=\"https:\/\/visualstudio.microsoft.com\/downloads\/\"><code>Visual Studio<\/code><\/a>&nbsp;kemudian pada proses instalasinya centang pada bagian&nbsp;<strong>Desktop development with C++<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"852\" height=\"347\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-7.png\" alt=\"\" class=\"wp-image-259\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-7.png 852w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-7-300x122.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-7-768x313.png 768w\" sizes=\"auto, (max-width: 852px) 100vw, 852px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">Install Android Studio lewat link berikut&nbsp;<a href=\"https:\/\/developer.android.com\/studio#get-android-studio\"><code>Android Studio<\/code><\/a><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8-1024x517.png\" alt=\"\" class=\"wp-image-260\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8-1024x517.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8-300x151.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8-768x388.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8-1536x775.png 1536w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-8.png 1781w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">Install SDK-Flutter lewat link berikut&nbsp;<a href=\"https:\/\/docs.flutter.dev\/install\/manual\"><code>SDK-Flutter<\/code><\/a> (sesuai dengan pc masing masing)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"483\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9-1024x483.png\" alt=\"\" class=\"wp-image-261\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9-1024x483.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9-300x141.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9-768x362.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9-1536x724.png 1536w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-9.png 1893w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">Ekstrak hasil download tadi ke direktori yang diinginkan<\/p>\n\n\n\n<p class=\"has-small-font-size\">Tambahkan path (ditambah dengan \\bin) ke Environment control panel<\/p>\n\n\n\n<ul class=\"wp-block-list has-small-font-size\"><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10-1024x576.png\" alt=\"\" class=\"wp-image-264\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10-1024x576.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10-300x169.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10-768x432.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10-1536x863.png 1536w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-10.png 1918w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">Cek setup flutter development dengan mengetikkan perintah\u00a0<code>flutter doctor<\/code>\u00a0di dalam command prompt (disini instalasi android studio belum selesai sepenuhnya)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"276\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-18-194638-1024x276.png\" alt=\"\" class=\"wp-image-265\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-18-194638-1024x276.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-18-194638-300x81.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-18-194638-768x207.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-18-194638.png 1186w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-small-font-size\"><strong>B. Project Command Prompt<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">Buka command prompt lalu ketikkan perintah\u00a0<code>flutter create hai<\/code>\u00a0untuk membuat project flutter bernama hai<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115250-1024x375.png\" alt=\"\" class=\"wp-image-266\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115250-1024x375.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115250-300x110.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115250-768x281.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115250.png 1205w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Masuk ke dalam project yang dibuat tadi dengan\u00a0<code>cd hai<\/code>\u00a0lalu jalankan project dengan\u00a0<code>flutter run<\/code>\u00a0dan memilih dijalankan lewat Chrome<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"194\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115346-1024x194.png\" alt=\"\" class=\"wp-image-267\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115346-1024x194.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115346-300x57.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115346-768x145.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115346.png 1146w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"780\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115603-1024x780.png\" alt=\"\" class=\"wp-image-268\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115603-1024x780.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115603-300x228.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115603-768x585.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Cuplikan-layar-2025-09-17-115603.png 1290w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<!--nextpage-->\n\n\n\n<p class=\"has-small-font-size\"><strong>C. Project Visual Studio Code<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">Buka aplikasi visual studio code, pastikan ekstensi Flutter sudah ada di Visual Studio Code tersebut<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-11-1024x676.png\" alt=\"\" class=\"wp-image-270\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-11-1024x676.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-11-300x198.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-11-768x507.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-11.png 1490w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">Buat project bernama hai dengan cara membuka command pallete dengan shortcut\u00a0<strong>ctrl+shift+p<\/strong>\u00a0lalu ketik\u00a0<strong>Flutter: New Project > Application<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"368\" height=\"582\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-12.png\" alt=\"\" class=\"wp-image-272\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-12.png 368w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-12-190x300.png 190w\" sizes=\"auto, (max-width: 368px) 100vw, 368px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Stateless &amp; Statefull<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-small-font-size\">Stateless &#8211; widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"541\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13-1024x541.png\" alt=\"\" class=\"wp-image-273\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13-1024x541.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13-300x159.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13-768x406.png 768w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13-1536x812.png 1536w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-13.png 1919w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li class=\"has-small-font-size\">Statefull &#8211; widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input nilainya berubah.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1352\" height=\"721\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-14-edited.png\" alt=\"\" class=\"wp-image-275\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-14-edited.png 1352w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-14-edited-300x160.png 300w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-14-edited-1024x546.png 1024w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-14-edited-768x410.png 768w\" sizes=\"auto, (max-width: 1352px) 100vw, 1352px\" \/><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Basic Widget<\/h5>\n\n\n\n<p class=\"has-small-font-size\">Text &#8211; widget dasar yang digunakan untuk menampikan teks pada layer<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>const Text(\n                \"Hai i am Text Widget\",\n                style: TextStyle(\n                  fontSize: 14.0,\n                  color: Colors.red,\n                  fontWeight: FontWeight.bold,\n                  fontStyle: FontStyle.italic,\n                ),\n                textAlign: TextAlign.center,\n              ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"719\" height=\"985\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.34.29_b6b39a81.jpg\" alt=\"\" class=\"wp-image-277\" style=\"width:303px;height:auto\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.34.29_b6b39a81.jpg 719w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.34.29_b6b39a81-219x300.jpg 219w\" sizes=\"auto, (max-width: 719px) 100vw, 719px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">Container &#8211; widget yang berfungsi sebagai KOTAK yang dapat menampung satu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code> \/\/ Kotak biru\n              Container(\n                width: 200,\n                height: 200,\n                margin: const EdgeInsets.all(20),\n                padding: const EdgeInsets.all(20),\n                decoration: BoxDecoration(\n                  color: Colors.blueAccent,\n                  border: Border.all(color: Colors.white, width: 2),\n                  borderRadius: BorderRadius.circular(10),\n                ),\n                child: Column(\n                  mainAxisAlignment: MainAxisAlignment.center,\n                  children: &#91;\n                    const Text(\"Kelipatan 2 : \"),\n                    Text(\n                      '$_kelipatan',\n                      style: Theme.of(context).textTheme.headlineMedium,\n                    ),\n                  ],\n                ),\n              ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"983\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.37.00_480b4b00.jpg\" alt=\"\" class=\"wp-image-278\" style=\"width:319px;height:auto\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.37.00_480b4b00.jpg 720w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.37.00_480b4b00-220x300.jpg 220w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">ElevatedButton &#8211; widget yang mewakili tombol dan memiliki shadow<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>\/\/ ElevatedButton\n              ElevatedButton(\n                onPressed: () {\n                  print(\"tombol ditekan\");\n                },\n                style: ElevatedButton.styleFrom(\n                  backgroundColor: Colors.green,\n                  foregroundColor: Colors.white,\n                  padding: const EdgeInsets.all(20),\n                  shape: RoundedRectangleBorder(\n                    borderRadius: BorderRadius.circular(16),\n                  ),\n                ),\n                child: const Text(\"Elevated Button\"),\n              ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"182\" height=\"234\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.42.17_e809ac9b-edited-1.jpg\" alt=\"\" class=\"wp-image-281\" style=\"width:71px;height:auto\"\/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">Icon &#8211; widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>floatingActionButton: FloatingActionButton(\n          onPressed: _kelipatanDua,\n          tooltip: \"Kelipatan 2\",\n          child: const Icon(\n            Icons.add,\n            color: Colors.amber,\n            size: 50.0,\n          ),\n        ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"147\" height=\"201\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-21-pukul-11.50.47_eb7f344b-edited-1.jpg\" alt=\"\" class=\"wp-image-288\" style=\"width:89px;height:auto\"\/><\/figure><\/div>\n\n\n<ul class=\"wp-block-list has-small-font-size\">\n<li>Image NetworkImage &#8211; widget dasar yang digunakan untuk menampikan gambar dari jaringan internet<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code> Image.network(\n                \"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/0\/01\/Logo_Unand.svg\/600px-Logo_Unand.svg.png\",\n                width: 100,\n                height: 150,\n              ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"634\" height=\"667\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-16-edited.png\" alt=\"\" class=\"wp-image-290\" style=\"width:317px;height:auto\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-16-edited.png 634w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-16-edited-285x300.png 285w\" sizes=\"auto, (max-width: 634px) 100vw, 634px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">Untuk AssetsImage buatkan baris tambahan di dalam file\u00a0<code>pubspec.yaml<\/code>\u00a0menjadi seperti berikut, dan juga tambahkan folder\u00a0<code>assets\/image<\/code>\u00a0lalu upload foto yang ingin digunakan di dalam folder image<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code> assets:\n    - assets\/images\/devia.jpg<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"213\" height=\"225\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-17.png\" alt=\"\" class=\"wp-image-291\" style=\"width:128px;height:auto\"\/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">CircleAvatar &#8211; widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text(\"Statefull Widget\"),\n          backgroundColor: Colors.purple&#91;50],\n          actions: &#91;\n            Padding(\n              padding: const EdgeInsets.only(right: 40), \/\/ supaya tidak ketutup debug ribbon\n              child: Row(\n                children: &#91;\n                  CircleAvatar(\n                    radius: 18,\n                    backgroundColor: Colors.green,\n                    child: const Text(\n                      \"IF\",\n                      style: TextStyle(fontSize: 12, color: Colors.white),\n                    ),\n                  ),\n                  const SizedBox(width: 10),\n                  CircleAvatar(\n                    radius: 18,\n                    backgroundColor: Colors.blue,\n                    child: const Icon(\n                      Icons.person,\n                      color: Colors.white,\n                      size: 18,\n                    ),\n                  ),<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"193\" height=\"87\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/Gambar-WhatsApp-2025-09-27-pukul-13.51.52_e2fc498f.jpg\" alt=\"\" class=\"wp-image-293\" style=\"width:162px;height:auto\"\/><\/figure><\/div>\n\n\n<!--nextpage-->\n\n\n\n<p>LATIHAN<\/p>\n\n\n\n<p class=\"has-small-font-size\">Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan. > Berikut kode tampilan widget vertikal dan horizontal (min 3 elemen tiap tampilan)<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import 'package:flutter\/material.dart';\n\nvoid main() {\n  runApp(const MyProfileApp());\n}\n\nclass MyProfileApp extends StatelessWidget {\n  const MyProfileApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text(\"Profile Saya\"),\n          backgroundColor: Colors.blueAccent,\n        ),\n        body: Padding(\n          padding: const EdgeInsets.all(20),\n          child: Column(\n            crossAxisAlignment: CrossAxisAlignment.start, \n            children: &#91;\n              Row(\n                children: &#91;\n                  Container(\n                    width: 100,\n                    height: 100,\n                    decoration: BoxDecoration(\n                      shape: BoxShape.circle,\n                      image: const DecorationImage(\n                        image: AssetImage(\n                          \"assets\/images\/devia.jpg\", \n                        ),\n                        fit: BoxFit.cover,\n                      ),\n                      border: Border.all(color: Colors.blueAccent, width: 3),\n                    ),\n                  ),\n\n                  const SizedBox(width: 20),\n                 \n                  Column(\n                    crossAxisAlignment: CrossAxisAlignment.start,\n                    children: const &#91;\n                      Text(\n                        \"Devia Puji Astuti\",\n                        style: TextStyle(\n                          fontSize: 18,\n                          fontWeight: FontWeight.bold,\n                        ),\n                      ),\n                      Text(\"NIM: 1234567890\"),\n                    ],\n                  ),\n                ],\n              ),\n\n              const SizedBox(height: 20),\n\n              const Text(\n                \"Informasi Lengkap\",\n                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),\n              ),\n              const SizedBox(height: 10),\n\n              Row(\n                children: const &#91;\n                  Icon(Icons.home, color: Colors.blue),\n                  SizedBox(width: 10),\n                  Expanded(\n                    child: Text(\"Jl. Merpati No. 123, Padang, Sumbar\"),\n                  ),\n                ],\n              ),\n\n              const SizedBox(height: 10),\n\n              Row(\n                children: const &#91;\n                  Icon(Icons.phone, color: Colors.green),\n                  SizedBox(width: 10),\n                  Text(\"0812-3456-7890\"),\n                ],\n              ),\n\n              const SizedBox(height: 10),\n\n              Row(\n                children: const &#91;\n                  Icon(Icons.school, color: Colors.red),\n                  SizedBox(width: 10),\n                  Text(\"Informatika\"),\n                ],\n              ),\n            ],\n          ),\n        ),\n      ),\n    );\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"has-small-font-size\"><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"675\" height=\"990\" src=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-18.png\" alt=\"\" class=\"wp-image-294\" style=\"width:318px;height:auto\" srcset=\"https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-18.png 675w, https:\/\/devia.infokand23.my.id\/laprak1\/wp-content\/uploads\/2025\/09\/image-18-205x300.png 205w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/figure><\/div>\n\n\n<p class=\"has-small-font-size\">di sini saya menggunakan image yang secara langsung saya ambil dari &#8220;assetimage&#8221; yang berbentuk circle. selanjutnya untuk informasi lengkap saya menggunakan icon, berupa icon home, phone dan scholl. nah untuk melengkapi apa apa saja didalamnya dengan nama, nim dan keterangan lainnya saya menggunakan teks untuk sebagai keterangannya.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Setup Flutter Development, Stateless &amp; Statefull Widget, BasicWidgets GitHub Document Home Tujuan praktikum ini yaitu pengguna mampu menginstall lingkungan flutter development, stateless dan statefull widget dan basic widgets flutter : Alat yang digunakan Langkah-langkah A. Instalasi Lingkungan Flutter Install Visual Studio lewat link berikut&nbsp;Visual Studio&nbsp;kemudian pada proses instalasinya centang pada bagian&nbsp;Desktop development with C++ Install &hellip; <a href=\"https:\/\/devia.infokand23.my.id\/laprak1\/laporan-praktikum-aplikasi-mobile-2\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">LAPORAN PRAKTIKUM APLIKASI MOBILE 2<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-245","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/posts\/245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/comments?post=245"}],"version-history":[{"count":12,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/posts\/245\/revisions"}],"predecessor-version":[{"id":295,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/posts\/245\/revisions\/295"}],"wp:attachment":[{"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/media?parent=245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/categories?post=245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devia.infokand23.my.id\/laprak1\/wp-json\/wp\/v2\/tags?post=245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}