{"id":143,"date":"2025-09-25T01:42:06","date_gmt":"2025-09-25T01:42:06","guid":{"rendered":"https:\/\/nia.infokand23.my.id\/blog\/?p=143"},"modified":"2025-09-25T01:42:07","modified_gmt":"2025-09-25T01:42:07","slug":"pratikum-2","status":"publish","type":"post","link":"https:\/\/nia.infokand23.my.id\/blog\/pratikum-2\/","title":{"rendered":"Pratikum 2"},"content":{"rendered":"\n<p>Nama : Nia Ramadhani<\/p>\n\n\n\n<p>Nim      : 2311531006<\/p>\n\n\n\n<p>aplikasi mobile<\/p>\n\n\n\n<p><strong>PENDAHULUAN<\/strong><\/p>\n\n\n\n<p>Perkembangan teknologi mobile yang semakin pesat menuntut para pengembang perangkat lunak untuk menciptakan aplikasi yang tidak hanya fungsional tetapi juga memiliki antarmuka yang menarik, interaktif, dan dapat berjalan lintas platform dengan efisien. Salah satu solusi modern untuk memenuhi kebutuhan tersebut adalah <strong>Flutter<\/strong>, sebuah framework UI open-source yang dikembangkan oleh Google. Flutter memungkinkan pengembangan aplikasi untuk Android, iOS, web, dan desktop hanya dengan satu basis kode (single codebase), sehingga lebih hemat waktu dan biaya dalam proses pengembangan serta pemeliharaan aplikasi.<\/p>\n\n\n\n<p>Flutter menggunakan bahasa pemrograman <strong>Dart<\/strong>, yang dirancang untuk membangun antarmuka pengguna yang cepat dan responsif. Salah satu kekuatan utama Flutter terletak pada pendekatan deklaratif dalam membangun UI, yang berpusat pada konsep <strong>widget<\/strong>. Setiap elemen dalam Flutter, baik itu teks, tombol, gambar, maupun layout, dibangun dari widget. Oleh karena itu, memahami konsep widget merupakan langkah awal yang sangat krusial bagi siapa pun yang ingin mengembangkan aplikasi menggunakan Flutter.<\/p>\n\n\n\n<p>Terdapat dua jenis utama widget di Flutter, yaitu <strong>Stateless Widget<\/strong> dan <strong>Stateful Widget<\/strong>. Stateless Widget digunakan ketika tampilan UI tidak tergantung pada perubahan data, sedangkan Stateful Widget digunakan ketika UI perlu merespons perubahan data secara dinamis. Perbedaan mendasar antara keduanya sangat berpengaruh dalam desain dan arsitektur aplikasi, terutama dalam hal pengelolaan state atau kondisi aplikasi.<\/p>\n\n\n\n<p>Selain memahami konsep dasar widget, pengembang juga perlu menguasai penggunaan <strong>basic widgets<\/strong> seperti <code>Text<\/code>, <code>Image<\/code>, <code>Row<\/code>, <code>Column<\/code>, <code>Container<\/code>, <code>Button<\/code>, dan lain sebagainya. Widget-widget dasar ini menjadi fondasi dalam membangun struktur dan tampilan antarmuka yang lebih kompleks.<\/p>\n\n\n\n<p>Namun, sebelum mulai membangun aplikasi Flutter, langkah awal yang tidak kalah penting adalah melakukan <strong>setup environment<\/strong> Flutter pada perangkat pengembang. Proses ini meliputi instalasi Flutter SDK, pengaturan PATH environment, instalasi editor seperti Visual Studio Code atau Android Studio, serta pengaturan emulator atau perangkat fisik sebagai media pengujian aplikasi. Setup yang benar dan optimal akan mempermudah proses development, debugging, serta deployment aplikasi.<\/p>\n\n\n\n<p>Dengan latar belakang tersebut, pembahasan ini akan difokuskan pada bagaimana melakukan setup Flutter untuk pengembangan, memahami perbedaan Stateless dan Stateful Widget, serta mengenal berbagai basic widgets yang digunakan dalam membangun antarmuka pengguna aplikasi.<\/p>\n\n\n\n<p><strong>Tujuan Pratikum<\/strong><\/p>\n\n\n\n<p>1.Menjelaskan langkah-langkah dalam melakukan <strong>setup lingkungan pengembangan Flutter<\/strong> pada komputer.<\/p>\n\n\n\n<p>2.Memahami perbedaan antara <strong>Stateless Widget<\/strong> dan <strong>Stateful Widget<\/strong>, serta kapan penggunaannya tepat dalam pengembangan aplikasi.<\/p>\n\n\n\n<p>3.Mengenal dan mempraktikkan penggunaan <strong>basic widgets<\/strong> untuk membangun tampilan dasar aplikasi Flutter.<\/p>\n\n\n\n<p>4.Memberikan pemahaman praktis tentang struktur dasar aplikasi Flutter dan cara membangun antarmuka pengguna secara efisien.<\/p>\n\n\n\n<p><strong>LANGKAH PENGERJAAN<\/strong><\/p>\n\n\n\n<p>Install <strong>GIT<\/strong> dan konfigurasi sesuai wizard instalasi<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"35\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080436-1-1024x35.png\" alt=\"\" class=\"wp-image-145\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080436-1-1024x35.png 1024w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080436-1-300x10.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080436-1-768x27.png 768w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080436-1.png 1183w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Install <strong>Android Studio<\/strong> \u2014 agar bisa menggunakan Android SDK Manager &amp; emulator.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"69\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080459-1024x69.png\" alt=\"\" class=\"wp-image-146\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080459-1024x69.png 1024w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080459-300x20.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080459-768x52.png 768w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080459.png 1124w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Install <strong>Visual Studio Code<\/strong> dan tambahkan ekstensi Flutter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"35\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080505-1024x35.png\" alt=\"\" class=\"wp-image-147\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080505-1024x35.png 1024w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080505-300x10.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080505-768x26.png 768w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/Screenshot-2025-09-25-080505.png 1111w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Download \/ extract <strong>SDK Flutter<\/strong>, lalu tambahkan path SDK ke <strong>environment variables<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"911\" height=\"306\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image.png\" alt=\"\" class=\"wp-image-148\" style=\"width:423px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image.png 911w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-300x101.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-768x258.png 768w\" sizes=\"auto, (max-width: 911px) 100vw, 911px\" \/><\/figure>\n\n\n\n<p><strong>Periksa instalasi Flutter<\/strong><\/p>\n\n\n\n<p>Buka terminal \/ command prompt, jalankan perintah <code>flutter doctor<\/code>.<\/p>\n\n\n\n<p>Jika semua dependensi terpasang dengan benar, tampilan output akan menunjukkan status \u201call good\u201d atau menunjukkan apa yang masih kurang.<\/p>\n\n\n\n<p><strong>Buat proyek Flutter baru<\/strong><\/p>\n\n\n\n<p>Ketikkan <code>flutter create hai<\/code> di terminal untuk membuat proyek baru bernama \u201chai\u201d.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"908\" height=\"546\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-1.png\" alt=\"\" class=\"wp-image-149\" style=\"width:454px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-1.png 908w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-1-300x180.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-1-768x462.png 768w\" sizes=\"auto, (max-width: 908px) 100vw, 908px\" \/><\/figure>\n\n\n\n<p>Setelah itu masuk ke folder proyek dengan <code>cd hai<\/code>.<\/p>\n\n\n\n<p><strong>Jalankan proyek<\/strong><\/p>\n\n\n\n<p>Jalankan <code>flutter run<\/code> untuk menjalankan proyek ke emulator \/ perangkat fisik.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"584\" height=\"239\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-2.png\" alt=\"\" class=\"wp-image-150\" style=\"width:373px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-2.png 584w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-2-300x123.png 300w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<p>Pilih target perangkat bila diminta.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"401\" height=\"556\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-3.png\" alt=\"\" class=\"wp-image-151\" style=\"width:273px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-3.png 401w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-3-216x300.png 216w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/figure>\n\n\n\n<p><strong>Buka dan kelola proyek di VS Code<\/strong><\/p>\n\n\n\n<p>Buka proyek \u201chai\u201d di Visual Studio Code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"237\" height=\"678\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-4.png\" alt=\"\" class=\"wp-image-152\" style=\"width:148px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-4.png 237w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-4-105x300.png 105w\" sizes=\"auto, (max-width: 237px) 100vw, 237px\" \/><\/figure>\n\n\n\n<p><strong>Struktur folder proyek<\/strong><\/p>\n\n\n\n<p>ios \u2192 konfigurasi iOS (Info.plist, dll)<\/p>\n\n\n\n<p>test \u2192 untuk file testing<\/p>\n\n\n\n<p>pubspec.yaml \u2192 file konfigurasi proyek<\/p>\n\n\n\n<p>README.md \u2192 deskripsi &amp; petunjuk<\/p>\n\n\n\n<p>gitignore \u2192 atur file\/folder yang diabaikan oleh Git<\/p>\n\n\n\n<p><strong>Membuat widget stateless<\/strong><\/p>\n\n\n\n<p>Buat file baru di folder <code>lib<\/code> bernama <code>stateless.dart<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"663\" height=\"688\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-5.png\" alt=\"\" class=\"wp-image-153\" style=\"width:360px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-5.png 663w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-5-289x300.png 289w\" sizes=\"auto, (max-width: 663px) 100vw, 663px\" \/><\/figure>\n\n\n\n<p>Tulis kode widget stateless sesuai contoh.<\/p>\n\n\n\n<p>Jalankan \/ lihat hasilnya.<\/p>\n\n\n\n<p><strong>Membuat widget stateful<\/strong><\/p>\n\n\n\n<p>Buat file <code>statefull.dart<\/code> (biasanya <code>stateful.dart<\/code>) di folder <code>lib<\/code>.<\/p>\n\n\n\n<p>Tulis kode widget stateful sesuai contoh \u2014 widget yang bisa berubah ketika state berubah (misal ketika tombol ditekan, input berubah, dsb).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"856\" height=\"566\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-6.png\" alt=\"\" class=\"wp-image-154\" style=\"width:316px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-6.png 856w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-6-300x198.png 300w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-6-768x508.png 768w\" sizes=\"auto, (max-width: 856px) 100vw, 856px\" \/><\/figure>\n\n\n\n<p>Jalankan \/ lihat hasilnya.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"415\" height=\"499\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-7.png\" alt=\"\" class=\"wp-image-155\" style=\"width:237px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-7.png 415w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-7-249x300.png 249w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/figure>\n\n\n\n<p><strong>Menggunakan widget dasar (basic widget)<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"479\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-9.png\" alt=\"\" class=\"wp-image-157\" style=\"width:259px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-9.png 403w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-9-252x300.png 252w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<p>Gunakan widget seperti <strong>Text<\/strong>, <strong>Container<\/strong>, <strong>ElevatedButton<\/strong>, <strong>Icon<\/strong>, <strong>Image<\/strong>, <strong>CircleAvatar<\/strong>, dll untuk membuat antarmuka sederhana.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"356\" height=\"389\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-10.png\" alt=\"\" class=\"wp-image-158\" style=\"width:169px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-10.png 356w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-10-275x300.png 275w\" sizes=\"auto, (max-width: 356px) 100vw, 356px\" \/><\/figure>\n\n\n\n<p>Kombinasikan widget vertikal dan horizontal (Column, Row) sesuai tugas yang diberikan.<\/p>\n\n\n\n<p><strong>KESIMPULAN<\/strong><\/p>\n\n\n\n<p>Melalui praktikum ini dapat disimpulkan bahwa proses instalasi dan konfigurasi lingkungan kerja merupakan tahapan yang sangat penting agar Flutter dapat dijalankan dengan baik. Setelah semua tools berhasil dipasang, mahasiswa dapat memahami perbedaan mendasar antara widget stateless dan stateful. Widget stateless digunakan ketika tampilan bersifat statis dan tidak berubah akibat interaksi, sedangkan widget stateful digunakan untuk membangun tampilan yang dinamis dan mampu menyesuaikan diri terhadap perubahan data maupun input pengguna.<\/p>\n\n\n\n<p>Selain itu, penggunaan basic widget seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar memberikan gambaran nyata bagaimana elemen antarmuka dasar dibangun dalam aplikasi Flutter. Dengan memanfaatkan kombinasi layout vertikal (Column) dan horizontal (Row), tampilan aplikasi dapat diatur secara lebih fleksibel dan rapi. Tugas yang diberikan, baik dalam membuat layout sederhana maupun tampilan profil dengan memanfaatkan berbagai widget dasar, membantu memperkuat pemahaman konsep sekaligus melatih keterampilan praktis dalam merancang antarmuka aplikasi.<\/p>\n\n\n\n<p>Secara keseluruhan, praktikum ini memberikan pengalaman langsung yang tidak hanya memperdalam pemahaman teori, tetapi juga mengasah keterampilan teknis dalam membangun aplikasi Flutter. Hambatan kecil seperti pengaturan tata letak atau penyesuaian properti widget justru menjadi bagian penting dari proses pembelajaran yang memperkaya pemahaman mahasiswa terhadap pengembangan aplikasi mobile berbasis Flutter.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>TUGAS<\/strong><\/p>\n\n\n\n<p>1. Membuat tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"363\" height=\"499\" src=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-8.png\" alt=\"\" class=\"wp-image-156\" style=\"width:219px;height:auto\" srcset=\"https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-8.png 363w, https:\/\/nia.infokand23.my.id\/blog\/wp-content\/uploads\/2025\/09\/image-8-218x300.png 218w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/figure>\n\n\n\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n\n\n\n<p>void main() {<\/p>\n\n\n\n<p>runApp(const LayoutWidgetsApp());<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class LayoutWidgetsApp extends StatelessWidget {<\/p>\n\n\n\n<p>const LayoutWidgetsApp({super.key});<\/p>\n\n\n\n<p>@override<\/p>\n\n\n\n<p>Widget build(BuildContext context) {<\/p>\n\n\n\n<p>return const MaterialApp(<\/p>\n\n\n\n<p>debugShowCheckedModeBanner: false,<\/p>\n\n\n\n<p>home: LayoutWidgetsPage(),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class LayoutWidgetsPage extends StatelessWidget {<\/p>\n\n\n\n<p>const LayoutWidgetsPage({super.key});<\/p>\n\n\n\n<p>@override<\/p>\n\n\n\n<p>Widget build(BuildContext context) {<\/p>\n\n\n\n<p>return Scaffold(<\/p>\n\n\n\n<p>appBar: AppBar(<\/p>\n\n\n\n<p>title: const Text(&#8220;Vertical &amp; Horizontal Layout&#8221;),<\/p>\n\n\n\n<p>backgroundColor: Colors.teal,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>body: Center(<\/p>\n\n\n\n<p>child: Column(<\/p>\n\n\n\n<p>mainAxisAlignment: MainAxisAlignment.center,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Row(<\/p>\n\n\n\n<p>mainAxisAlignment: MainAxisAlignment.center,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: 80,<\/p>\n\n\n\n<p>height: 80,<\/p>\n\n\n\n<p>margin: const EdgeInsets.all(8),<\/p>\n\n\n\n<p>decoration: BoxDecoration(<\/p>\n\n\n\n<p>color: Colors.orange,<\/p>\n\n\n\n<p>borderRadius: BorderRadius.circular(12),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>child: const Icon(Icons.home, color: Colors.white, size: 40),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>const SizedBox(width: 20),<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: 80,<\/p>\n\n\n\n<p>height: 80,<\/p>\n\n\n\n<p>margin: const EdgeInsets.all(8),<\/p>\n\n\n\n<p>decoration: BoxDecoration(<\/p>\n\n\n\n<p>color: Colors.blue,<\/p>\n\n\n\n<p>borderRadius: BorderRadius.circular(12),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>child: const Icon(Icons.star, color: Colors.white, size: 40),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>const SizedBox(height: 30),<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: 250,<\/p>\n\n\n\n<p>padding: const EdgeInsets.all(16),<\/p>\n\n\n\n<p>decoration: BoxDecoration(<\/p>\n\n\n\n<p>color: Colors.green[100],<\/p>\n\n\n\n<p>borderRadius: BorderRadius.circular(12),<\/p>\n\n\n\n<p>border: Border.all(color: Colors.green, width: 2),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>child: Column(<\/p>\n\n\n\n<p>crossAxisAlignment: CrossAxisAlignment.center,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>const Text(<\/p>\n\n\n\n<p>&#8220;Tugas Flutter&#8221;,<\/p>\n\n\n\n<p>style: TextStyle(<\/p>\n\n\n\n<p>fontSize: 18,<\/p>\n\n\n\n<p>fontWeight: FontWeight.bold,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>const SizedBox(height: 10),<\/p>\n\n\n\n<p>const Text(&#8220;Contoh Layout Vertical + Horizontal&#8221;),<\/p>\n\n\n\n<p>const SizedBox(height: 10),<\/p>\n\n\n\n<p>ElevatedButton(<\/p>\n\n\n\n<p>onPressed: () {<\/p>\n\n\n\n<p>ScaffoldMessenger.of(context).showSnackBar(<\/p>\n\n\n\n<p>const SnackBar(content: Text(&#8220;Tombol ditekan&#8221;)),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>},<\/p>\n\n\n\n<p>child: const Text(&#8220;Klik Saya&#8221;),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>2. Memuat tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.<\/p>\n\n\n\n<p>import &#8216;package:flutter\/material.dart&#8217;;<\/p>\n\n\n\n<p>void main() {<\/p>\n\n\n\n<p>runApp(const ProfileApp());<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class ProfileApp extends StatelessWidget {<\/p>\n\n\n\n<p>const ProfileApp({super.key});<\/p>\n\n\n\n<p>@override<\/p>\n\n\n\n<p>Widget build(BuildContext context) {<\/p>\n\n\n\n<p>return const MaterialApp(<\/p>\n\n\n\n<p>debugShowCheckedModeBanner: false,<\/p>\n\n\n\n<p>home: ProfilePage(),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>class ProfilePage extends StatelessWidget {<\/p>\n\n\n\n<p>const ProfilePage({super.key});<\/p>\n\n\n\n<p>@override<\/p>\n\n\n\n<p>Widget build(BuildContext context) {<\/p>\n\n\n\n<p>return Scaffold(<\/p>\n\n\n\n<p>appBar: AppBar(<\/p>\n\n\n\n<p>title: const Text(&#8220;Profil Mahasiswa&#8221;),<\/p>\n\n\n\n<p>backgroundColor: const Color.fromARGB(150, 58, 146, 137),<\/p>\n\n\n\n<p>centerTitle: true,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>body: Row(<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Expanded(<\/p>\n\n\n\n<p>flex: 1,<\/p>\n\n\n\n<p>child: Center(<\/p>\n\n\n\n<p>child: CircleAvatar(<\/p>\n\n\n\n<p>radius: 80,<\/p>\n\n\n\n<p>backgroundColor: Colors.teal,<\/p>\n\n\n\n<p>child: ClipOval(<\/p>\n\n\n\n<p>child: Image.asset(<\/p>\n\n\n\n<p>&#8220;assets\/images\/kae.jpg&#8221;,<\/p>\n\n\n\n<p>fit: BoxFit.cover,<\/p>\n\n\n\n<p>width: 300,<\/p>\n\n\n\n<p>height: 300,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: 1,<\/p>\n\n\n\n<p>height: double.infinity,<\/p>\n\n\n\n<p>color: const Color.fromARGB(255, 173, 167, 167),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>Expanded(<\/p>\n\n\n\n<p>flex: 2,<\/p>\n\n\n\n<p>child: Padding(<\/p>\n\n\n\n<p>padding: const EdgeInsets.all(16),<\/p>\n\n\n\n<p>child: Column(<\/p>\n\n\n\n<p>mainAxisAlignment: MainAxisAlignment.center,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: double.infinity,<\/p>\n\n\n\n<p>padding: const EdgeInsets.all(16),<\/p>\n\n\n\n<p>decoration: BoxDecoration(<\/p>\n\n\n\n<p>color: const Color.fromARGB(255, 255, 223, 238),<\/p>\n\n\n\n<p>borderRadius: BorderRadius.circular(12),<\/p>\n\n\n\n<p>border: Border.all(<\/p>\n\n\n\n<p>color: const Color.fromARGB(255, 219, 81, 150),<\/p>\n\n\n\n<p>width: 2,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>child: const Column(<\/p>\n\n\n\n<p>crossAxisAlignment: CrossAxisAlignment.start,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Text(<\/p>\n\n\n\n<p>&#8220;Nama : Nia Ramadhani&#8221;,<\/p>\n\n\n\n<p>style: TextStyle(<\/p>\n\n\n\n<p>fontSize: 16, fontWeight: FontWeight.bold),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>SizedBox(height: 8),<\/p>\n\n\n\n<p>Text(&#8220;NIM : 2311531006&#8221;),<\/p>\n\n\n\n<p>SizedBox(height: 8),<\/p>\n\n\n\n<p>Text(&#8220;Jurusan : Informatika&#8221;),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>const SizedBox(height: 20),<\/p>\n\n\n\n<p>Container(<\/p>\n\n\n\n<p>width: double.infinity,<\/p>\n\n\n\n<p>padding: const EdgeInsets.all(16),<\/p>\n\n\n\n<p>decoration: BoxDecoration(<\/p>\n\n\n\n<p>color: Colors.green[50],<\/p>\n\n\n\n<p>borderRadius: BorderRadius.circular(12),<\/p>\n\n\n\n<p>border: Border.all(<\/p>\n\n\n\n<p>color: const Color.fromARGB(255, 33, 109, 92),<\/p>\n\n\n\n<p>width: 2,<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>child: const Column(<\/p>\n\n\n\n<p>crossAxisAlignment: CrossAxisAlignment.start,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Text(&#8220;Alamat : Jakarta, Sumatera Barat&#8221;),<\/p>\n\n\n\n<p>SizedBox(height: 8),<\/p>\n\n\n\n<p>Text(&#8220;No HP : 0888-0760-8714&#8221;),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>bottomNavigationBar: Padding(<\/p>\n\n\n\n<p>padding: const EdgeInsets.all(20),<\/p>\n\n\n\n<p>child: Column(<\/p>\n\n\n\n<p>mainAxisSize: MainAxisSize.min,<\/p>\n\n\n\n<p>children: [<\/p>\n\n\n\n<p>Row(<\/p>\n\n\n\n<p>mainAxisAlignment: MainAxisAlignment.center,<\/p>\n\n\n\n<p>children: const [<\/p>\n\n\n\n<p>Icon(Icons.email,<\/p>\n\n\n\n<p>color: Color.fromARGB(255, 253, 146, 205), size: 28),<\/p>\n\n\n\n<p>SizedBox(width: 8),<\/p>\n\n\n\n<p>Text(&#8220;syadirakaela@gmail.com&#8221;),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>const SizedBox(height: 20),<\/p>\n\n\n\n<p>ElevatedButton.icon(<\/p>\n\n\n\n<p>onPressed: () {<\/p>\n\n\n\n<p>ScaffoldMessenger.of(context).showSnackBar(<\/p>\n\n\n\n<p>const SnackBar(content: Text(&#8220;Profil disimpan&#8221;)),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>},<\/p>\n\n\n\n<p>icon: const Icon(Icons.save),<\/p>\n\n\n\n<p>label: const Text(&#8220;Simpan Profil&#8221;),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>],<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>),<\/p>\n\n\n\n<p>);<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<p>}<\/p>\n\n\n\n<ol class=\"wp-block-list\"><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Nama : Nia Ramadhani Nim : 2311531006 aplikasi mobile PENDAHULUAN Perkembangan teknologi mobile yang semakin pesat menuntut para pengembang perangkat lunak untuk menciptakan aplikasi yang tidak hanya fungsional tetapi juga memiliki antarmuka yang menarik, interaktif, dan dapat berjalan lintas platform dengan efisien. Salah satu solusi modern untuk memenuhi kebutuhan tersebut adalah Flutter, sebuah framework UI [&hellip;]<\/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-143","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/comments?post=143"}],"version-history":[{"count":1,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/143\/revisions"}],"predecessor-version":[{"id":159,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/posts\/143\/revisions\/159"}],"wp:attachment":[{"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/media?parent=143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/categories?post=143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nia.infokand23.my.id\/blog\/wp-json\/wp\/v2\/tags?post=143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}