{"id":788,"date":"2025-09-30T12:28:18","date_gmt":"2025-09-30T12:28:18","guid":{"rendered":"https:\/\/sungaipuar.info\/wordpress\/?p=788"},"modified":"2025-09-30T12:28:18","modified_gmt":"2025-09-30T12:28:18","slug":"input-widget-dan-basic-form","status":"publish","type":"post","link":"https:\/\/sungaipuar.info\/wordpress\/input-widget-dan-basic-form\/","title":{"rendered":"Input Widget dan Basic Form"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Membuat Aplikasi Kalkulator yang dapat menjalankan operasi kabataku<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">link repository ini dapat diakses melalui link <a href=\"https:\/\/github.com\/ZakyAH123\/Pratikum-3-Aplikasi-Mobile.git\">berikut<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kalkulator yang dibuat merupakan kalkulator sederhana dengan <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Menggunakan 2 buah widget inputan (TextField atau TextFormField) untuk menerima nilai inputan.<\/li>\n\n\n\n<li>Menggunakan ElevatedButton untuk mengeksekusi operasi kabataku<\/li>\n\n\n\n<li>Menggunakan  widget Text untuk menampilkan hasil operasi<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Langkah-Langkah membuatnya:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat Bagian Utama (Main)<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>void main() {\n  runApp(const KalkulatorApp());\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat Class <code>KalkulatorApp<\/code> menggunakan Stateless Widget<\/li>\n\n\n\n<li>Kenapa menggunakan Stateless? karena ini hanya membungkus <code>MaterialApp<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>class KalkulatorApp extends StatelessWidget {\n  const KalkulatorApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      home: const KalkulatorPage(),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat class <code>KalkulatorPage<\/code> menggunakan StatefullWidget<\/li>\n\n\n\n<li>Karena nilai hasil bisa berubah-ubah, maka akan digunakan StatefulWidget.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>class KalkulatorPage extends StatefulWidget {\n  const KalkulatorPage({super.key});\n\n  @override\n  State&lt;KalkulatorPage> createState() => _KalkulatorPageState();\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Membuat Controller untuk Input User<\/li>\n\n\n\n<li>Karena user akan memasukkan 2 input maka dibuat 2 controller<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>final TextEditingController angka1Controller = TextEditingController();\nfinal TextEditingController angka2Controller = TextEditingController();\n\ndouble hasil = 0;\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>membuat logika kalkulator<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>void hitung(String operator) {\n  double angka1 = double.tryParse(angka1Controller.text) ?? 0;\n  double angka2 = double.tryParse(angka2Controller.text) ?? 0;\n\n  setState(() {\n    switch (operator) {\n      case '+':\n        hasil = angka1 + angka2;\n        break;\n      case '-':\n        hasil = angka1 - angka2;\n        break;\n      case 'x':\n        hasil = angka1 * angka2;\n        break;\n      case '\/':\n        hasil = angka2 != 0 ? angka1 \/ angka2 : 0; \/\/ hindari pembagian nol\n        break;\n    }\n  });\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>membuat tombol operasi<\/li>\n\n\n\n<li>dimana jika tombol operasi (+, -, \/, *) ditekan maka fungsi hitung akan dipanggil<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Widget tombolOperasi(String simbol) {\n  return ElevatedButton(\n    onPressed: () => hitung(simbol),\n    style: ElevatedButton.styleFrom(\n      backgroundColor: Colors.white,\n      foregroundColor: Colors.deepPurple,\n      shadowColor: Colors.grey,\n      shape: RoundedRectangleBorder(\n        borderRadius: BorderRadius.circular(30),\n      ),\n    ),\n    child: Text(simbol),\n  );\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>membuat tampilan UI<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    backgroundColor: const Color(0xFFF8F0FF), \/\/ warna background\n    appBar: AppBar(\n      title: const Text(\"hai\"),\n      backgroundColor: Colors.brown,\n    ),\n    body: Padding(\n      padding: const EdgeInsets.all(20),\n      child: Column(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: &#91;\n          const Text(\"Kalkulator\", ...),\n\n          \/\/ Input Angka Pertama\n          TextField(\n            controller: angka1Controller,\n            keyboardType: TextInputType.number,\n            decoration: const InputDecoration(\n              labelText: \"Angka Pertama\",\n              border: OutlineInputBorder(),\n            ),\n          ),\n\n          \/\/ Input Angka Kedua\n          TextField(\n            controller: angka2Controller,\n            keyboardType: TextInputType.number,\n            decoration: const InputDecoration(\n              labelText: \"Angka Kedua\",\n              border: OutlineInputBorder(),\n            ),\n          ),\n\n          \/\/ Baris Tombol\n          Row(\n            mainAxisAlignment: MainAxisAlignment.spaceAround,\n            children: &#91;\n              tombolOperasi(\"+\"),\n              tombolOperasi(\"-\"),\n              tombolOperasi(\"x\"),\n              tombolOperasi(\"\/\"),\n            ],\n          ),\n\n          \/\/ Hasil Perhitungan\n          const Text(\"Hasil:\", ...),\n          Text(\n            \"$hasil\", \/\/ menampilkan hasil perhitungan\n            style: const TextStyle(fontSize: 28, color: Colors.blue),\n          ),\n        ],\n      ),\n    ),\n  );\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Output<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"462\" height=\"554\" src=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/09\/image-18.png\" alt=\"\" class=\"wp-image-789\" style=\"width:750px;height:auto\" srcset=\"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/09\/image-18.png 462w, https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/09\/image-18-250x300.png 250w\" sizes=\"(max-width: 462px) 100vw, 462px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Membuat Aplikasi Kalkulator yang dapat menjalankan operasi kabataku link repository ini dapat diakses melalui link berikut Kalkulator yang dibuat merupakan [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":790,"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-788","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laporan"],"jetpack_featured_media_url":"https:\/\/sungaipuar.info\/wordpress\/wp-content\/uploads\/2025\/09\/icon.jpeg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/788","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=788"}],"version-history":[{"count":1,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/posts\/788\/revisions\/791"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/media\/790"}],"wp:attachment":[{"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sungaipuar.info\/wordpress\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}