{"id":4292,"date":"2020-08-21T08:38:08","date_gmt":"2020-08-21T08:38:08","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=4292"},"modified":"2021-06-03T09:28:45","modified_gmt":"2021-06-03T09:28:45","slug":"membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","title":{"rendered":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird"},"content":{"rendered":"

Pengertian Hummingbird<\/h1>\n

Pada bulan Desember 2018, Google sebagai pengembang Flutter mengumumkan versi yang dapat di jalankan sebagai sebuah web atau yang disebut dengan proyek Hummingbird. Pada acara Google IO 2019<\/strong>, diumumkan kabar baik tentang rilisnya Flutter Web versi technical preview <\/em>dari project Flutter Hummingbird<\/em>.<\/p>\n

Humminbird memiliki sebuah arsitektur seperti yang di bawah ini :<\/p>\n

\"\"<\/p>\n

Bisa dilihat untuk menjalankan proyek Flutter sebagai sebuah website, dibutuhkan core atau inti dari Flutter untuk melakukan drawing pada lapisan teratas standar browser API. Menggunakan kombinasi dari DOM, Canvas, dan CSS, Flutter dapat menyediakan sebuah sistem yang memiliki kualitas tinggi,\u00a0portable<\/span><\/em> dan pengalaman pengguna pada setiap browser modern.<\/span><\/p>\n

Secara teknis, dibutuhkan kompiler khusus untuk melakukan kompilasi inti dari Flutter dan framework yang berada di dalam project ke dalam sebuah berkas tunggal yang dapat\u00a0di-deploy<\/em>\u00a0<\/span>ke web server apapun.<\/span><\/p>\n

Prinsip Kerja Flutter Web<\/strong><\/h1>\n

Prinsip kerja Flutter Mobile dan Desktop, yaitu :<\/p>\n

\"\"<\/p>\n

Secara garis besar hanya perlu fokus pada bagian paling atas saja. Bagian itu merupakan kode-kode program dari aplikasi. Kemudian yang di bawahnya merupakan Flutter Engine<\/strong> untuk membangun aplikasi kita.<\/p>\n

Jadi bisa disimpulkan :<\/p>\n

    \n
  1. Ngoding menggunakan bahasa pemrograman Dart.<\/li>\n
  2. Flutter akan build ke platform yang dituju menggunakan enginenya.<\/li>\n<\/ol>\n

    Sedangkan tugas dari platform-spesific embeder<\/strong> yaitu membungkus aplikasi yang dibuat agar bisa dijalankan di berbagai platform seperti Linux, Windows, Mac OS, dan Google Chrome.<\/p>\n

    Kasus di atas hanya fokus ke Flutter Desktop, gimana kalau Flutter Web mirip ?<\/p>\n

    \"\"<\/p>\n

    Flutter menggunakan Dart2js<\/strong> untuk mengcompile script yang dibuat di Flutter ke Javascript. Sehingga, Flutter dapat dijalankan pada browser.<\/p>\n

    Alurnya seperti dibawah ini :<\/p>\n

    \"\"<\/p>\n

    Proyek Web Flutter<\/span><\/h1>\n

    Sebelum membuat proyek<\/span> perlu mengaktifkan terlebih dahulu fitur web untuk Flutter. Karena untuk saat ini, fitur tersebut masih dalam tahap pengembangan. Artinya perlu berpindah dari channel stable ke channel beta. Berikut langkah-langkahnya :<\/span><\/p>\n

      \n
    • Buka terminal atau command prompt dan jalankan perintah berikut untuk berpindah dari channel stable ke channel beta :
      \n\n\n\n
      \n
      \n
      1<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      flutter <\/span>channel <\/span><\/span>beta<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
    • Jika tidak terdapat eror, lanjutkan dengan perintah berikut untuk upgrade Flutter SDK :
      \n\n\n\n
      \n
      \n
      1<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      flutter <\/span>upgrade<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
    • Setelah selesai bisa langsung mengaktifkan fitur dukungan web dengan perintah berikut :
      \n\n\n\n
      \n
      \n
      1<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      flutter <\/span>config<\/span> --<\/span>enable<\/span>-<\/span>web<\/span><\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n
    • Untuk memastikan apakah fitur dukungan web sudah aktif, jalankan perintah flutter devices<\/strong><\/em> pada terminal. Dapat melihat beberapa perangkat yang terkoneksi untuk digunakan seperti berikut :
      \n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      2<\/span> connected <\/span><\/span>device<\/span>:<\/span>\r\n\r\nWeb <\/span>Server<\/span> \u2022 web<\/span>-<\/span>server<\/span> \u2022 web<\/span>-<\/span>javascript<\/span> \u2022 Flutter <\/span>Tools<\/span><\/span>\r\nChrome<\/span>\u00a0\u00a0\u00a0\u00a0 <\/span>\u2022 chrome<\/span>\u00a0\u00a0\u00a0\u00a0 <\/span>\u2022 web<\/span>-<\/span>javascript<\/span> \u2022 Google <\/span>Chrome<\/span> 81.0.4044.129<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<\/ul>\n
      Sampai saat ini sudah bisa membuat proyek baru seperti biasanya dan menjalankannya langsung pada browser. Jalankan perintah berikut pada terminal untuk mencobanya :<\/p>\n
      \n
      \n\n\n\n
      \n
      \n
      1<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      flutter <\/span>run<\/span> -<\/span>d<\/span> chrome<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
      Tunggu hingga proses kompilasi selesai dan jendela baru\u00a0chrome<\/span><\/em>\u00a0terbuka. Kurang lebih akan seperti ini tampilannya:<\/span><\/p>\n
      \"\"<\/p>\n
      Responsive Widget<\/span><\/h1>\n
      Dalam mengembangkan sebuah website, salah satu yang perlu diperhitungkan adalah seberapa responsive website tersebut terhadap perubahan yang terjadi khususnya pada perubahan tampilan. Lalu bagaimana memenuhi kebutuhan tersebut pada proyek Flutter yang notabene. Serahkan semuanya pada widget MediaQuery<\/span><\/strong>\u00a0dan\u00a0LayoutBuilder<\/span><\/strong>!<\/span><\/p>\n
      Membuat kelas helper<\/span> yang akan menampung beberapa informasi terkait ukuran lebar browser seperti berikut :<\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      import<\/span> 'package:flutter\/material.dart<\/span>'<\/span>;<\/span>\r\n\r\nclass<\/span><\/strong><\/span> ScreenHelper <\/span>{<\/span>\r\nstatic <\/span>bool<\/span><\/strong> isSmallScreen<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> <=<\/span> 600<\/span>;<\/span>\r\n}<\/span>\r\n\r\nstatic<\/span><\/span> bool<\/span> isNormalScreen<\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>return<\/span><\/strong> MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> ><\/span> 600<\/span> &&<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> <=<\/span> 900<\/span>;<\/span>\r\n}<\/span>\r\n\r\nstatic<\/span><\/span> bool<\/span><\/strong> isMediumScreen<\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> ><\/span> 900<\/span> &&<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> <=<\/span> 1300<\/span>;<\/span>\r\n}<\/span>\r\n\r\nstatic<\/span><\/span> bool<\/span><\/strong> isLargeScreen<\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>return<\/span><\/strong> MediaQuery<\/span>.<\/span>of<\/span>(<\/span>context<\/span>)<\/span>.<\/span>size<\/span>.<\/span>width<\/span> ><\/span> 1300<\/span>;<\/span>\r\n}<\/span>\r\n\r\nstatic<\/span><\/span> String<\/span><\/strong> screenType<\/span>(<\/span>BuildContex<\/span>t <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>if<\/span><\/strong> (<\/span>isSmallScreen<\/span>(<\/span>context<\/span>)<\/span>)<\/span> return<\/span><\/strong> \"Small Screen\"<\/span>;<\/span>\r\n\u00a0\u00a0 <\/span>if<\/span><\/strong> (<\/span>isNormalScreen<\/span>(<\/span>context<\/span>)<\/span>)<\/span> return<\/span><\/strong> \"Normal Screen\"<\/span>;<\/span>\r\n\u00a0\u00a0 <\/span>if<\/span><\/strong> (<\/span>isMediumScreen<\/span>(<\/span>context<\/span>)<\/span>)<\/span> return<\/span><\/strong> \"Medium Screen\"<\/span>;<\/span>\r\n\u00a0\u00a0 <\/span>if<\/span> <\/strong>(<\/span>isLargeScreen<\/span>(<\/span>context<\/span>)<\/span>)<\/span> return<\/span><\/strong> \"Large Screen\"<\/span>;\r\n\r\n<\/span> \u00a0 <\/span>return<\/span><\/strong> \"undefined\"<\/span>;<\/span>\r\n}<\/span><\/pre>\n
      }<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Jika diperhatikan setiap fungsi yang pada kode di atas terdapat penggunaan MediaQuery<\/span><\/strong>\u00a0untuk mendapatkan informasi ukuran lebar browser dan disesuaikan dengan ketentuan ukuran responsive.<\/span><\/p>\n
      Membuat custom<\/span>\u00a0widget\u00a0GridView<\/span><\/strong>\u00a0dimana\u00a0gridCount<\/span><\/strong><\/em>-nya akan menyesuaikan masing-masing ukuran responsive. Dimulai dengan membuat berkas Dart baru dan lengkapi kodenya seperti di bawah ini :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> GridViewResponsive<\/span> extends<\/span><\/strong> StatefulWidget<\/span> {<\/span>\r\n@<\/span>override<\/span>\r\n_GridViewResponsiveState <\/span><\/span>createState<\/span>(<\/span>)<\/span> =<\/span>><\/span> _GridViewResponsiveState<\/span><\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nclass<\/span><\/strong><\/span> _GridViewResponsiveState<\/span> extends<\/span><\/strong> State<\/span><<\/span>GridViewResponsive<\/span>><\/span><\/span> {<\/span>\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>return<\/span><\/strong> Container<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Fokus pada kelas\u00a0GridViewResponsive<\/span><\/strong>, tambahkan beberapa properti ukuran dan daftar widget yang akan disematkan pada properti\u00a0children<\/span><\/strong><\/em>\u00a0dari widget\u00a0GridView<\/strong>\u00a0<\/span>seperti berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong><\/span> GridViewResponsive<\/span> extends<\/span><\/strong> StatefulWidge<\/span>t<\/span> {<\/span>\r\n\r\nfinal<\/span><\/span> List<\/span><<\/span>Widget<\/span>><\/span> children<\/span>;<\/span>\r\n\r\nfinal<\/span><\/span> int<\/span><\/strong> smallScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> normalScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> mediumScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> largerScreenGridCount<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\n_GridViewResponsiveState <\/span>createState<\/span><\/span>(<\/span>)<\/span> =<\/span>><\/span> _GridViewResponsiveState<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Maka akan mendapati eror di beberapa properti yang sudah ditambahkan. Mengatasinya dengan menambahkan constructor<\/span><\/em> untuk menetapkan nilai dari beberapa properti tersebut seperti berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> GridViewResponsive<\/span> extends<\/span><\/strong> StatefulWidget<\/span> {<\/span>\r\n\r\nfinal<\/span><\/span> List<\/span><<\/span>Widget<\/span>><\/span> children<\/span>;<\/span>\r\n\r\nfinal<\/span><\/span> int<\/span><\/strong> smallScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> normalScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> mediumScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong> largerScreenGridCount<\/span>;<\/span>\r\n\r\nconst<\/span><\/span> GridViewResponsive<\/span>(<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>{<\/span>Key <\/span>key<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>smallScreenGridCount<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>normalScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>mediumScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>largerScreenGridCount<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>@<\/span>required <\/span>this<\/span>.<\/span>children<\/span>}<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>:<\/span> super<\/span><\/strong>(<\/span>key<\/span>:<\/span> key<\/span>)<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\n_GridViewResponsiveState <\/span>createState<\/span><\/span>(<\/span>)<\/span> =<\/span>><\/span> _GridViewResponsiveState<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Fokus pada kelas _GridViewResponsiveState<\/span><\/strong>. Di sini akan menyesuaikan sedikit kode didalamnya dengan menggunakan widget LayoutBuilder<\/span><\/strong>\u00a0dan\u00a0GridView<\/span><\/strong> tentunya. Ubah isi dari fungsi build()<\/span><\/strong> menjadi seperti berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> _GridViewResponsiveState<\/span> extends<\/span><\/strong> State<\/span><<\/span>GridViewResponsive<\/span><\/span>><\/span> {<\/span>\r\n\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>return<\/span><\/strong> LayoutBuilder<\/span>(<\/span>builder<\/span>:<\/span> (<\/span>context<\/span>,<\/span> constraints<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>int<\/span><\/strong> gridCount<\/span> =<\/span> 2<\/span><\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>return<\/span><\/strong> GridView<\/span>.<\/span>count<\/span>(<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>crossAxisCount<\/span>:<\/span> gridCount<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>children<\/span>:<\/span> widget<\/span>.<\/span>children<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>;<\/span>\r\n\u00a0\u00a0 <\/span>}<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      GridCount<\/span><\/strong><\/em> masih bernilai statis yang artinya tidak dapat menyesuaikan perubahan yang berakibat tidak responsive-nya halaman. Lantas bagaimana menentukan nilainya agar bisa dinamis? Bisa menggunakan cara tradisional yaitu dengan menentukannya menggunakan if statement<\/span><\/em> seperti berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> _GridViewResponsiveState<\/span> extends<\/span><\/strong> State<\/span><<\/span>GridViewResponsive<\/span>><\/span><\/span> {<\/span>\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0 <\/span>return<\/span><\/strong> LayoutBuilder<\/span>(<\/span>builder<\/span>:<\/span> (<\/span>context<\/span>,<\/span> constraints<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>int<\/span><\/strong> gridCount<\/span> =<\/span> 2<\/span><\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>if<\/span> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 600<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>smallScreenGridCount<\/span> ?<\/span>?<\/span> 2<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span> if<\/span><\/strong> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> ><\/span> 600<\/span> &&<\/span> constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 900<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>normalScreenGridCount<\/span> ?<\/span>?<\/span> 4<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span> if<\/span><\/strong> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> ><\/span> 900<\/span> &&<\/span> constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 1200<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>mediumScreenGridCount<\/span> ?<\/span>?<\/span> 6<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span><\/strong> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>largerScreenGridCount<\/span> ?<\/span>?<\/span> 8<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>}<\/span>\r\n\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>return<\/span><\/strong> GridView<\/span>.<\/span>count<\/span>(<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>crossAxisCount<\/span>:<\/span> gridCount<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>children<\/span>:<\/span> widget<\/span>.<\/span>children<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>;<\/span>\r\n\u00a0\u00a0 <\/span>}<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Berkas Dart yang sudah disesuaikan kode di dalamnya akan seperti di bawah ini :<\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      import<\/span> 'package:flutter\/material.dart'<\/span>;<\/span>\r\n\r\nclass<\/span><\/strong><\/span> GridViewResponsive<\/span> extends<\/span><\/strong> StatefulWidget<\/span> {<\/span>\r\nfinal<\/span><\/span> List<\/span><<\/span>Widget<\/span>><\/span> children<\/span>;<\/span>\r\n\r\nfinal<\/span><\/span> int<\/span><\/strong> smallScreenGridCount<\/span>;\r\n<\/span>final<\/span> int<\/span><\/strong><\/span> normalScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong><\/span> mediumScreenGridCount<\/span>;<\/span>\r\nfinal<\/span> int<\/span><\/strong><\/span> largerScreenGridCount<\/span>;<\/span>\r\n\r\nconst<\/span><\/span> GridViewResponsive<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>{<\/span>Key <\/span>key<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>smallScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>normalScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>mediumScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>this<\/span><\/strong>.<\/span>largerScreenGridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>@<\/span>required <\/span>this<\/span><\/strong>.<\/span>children<\/span>}<\/span>)<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>:<\/span> super<\/span><\/strong>(<\/span>key<\/span>:<\/span> key<\/span>)<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\n_GridViewResponsiveState <\/span>createStat<\/span>e<\/span>(<\/span>)<\/span> =<\/span>><\/span> _GridViewResponsiveState<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nclass<\/span><\/strong><\/span> _GridViewResponsiveState<\/span> extends<\/span><\/strong> State<\/span><<\/span>GridViewResponsive<\/span>><\/span><\/span> {<\/span>\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> LayoutBuilder<\/span>(<\/span>builder<\/span>:<\/span> (<\/span>context<\/span>,<\/span> constraints<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>int<\/span><\/strong> gridCount<\/span> =<\/span> 2<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>if<\/span> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 600<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>smallScreenGridCount<\/span> ?<\/span>?<\/span> 2<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span> if<\/span><\/strong> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> ><\/span> 600<\/span> &&<\/span> constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 900<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>normalScreenGridCount<\/span> ?<\/span>?<\/span> 4<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span> if<\/span><\/strong> (<\/span>constraints<\/span>.<\/span>maxWidth<\/span> ><\/span> 900<\/span> &&<\/span> constraints<\/span>.<\/span>maxWidth<\/span> <=<\/span> 1200<\/span>)<\/span> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>mediumScreenGridCount<\/span> ?<\/span>?<\/span> 6<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>}<\/span> else<\/span><\/strong> {<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>gridCount<\/span> =<\/span> widget<\/span>.<\/span>largerScreenGridCount<\/span> ?<\/span>?<\/span> 8<\/span>;<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>}<\/span>\r\n\r\n \u00a0\u00a0\u00a0 <\/span>return<\/span><\/strong> GridView<\/span>.<\/span>count<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>crossAxisCount<\/span>:<\/span> gridCount<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>children<\/span>:<\/span> widget<\/span>.<\/span>children<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>)<\/span>;<\/span>\r\n \u00a0 <\/span>}<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Menggunakan\u00a0Responsive Widget<\/span><\/h1>\n
      Menyesuaikan terlebih dahulu kelas main.dart<\/span><\/strong><\/em> menjadi seperti di bawah ini :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      void<\/span><\/strong> main<\/span>(<\/span>)<\/span> {<\/span>\r\n  runApp<\/span>(<\/span>MyApp<\/span>(<\/span>)<\/span>)<\/span>;\r\n<\/span>}<\/span>\r\n\r\nclass<\/span><\/strong><\/span> MyApp<\/span> extends<\/span><\/strong> StatelessWidget<\/span> {<\/span>\r\n\/\/ This widget is the root of your application.<\/span><\/em>\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContex<\/span>t <\/span>context<\/span>)<\/span> {<\/span>\r\n\u00a0\u00a0<\/span>return<\/span><\/strong> MaterialApp<\/span>(<\/span>\r\n \u00a0\u00a0 <\/span>title<\/span>:<\/span> 'Flutter Demo'<\/span>,<\/span>\r\n \u00a0\u00a0 <\/span>theme<\/span>:<\/span> ThemeData<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0 <\/span>\/\/ is not restarted.<\/span><\/em>\r\n \u00a0\u00a0\u00a0\u00a0 <\/span>primarySwatch<\/span>:<\/span> Colors<\/span>.<\/span>blue<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0 <\/span>visualDensity<\/span>:<\/span> VisualDensity<\/span>.<\/span>adaptivePlatformDensity<\/span>,<\/span>\r\n \u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0 <\/span>home<\/span>:<\/span> MyHomePage<\/span>(<\/span>title<\/span>:<\/span> 'Flutter Grid Responsive'<\/span>)<\/span>,<\/span>\r\n  )<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span>\r\n\r\nclass<\/span><\/strong><\/span> MyHomePage<\/span> extends<\/span><\/strong> StatefulWidget<\/span> {<\/span>\r\nMyHomePage<\/span>(<\/span>{<\/span>Key <\/span>key<\/span>,<\/span> this<\/span><\/strong>.<\/span>title<\/span>}<\/span>)<\/span> :<\/span> super<\/span><\/strong>(<\/span>key<\/span>:<\/span> key<\/span>)<\/span>;<\/span>\r\n\r\nfinal<\/span><\/span> String<\/span><\/strong> title<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\n_MyHomePageState <\/span>createState<\/span><\/span>(<\/span>)<\/span> =<\/span>><\/span> _MyHomePageState<\/span>(<\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\nclass<\/span><\/strong><\/span> _MyHomePageState<\/span> extends<\/span><\/strong> State<\/span><<\/span>MyHomePage<\/span>><\/span><\/span> {<\/span>\r\n\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n  return<\/span><\/strong> Scaffold<\/span>(<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>appBar<\/span>:<\/span> AppBar<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0 <\/span>title<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>Text<\/span>(<\/span>'${widget.title} [${ScreenHelper.screenType(context)}]'<\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>body<\/span>:<\/span> Container<\/span>(<\/span>)<\/span>,<\/span> \/\/ This trailing comma makes auto-formatting nicer for build methods.<\/span><\/em>\r\n  )<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Menambahkan data dan daftar widget yang akan ditampilkan pada GridView<\/span><\/strong>. Fokus pada kelas\u00a0_MyHomePageState<\/span><\/strong> kemudian tambahkan beberapa baris kode berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> _MyHomePageState<\/span> extends<\/span><\/strong> State<\/span><<\/span>MyHomePage<\/span>><\/span><\/span> {<\/span>\r\n\u00a0\u00a0<\/span>List<\/span><<\/span>String<\/span><\/strong>><\/span> raw<\/span> =<\/span> \"d, i, c, o, d, i, n, g\"<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>;<\/span>\r\nList<\/span><<\/span>Widget<\/span>><\/span> gridWidget<\/span> =<\/span> [<\/span>]<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> Scaffold<\/span>(<\/span> \u2026 )<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Setelah itu,\u00a0override<\/span><\/em>\u00a0fungsi\u00a0initState<\/span>()<\/span><\/strong>\u00a0untuk melakukan\u00a0generate<\/span> daftar widget berdasarkan data yang sudah ditambahkan seperti di bawah ini :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> _MyHomePageState<\/span> extends<\/span><\/strong> State<\/span><<\/span>MyHomePage<\/span>><\/span><\/span> {<\/span>\r\nList<\/span><<\/span>String<\/span><\/strong>><\/span> raw<\/span> =<\/span> \"d, i, c, o, d, i, n, g\"<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>;<\/span>\r\nList<\/span><<\/span>Widget<\/span>><\/span> gridWidget<\/span> =<\/span> [<\/span>]<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\nvoid<\/span> initState<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>super<\/span><\/strong>.<\/span>initState<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0 <\/span>List<\/span>.<\/span>generate<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>50<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>(<\/span>index<\/span>)<\/span> =<\/span>><\/span> gridWidget<\/span>.<\/span>add<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>Container<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>margin<\/span>:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>8<\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>color<\/span>:<\/span> Colors<\/span>.<\/span>blue<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>child<\/span><\/strong>:<\/span> Center<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>child<\/span><\/strong>:<\/span> Text<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>(<\/span>raw<\/span>.<\/span>toList<\/span>(<\/span>)<\/span>.<\/span>.<\/span>shuffle<\/span>(<\/span>)<\/span>)<\/span>.<\/span>first<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>style<\/span>:<\/span> TextStyle<\/span>(<\/span>color<\/span>:<\/span> Colors<\/span>.<\/span>white<\/span>,<\/span> fontSize<\/span>:<\/span> 30<\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0 <\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> Scaffold<\/span>(<\/span> .<\/span>.<\/span>.<\/span> )<\/span>;\r\n<\/span>}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Ubah kode yang berada di dalam fungsi build()<\/span><\/strong> dengan menggunakan custom widget yang sudah dibuat seperti berikut :<\/span><\/p>\n\n\n\n
      \n
      \n
      1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40<\/pre>\n<\/div>\n<\/td>\n
      		\n
      \n
      class<\/span><\/strong> _MyHomePageState<\/span> extends<\/span><\/strong> State<\/span><<\/span>MyHomePage<\/span>><\/span><\/span> {<\/span>\r\nList<\/span><<\/span>String<\/span><\/strong>><\/span> raw<\/span> =<\/span> \"d, i, c, o, d, i, n, g\"<\/span>.<\/span>toUpperCase<\/span>(<\/span>)<\/span>.<\/span>split<\/span>(<\/span>\",\"<\/span>)<\/span>;<\/span>\r\nList<\/span><<\/span>Widget<\/span>><\/span> gridWidget<\/span> =<\/span> [<\/span>]<\/span>;<\/span>\r\n\r\n@<\/span>override<\/span>\r\nvoid<\/span> initState<\/span>(<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>super<\/span><\/strong>.<\/span>initState<\/span>(<\/span>)<\/span>;<\/span>\r\n \u00a0 <\/span>List<\/span>.<\/span>generate<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>50<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>(<\/span>index<\/span>)<\/span> =<\/span>><\/span> gridWidget<\/span>.<\/span>add<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>Container<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>margin<\/span>:<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>8<\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>color<\/span>:<\/span> Colors<\/span>.<\/span>blue<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>child<\/span><\/strong>:<\/span> Center<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>child<\/span><\/strong>:<\/span> Text<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>(<\/span>raw<\/span>.<\/span>toList<\/span>(<\/span>)<\/span>.<\/span>.<\/span>shuffle<\/span>(<\/span>)<\/span>)<\/span>.<\/span>first<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>style<\/span>:<\/span> TextStyle<\/span>(<\/span>color<\/span>:<\/span> Colors<\/span>.<\/span>white<\/span>,<\/span> fontSize<\/span>:<\/span> 30<\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0 <\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n\r\n@<\/span>override<\/span>\r\nWidget <\/span>build<\/span><\/span>(<\/span>BuildContext <\/span>context<\/span>)<\/span> {<\/span>\r\n \u00a0 <\/span>return<\/span><\/strong> Scaffold<\/span>(<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>appBar<\/span>:<\/span> AppBar<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>title<\/span>:<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>Text<\/span>(<\/span>'${widget.title} [${ScreenHelper.screenType(context)}]'<\/span>)<\/span>,\r\n<\/span> \u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0 <\/span>body<\/span>:<\/span> Padding<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>padding<\/span>:<\/span> const<\/span> EdgeInsets<\/span>.<\/span>all<\/span>(<\/span>8<\/span>.0<\/span><\/span>)<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>child<\/span><\/strong><\/span>:<\/span> GridViewResponsive<\/span>(<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>children<\/span>:<\/span> gridWidget<\/span>,<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0 <\/span>)<\/span>,<\/span> \/\/ This trailing comma makes auto-formatting nicer for build methods.<\/span><\/em>\r\n\u00a0\u00a0 <\/span>)<\/span>;<\/span>\r\n}<\/span>\r\n}<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      Jika tidak terdapat eror saat kompilasi, tampilannya akan seperti di bawah ini :<\/p>\n
      \"\"<\/p>\n
      Kelebihan Menggunakan Flutter<\/h1>\n
      1. Kelebihan bagi developer<\/h2>\n
      1. Fast Development<\/h3>\n
      Flutter in-built fitur menggabungkan semua komponen untuk iOS dan Android untuk memberikan kinerja dasar\u00a0native<\/em> untuk aplikasi.<\/p>\n
      2. Single Codebase<\/h3>\n
      Fitur basis kode tunggal membantu kita untuk membuat app dengan lebih cepat daripada pengembangan app\u00a0native<\/em>\u00a0lainnya.<\/p>\n
      Sekarang dapat menulis satu basis kode untuk Android dan iOS yang menghemat banyak waktu dalam pengelolaan kode.<\/p>\n
      3. Hot Reload<\/h3>\n
      Fitur ini membantu mendebug kode lebih cepat dibandingkan dengan pengembangan aplikasi native, jadi dapat terus menguji dan men-debugnya, dan membangun aplikasi yang bagus.<\/p>\n
      4. Expressive UI<\/h3>\n
      Membangun UI yang ekspresif dengan Flutter material desain\u00a0yang indah dan Widget Cupertino (rasa iOS), Rich Motion API, dan pengguliran alami yang halus.<\/p>\n
      Fitur bawaannya membantu mengembangkan cepat dengan widget yang sepenuhnya dapat disesuaikan yang dapat digunakan kembali, jika memerlukan penyesuaian lebih lanjut di masa mendatang.<\/p>\n
      5. Mudah dimengerti dan dipelajari<\/h3>\n
      Bahkan bagi yang baru di Flutter bisa memahaminya dengan mudah. Jika sudah pernah menggunakan Java maka mungkin lebih mudah untuk memulai mengembangkan dengan Flutter.<\/p>\n
      Flutter menggunakan Dart, sebuah bahasa pemrograman berorientasi objek baru (dart.dev<\/span>) yang mudah dipelajari dan dipahami. Dapat memulai pengaturan dan membuat aplikasi Flutter dari situs resmi Flutter (flutter.dev<\/span>)<\/p>\n
      6. Komunitas yang berkembang<\/h3>\n
      Flutter telah menjadi komunitas pengembangan yang paling berkembang di seluruh dunia dalam pengembangan aplikasi. Yang terus mendiskusikan fitur-fitur baru dan mengatasi bug saat mengembangkan aplikasi Flutter.<\/p>\n
      Dapat memposting pertanyaan di komunitas Flutter dev dan akan mendapatkan saran cepat dari pengembang Flutter di seluruh dunia dalam waktu yang singkat.<\/p>\n
      2. Kelebihan bagi pelanggan dan bisnis<\/h2>\n
      1. Fast Development<\/h3>\n
      Sama seperti kelebihan flutter bagi pengembang atau developer app, pengembangan yang cepat juga merupakan kelebihan bagi pelanggan dan bisnis.<\/p>\n
      2. Waktu dan Biaya<\/h3>\n
      Yang tak kalah paling penting, Flutter akan menghemat biaya dan waktu. Tidak perlu tim pengembangan dan pengujian terpisah untuk platform iOS dan Android.<\/p>\n
      3. Pengelolaan Aplikasi<\/h3>\n
      Dalam Flutter semuanya adalah widget. Jadi mudah untuk menyesuaikan dan Mengelola aplikasi. misalnya jika kami memerlukan penyesuaian berdasarkan pasar, maka mudah dan cepat untuk memperbarui dan mengelola aplikasi.<\/p>\n
      4. Pengelolaan Team<\/h3>\n
      Dengan fitur bawaan pengembangan Flutter, hanya perlu satu tim pengembangan dan pengujian Flutter untuk mengembangkan dan mengelola aplikasi.<\/p>\n
      3. Perusahaan Besar Yang Menggunakan Flutter<\/h2>\n
      1. Google<\/h3>\n
      Google Ads<\/strong>\u00a0dan\u00a0Google Assistance<\/strong>\u00a0telah dikembangkan dengan Flutter yang menyediakan\u00a0user experience<\/em>\u00a0mendasar.<\/p>\n
      2. Alibaba<\/h3>\n
      Alibaba adalah salah satu platform bisnis eCommerce terbesar. Alibaba telah menggunakan Flutter untuk pengembangan aplikasi mereka.<\/p>\n\n\n
      \n            \n
      \n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n    \n
      \n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n            
      \n            \n\n
      <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n
      \n            4.6\/5 - (5 votes)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"
      Pengertian Hummingbird Pada bulan Desember 2018, Google sebagai pengembang Flutter mengumumkan versi yang dapat di jalankan sebagai sebuah web atau yang disebut dengan proyek Hummingbird. Pada acara Google IO 2019, diumumkan kabar baik tentang rilisnya Flutter Web versi technical preview dari project Flutter Hummingbird. Humminbird memiliki sebuah arsitektur seperti yang di bawah ini : Bisa […]<\/p>\n","protected":false},"author":7,"featured_media":6297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[1582,1580,1581,1585,1584,1583],"class_list":["post-4292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-flutter-adalah","tag-flutter-web","tag-flutter-web-demo","tag-hummingbird-adalah","tag-hummingbird-flutter","tag-kelebihan-flutter"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1-300x143.png",300,143,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png",1536,730,false]},"yoast_head":"\nMembuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Pengertian Hummingbird Pada bulan Desember 2018, Google sebagai pengembang Flutter mengumumkan versi yang dapat di jalankan sebagai sebuah web atau yang disebut dengan proyek Hummingbird. Pada acara Google IO 2019, diumumkan kabar baik tentang rilisnya Flutter Web versi technical preview dari project Flutter Hummingbird. Humminbird memiliki sebuah arsitektur seperti yang di bawah ini : Bisa […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-21T08:38:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-03T09:28:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird\",\"datePublished\":\"2020-08-21T08:38:08+00:00\",\"dateModified\":\"2021-06-03T09:28:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\"},\"wordCount\":1076,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png\",\"keywords\":[\"flutter adalah\",\"flutter web\",\"flutter web demo\",\"hummingbird adalah\",\"hummingbird flutter\",\"kelebihan flutter\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\",\"url\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\",\"name\":\"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png\",\"datePublished\":\"2020-08-21T08:38:08+00:00\",\"dateModified\":\"2021-06-03T09:28:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png\",\"width\":1536,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita & Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog","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:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","og_locale":"en_US","og_type":"article","og_title":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog","og_description":"Pengertian Hummingbird Pada bulan Desember 2018, Google sebagai pengembang Flutter mengumumkan versi yang dapat di jalankan sebagai sebuah web atau yang disebut dengan proyek Hummingbird. Pada acara Google IO 2019, diumumkan kabar baik tentang rilisnya Flutter Web versi technical preview dari project Flutter Hummingbird. Humminbird memiliki sebuah arsitektur seperti yang di bawah ini : Bisa […]","og_url":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","og_site_name":"Hosteko Blog","article_published_time":"2020-08-21T08:38:08+00:00","article_modified_time":"2021-06-03T09:28:45+00:00","og_image":[{"width":1536,"height":730,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","type":"image\/png"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird","datePublished":"2020-08-21T08:38:08+00:00","dateModified":"2021-06-03T09:28:45+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird"},"wordCount":1076,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","keywords":["flutter adalah","flutter web","flutter web demo","hummingbird adalah","hummingbird flutter","kelebihan flutter"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","url":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird","name":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","datePublished":"2020-08-21T08:38:08+00:00","dateModified":"2021-06-03T09:28:45+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","width":1536,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/membuat-web-menggunakan-flutter-kenalan-yuk-dengan-hummingbird#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Membuat Web Menggunakan Flutter? Kenalan Yuk Dengan Hummingbird"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita & Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/08\/FLUTTER-WEB-1536x730-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/4292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=4292"}],"version-history":[{"count":1,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/4292\/revisions"}],"predecessor-version":[{"id":11419,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/4292\/revisions\/11419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/6297"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=4292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=4292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=4292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}