{"id":3094,"date":"2022-08-27T17:25:58","date_gmt":"2022-08-27T17:25:58","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=3094"},"modified":"2023-03-21T06:26:01","modified_gmt":"2023-03-21T06:26:01","slug":"tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/","title":{"rendered":"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Flutter adalah framework yang memungkinkan untuk membuat aplikasi multi platform namun hanya dalam satu kode base (cross platform). Jadi sangat memungkinkan kita dapat membuat aplikasi dengan tampilan dan <em>layout<\/em> yang berbeda, jika kamu tahu konsep web responsive, dimana tampilan website akan beradaptasi berdasarkan ukuran screen (layar browser), Flutter juga bisa seperti itu. Tetapi ada salah satu kelebihan flutter lain, aplikasi kamu bisa mempunyai layout yang berbeda tergantung platform mana aplikasi kamu jalankan. Bisa saja aplikasi desktop windows akan berbeda dengan di Mac. Cukup menggunakan satu <em>source code<\/em> saja, sehingga pengembangan aplikasi lebih cepat. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-demo-implementasi-responsive-flutter\">Demo Implementasi Responsive Flutter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Flutter memungkinkan setiap platform akan berbeda tampilannya, di IOS, di Android, di MacOS, Windows. Coba perhatikan video ini:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"boombox-responsive-embed \"><iframe title=\"Responsive Flutter Development\" width=\"1160\" height=\"870\" src=\"https:\/\/www.youtube.com\/embed\/bLyMXnL6II4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Saya buat aplikasi ini dalam satu source code { whatsnako adalah aplikasi chat yang hilarious }, Ketika ukuran dimensi width dibawah 650 tampilan aplikasi menampilkan tabview. Dan ukuran tabview akan nge-pas dengan perangkat mobile. Tipsnya adalah menentukan layout mana yang akan digunakan untuk ukuran width mobile device, lalu aplikasi flutter akan menyesuaikan (responsive) dengan perangkat sebagai host.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-34.png\" alt=\"Flutter Make Application have different style in multiple platform\" class=\"wp-image-3104\" width=\"259\" height=\"436\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-34.png 518w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-34-178x300.png 178w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-34-360x606.png 360w\" sizes=\"(max-width: 259px) 100vw, 259px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Namun layout device minimum rata-rata adalah 360 pixel, apa yang terjadi ketika ukuran lebar layout diturunkan bahkan hingga 100 pixel? teks akan mengisi ruang kosong kebawah sehingga tampilannya jadi jelek. Sebagai developer kamu harusnya bisa mengatisipasi case seperti ini. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-35.png\" alt=\"\" class=\"wp-image-3107\" width=\"100\" height=\"504\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\" id=\"solution-if-constrain-too-small-flutter\">Kondisi ini akan menimbulkan masalah layout ketika aplikasi flutter didebug  seperti error <strong>RenderBox was not laid out<\/strong>. Solusinya dengan melakukan wrapping widget dengan sizedbox dengan ukuran yang fixed.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Sizedbox(\n width: your_fixed_size,\n \/\/\n)\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Kalau kamu lihat video diatas, ketika ukuran lebar device dibuat minimum, layout akan dibuat &#8220;not responsive&#8221; tetapi bisa discroll untuk menjangkau daerah layout yang terpotong. Untuk tampilan aplikasi desktop, kamu bisa lihat layout tabview hilang dan diganti dengan desain seperti ini.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large nako-centered-images\"><img decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-1024x485.png\" alt=\"Make Flutter Apps Responsive and different in cross-platform\" class=\"wp-image-3110\" srcset=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-1024x485.png 1024w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-300x142.png 300w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-768x364.png 768w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-1536x728.png 1536w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-360x171.png 360w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-545x258.png 545w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36-1600x758.png 1600w, https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/image-36.png 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Bagaimana caranya, yuk simak.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-snippet-kode-untuk-deteksi-platform-aplikasi-flutter-berjalan-membuat-aplikasi-flutter-bisa-cross-platform\">Snippet Kode untuk Deteksi Platform Aplikasi Flutter Berjalan, membuat aplikasi flutter bisa cross platform!<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk ini kamu bisa gunakan boolean untuk eksekusi Screen widget mana yang akan dipakai pada OS tertentu pada saat projek fluttermu jalan. Contoh yang cukup jelas bisa dilihat di <a href=\"https:\/\/stackoverflow.com\/questions\/45924474\/how-do-you-detect-the-host-platform-from-dart-code\" target=\"_blank\" rel=\"noopener nofollow\" title=\"sini\">sini<\/a>. Dan ini adalah kode snippetnya. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if (kIsWeb) {\n    doSomething(\"For Web\");\n} else {\n  if (Platform.isAndroid) {\n    doSomething(\"For Android\");\n  } else if (Platform.isIOS) {\n    doSomething(\"For IOS\");\n  } else if (Platform.isLinux) {\n    doSomething(\"For Linux\");\n  } else if (Platform.isMacOS) {\n    doSomething(\"For Mac\");\n  } else if (Platform.isWindows) {\n    doSomething(\"For Windows\");\n  }\n}<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\" id=\"block-89a82167-40b5-4ab5-acbb-2918f544b6f0\"><\/p>\n\n\n<p><em data-rich-text-format-boundary=\"true\">Platform.isAndroid<\/em> dan <em>if<\/em> lainnya akan menghasilkan nilai true dan false. Namun pada snippet kode diatas, akan menjalankan kode didalam statemen if yang mempunyai value <strong>true<\/strong>. Misal compiling aplikasi terdeteksi berupa web, maka kisWeb == true sehingga jalankan kode dalam statemen tersebut.<\/p>\n<p><\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tutorial-membuat-aplikasi-flutter-responsive\">Tutorial Membuat Aplikasi Flutter Responsive <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sederhananya untuk membuat aplikasi flutter responsif adalah dengan membagi layout menjadi beberapa golongan tergantung pada <strong>lebar<\/strong> layar device.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hey nakama koding, untuk kodenya seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class ResponsiveHelper {\n\n  static bool isMobilePhone() {\n    if (!kIsWeb) {\n      return true;\n    }else {\n      return false;\n    }\n  }\n\n  static bool isWeb() {\n    return kIsWeb;\n  }\n\n  static bool isConstraintRange(BoxConstraints constraint, range){\n    if (constraint.maxWidth &lt; range) {\n      return true;\n    }  else{\n      return false;\n    }\n  }\n\n  static bool isMobile(context) {\n    final size = MediaQuery.of(context).size.width;\n    if (size &lt;= 650 || !kIsWeb) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  static bool isTab(context) {\n    final size = MediaQuery\n        .of(context)\n        .size\n        .width;\n    if (size &lt; 1300 &amp;&amp; size &gt;= 650) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n\n  static bool isDesktop(context) {\n    final size = MediaQuery\n        .of(context)\n        .size\n        .width;\n    if (size &gt;= 1300) {\n      return true;\n    } else {\n      return false;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Logika pemrogramannya adalah, memisahkan layout berdasarkan tiga kategori:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Kategori isDesktop: Yaitu jika ukuran presentasi device berada diatas 1300, maka diasumsikan layar desktop<\/li>\n\n\n\n<li>Kategori isTab: Jika ukuran presentasi device berada diantara 650 hingga 1300 maka diasumsikan layar tablet<\/li>\n\n\n\n<li>Kategori isMobile jika presentasi device dibawah 650 pixel maka dianggap layar mobile. <\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-implementasi-flutter-penerapan-kode-responsive-helper\">Implementasi Flutter: Penerapan Kode Responsive Helper<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kelas responsive helper ini mempunyai banyak boolean static sehingga fungsi dapat langsung dipanggil dan tidak perlu melakukan inisialisasi. Oke, kita akan menjelaskan bagaimana kode ini diimplementasikan:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Buat terlebih dahulu flutter jika menggunakan command, sintaksnya <code data-enlighter-language=\"generic\" class=\"EnlighterJSRAW\">flutter create --org com.package_name project_name<\/code><\/li>\n\n\n\n<li>Buat kode responsive helper (Salin kode diatas)<\/li>\n\n\n\n<li>Lalu buat kelas widget ScreenOptions, tujuannya untuk memilih screen yang akan ditampilkan, terapkan layoutbuilder dalam <code data-enlighter-language=\"dart\" class=\"EnlighterJSRAW\">Widget build(BuildContext context)<\/code><\/li>\n\n\n\n<li>Didalam layout builder inilah yang akan mengerjakan logic untuk membangun layout berdasarkan if statement. Buat if logic berdasarkan platfrom sesuai yang kamu mau.<\/li>\n\n\n\n<li>Jika kamu ingin membuat layout yang responsive cukup inisialisasi widget tersebut dalam masing-masing if statement.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Berikut ini adalah contoh penerapannya:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class ScreenOptions extends StatefulWidget {\n  final Widget mobileScreenLayout;\n  final Widget webScreenLayout;\n  final Widget minimalScreenLayout;\n\n  const ScreenOptions(\n      {Key? key,\n      required this.mobileScreenLayout,\n      required this.webScreenLayout, required this.minimalScreenLayout})\n      : super(key: key);\n\n  @override\n  State&lt;ScreenOptions&gt; createState() =&gt; _ScreenOptionsState();\n}\n\nclass _ScreenOptionsState extends State&lt;ScreenOptions&gt; {\n\n  @override\n  void initState() {\n    super.initState();\n    init();\n  }\n\n  init() async {\n    \/\/\n  }\n\n  @override\n  void setState(fn) {\n    if (mounted) super.setState(fn);\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return LayoutBuilder(builder: (context, constraints) {\n      if (ResponsiveHelper.isDesktop(context) || ResponsiveHelper.isTab(context)) {\n        return widget.webScreenLayout;\n      } else if (constraints.maxWidth &lt;= 360) {\n        return widget.minimalScreenLayout;\n      }\n      else {\n        return widget.mobileScreenLayout;\n      }\n    });\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Untuk mempermudah kelas mempunyai 3 parameter yang kita namakan <strong>webScreenLayout, minimalScreenLayout, mobileScreenLayout<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-penjelasan-screenoptions-bagaimana-widget-menghasilkan-layout-yang-berbeda-di-tiap-platform\">Penjelasan ScreenOptions, bagaimana Widget menghasilkan layout yang berbeda di tiap platform<\/h2>\n\n\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-4fc3f8e1 wp-block-group-is-layout-flex\">\n<p class=\"wp-block-paragraph\">webscreenlayout menyimpan parameter layout khusus untuk &#8220;browser&#8221; jika ukuran presentasi dengan kriteria lebar media diatas 1300 (isDesktop) <em>atau <\/em>650 hingga 1300 (isTab).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">minimalScreenlayout untuk ukuran lebar aplikasi sama dengan dibawah 360 px. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Jika tidak maka tampilkan screen untuk mobile.<\/p>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Kita panggil deh <code data-enlighter-language=\"dart\" class=\"EnlighterJSRAW\">ScreenOptions <\/code>ke dalam alamat routing, maupun body \/ child widget .<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cara nya seperti ini jika merupakan anak widget:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        body: Container(\n          height: context.height(),\n            decoration: BoxDecoration(\n              color: WhatsNakoColor.sidebarColor,\n              border: Border(\n                right: BorderSide(\n                  color: const Color(0xffcfd0d3).withOpacity(.3)\n                )\n              )\n            ),\n            child: ScreenOptions(mobileScreenLayout: YourMobileLayout(), minimalScreenLayout: YourMinimalScreenLayout(), webScreenLayout: YourWebLayout(),)),<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bagaimana dengan routing? caranya persis seperti diatas. Misal kita menggunakan material routing.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>InkWell(\n                      onPressed: () =&gt; Navigator.push(context, ScreenOptions(mobileScreenLayout: YourMobileLayout(), minimalScreenLayout: YourMinimalScreenLayout(), webScreenLayout: YourWebLayout()\nchild: Container()\n                    ),<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-tambahan-solusi-untuk-layout-dengan-ukuran-layar-terlalu-kecil-menggunakan-flutter\">Tambahan: Solusi untuk layout dengan ukuran layar terlalu kecil menggunakan FLutter<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nah mungkin ada case dimana Constraint Perangkat terlalu kecil, jika memang tidak bisa dibuat layout yang baik, kamu buat saja ukuran layout mu tetap, jadi meskipun layar perangkat lebarnya 250 pixel, aplikasimu akan tetap memiliki ukuran lebar minimal 350 pixel. Drawbacknya tampilan aplikasi akan terpotong karena terlalu besar, untuk ini kamu bisa akali dengan wrap layout dengan Scroll widget, sehingga daerah yang tidak terjangkau layar bisa diakses dengan cara <em>scroll<\/em>. Berikut ini snippet kode untuk minimalScreenLayout (perhatikan kode yang di <em>highlight<\/em>). <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class MinimalScreenCondition extends StatelessWidget {\n  const MinimalScreenCondition({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return SingleChildScrollView(\n      scrollDirection: Axis.horizontal,\n      child: SizedBox(\n        width: 360,\n        child: DefaultTabController(\n          length: 3,\n          child: Scaffold(\n            appBar: AppBar(\n              elevation: 0,\n              backgroundColor: WhatsNakoColor.appBarColor,\n              centerTitle: false,\n              title: const Text(\n                APPS_NAME,\n                style: TextStyle(\n                  fontSize: 20,\n                  color: Colors.grey,\n                  fontWeight: FontWeight.bold,\n                ),\n              ),\n              actions: &#91;\n                IconButton(\n                  icon: const Icon(Icons.search, color: Colors.grey),\n                  onPressed: () {},\n                ),\n                IconButton(\n                  icon: const Icon(Icons.more_vert, color: Colors.grey),\n                  onPressed: () {},\n                ),\n              ],\n              bottom: const TabBar(\n                indicatorColor: WhatsNakoColor.tabColor,\n                indicatorWeight: 4,\n                labelColor: WhatsNakoColor.tabColor,\n                unselectedLabelColor: Colors.grey,\n                labelStyle: TextStyle(\n                  fontWeight: FontWeight.bold,\n                ),\n                tabs: &#91;\n                  Tab(\n                    text: 'CHATS',\n                  ),\n                  Tab(\n                    text: 'STATUS',\n                  ),\n                  Tab(\n                    text: 'CALLS',\n                  ),\n                ],\n              ),\n            ),\n            body: Container(\n              width: 360,\n              decoration: BoxDecoration(\n                image: DecorationImage(\n                  colorFilter: ColorFilter.mode(\n                      WhatsNakoColor.sidebarColor.withOpacity(0.3),\n                      BlendMode.dstATop),\n                  image: const AssetImage(WhatsNakoImage.bgThanks),\n                  fit: BoxFit.cover,\n                ),\n              ),\n              height: double.maxFinite,\n              child: const TabBarView(\n                children: &#91;\n                  ContactListFragment(),\n                  ViewStatusFragment(),\n                  ViewCallsFragment(),\n                ],\n              ),\n            ),\n          ),\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Oke, mungkin itu saja Tutorial membuat aplikasi responsive menggunakan flutter, semoga bisa menjadi referensi untuk kamu dalam belajar flutter. Tetaplah Nako kawan. Jangan lupa lihat<a href=\"https:\/\/sunaonako.my.id\/blog\/category\/software-development\/mobile-development\/\" target=\"_blank\" rel=\"noopener\" title=\" tutorial mobile development bahasa indonesia\"> tutorial mobile development <\/a>juga, mungkin kamu akan tertarik.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kata kunci: Flutter: Bagaimana jika ukuran layar device terlalu kecil? Membuat aplikasi flutter mempunyai desain yang berbeda di tiap platform<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flutter adalah framework yang memungkinkan untuk membuat aplikasi multi platform namun hanya dalam satu kode base (cross platform). Jadi sangat memungkinkan kita dapat membuat aplikasi dengan tampilan dan layout yang berbeda, jika kamu tahu konsep web responsive, dimana tampilan website akan beradaptasi berdasarkan ukuran screen (layar browser), Flutter juga bisa seperti itu. Tetapi ada salah&#8230;<\/p>\n","protected":false},"author":2,"featured_media":3114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254,728],"tags":[727,255,726],"class_list":["post-3094","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","category-software-development","tag-crossplatform","tag-flutter","tag-multiplatform-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.8 (Yoast SEO v23.8) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cara buat Aplikasi Responsive dan Cross Platfom Flutter<\/title>\n<meta name=\"description\" content=\"Penerapan Kode Dart &amp; Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter\" \/>\n<meta property=\"og:description\" content=\"Penerapan Kode Dart &amp; Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-27T17:25:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-21T06:26:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"nakomin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"nakomin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter\",\"datePublished\":\"2022-08-27T17:25:58+00:00\",\"dateModified\":\"2023-03-21T06:26:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\"},\"wordCount\":789,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png\",\"keywords\":[\"crossplatform\",\"flutter\",\"multiplatform development\"],\"articleSection\":[\"Mobile Development\",\"Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\",\"name\":\"Cara buat Aplikasi Responsive dan Cross Platfom Flutter\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png\",\"datePublished\":\"2022-08-27T17:25:58+00:00\",\"dateModified\":\"2023-03-21T06:26:01+00:00\",\"description\":\"Penerapan Kode Dart & Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif\",\"breadcrumb\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png\",\"width\":1200,\"height\":675},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/sunaonako.my.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/sunaonako.my.id\/#website\",\"url\":\"https:\/\/sunaonako.my.id\/\",\"name\":\"Hilarious Developer School\",\"description\":\"Catatan Developer tentang Kurikulum Dunia Modern\",\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/sunaonako.my.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\",\"name\":\"nakomin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"contentUrl\":\"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png\",\"width\":\"250\",\"height\":\"250\",\"caption\":\"nakomin\"},\"logo\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/\"},\"description\":\"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever\",\"sameAs\":[\"https:\/\/sunaonako.my.id\"],\"url\":\"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cara buat Aplikasi Responsive dan Cross Platfom Flutter","description":"Penerapan Kode Dart & Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/","og_locale":"en_US","og_type":"article","og_title":"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter","og_description":"Penerapan Kode Dart & Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif","og_url":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/","og_site_name":"Hilarious Developer School","article_published_time":"2022-08-27T17:25:58+00:00","article_modified_time":"2023-03-21T06:26:01+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png","type":"image\/png"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter","datePublished":"2022-08-27T17:25:58+00:00","dateModified":"2023-03-21T06:26:01+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/"},"wordCount":789,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png","keywords":["crossplatform","flutter","multiplatform development"],"articleSection":["Mobile Development","Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/","url":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/","name":"Cara buat Aplikasi Responsive dan Cross Platfom Flutter","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png","datePublished":"2022-08-27T17:25:58+00:00","dateModified":"2023-03-21T06:26:01+00:00","description":"Penerapan Kode Dart & Flutter agar aplikasi dari flutter responsive menyesuaikan device platfrom aplikasi. Belajar implementasi Flutter kode agar responsif","breadcrumb":{"@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2022\/08\/Flutter-Responsive-and-Crossplatfrom-in-single-source-code-implementation.png","width":1200,"height":675},{"@type":"BreadcrumbList","@id":"https:\/\/sunaonako.my.id\/blog\/tutorial-flutter-membuat-aplikasi-responsive-dan-cross-platform-di-flutter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sunaonako.my.id\/"},{"@type":"ListItem","position":2,"name":"Tutorial Flutter Membuat aplikasi responsive dan Cross-Platform di Flutter"}]},{"@type":"WebSite","@id":"https:\/\/sunaonako.my.id\/#website","url":"https:\/\/sunaonako.my.id\/","name":"Hilarious Developer School","description":"Catatan Developer tentang Kurikulum Dunia Modern","publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sunaonako.my.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a","name":"nakomin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/","url":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","contentUrl":"https:\/\/cdn.sunaonako.my.id\/aruuploads\/2021\/07\/Minimalist-Letter-Initial-Logo.png","width":"250","height":"250","caption":"nakomin"},"logo":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/image\/"},"description":"Believe at the heart of BNRS Here you will find content about developers needs whether it\u2019s coding tutorials or the lifestyle of employee in the IT circle, understanding of the realm of ui\/ux and futuristic tech for free in one place. Don\u2019t forget to follow the nakotek socials to give the author enthusiasm in pioneering this website. #wahahaforever","sameAs":["https:\/\/sunaonako.my.id"],"url":"https:\/\/sunaonako.my.id\/tomodachi\/nakomin\/"}]}},"_links":{"self":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3094","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/comments?post=3094"}],"version-history":[{"count":1,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3094\/revisions"}],"predecessor-version":[{"id":3649,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/3094\/revisions\/3649"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/3114"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=3094"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=3094"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=3094"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}