{"id":1912,"date":"2021-06-30T14:47:24","date_gmt":"2021-06-30T14:47:24","guid":{"rendered":"https:\/\/sunaonako.my.id\/?p=1912"},"modified":"2022-05-06T06:57:41","modified_gmt":"2022-05-06T06:57:41","slug":"rencana-belajar-flutter-hands-on-tutorial","status":"publish","type":"post","link":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/","title":{"rendered":"Rencana Belajar Flutter : Hands On Tutorial"},"content":{"rendered":"\n

Tampilan Aplikasi<\/h2>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n

Ya namanya masih belajar, dan ini blog buat belajar bareng, ya ini deh contoh aplikasinya, apa adanya. Jadi saya jelaskan, di contoh ini ada 3 widget utama, yang pertama profile card yang paling atas, yang kedua, ditengah itu intinya list item, yang ketiga itu banner.<\/p>\n\n\n\n

Inisialisasi IDE<\/h2>\n\n\n\n

Tahap Pertama inisialisasi pembuatan flutter terlebih dahulu:
Buka visual studio code, lalu jalankan terminal built in visual studio code dengan sintaks berikut:<\/p>\n\n\n\n

  • cd where_directory<\/li>
  • flutter create –org firsttutorflutter.com fot<\/li><\/ul>\n\n\n\n
    \n
    \n
    \"\"<\/figure>\n<\/div>\n\n\n\n
    \n

    Nah, nanti akan kebuat tuh folder fot yang built ready buat pengembangan flutter.<\/p>\n\n\n\n

    Kemudian pilih papers icon pada visual studio code, open folder, cari dan select folder fot yang mana tempatnya pas di where_directory<\/code> mu<\/p>\n\n\n\n

     <\/p>\n\n\n\n

     <\/p>\n<\/div>\n<\/div>\n\n\n\n

    Overall, Tampilan IDEnya akan jadi seperti ini,<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    list folder di dalam fot beserta script-scriptnya plus terminal sudah default ke direktori fot<\/p>\n\n\n\n

    Lanjut jalankan emulatornya<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Biar Mempermudah, ini ada shortcut sederhana<\/p>\n\n\n\n

    ctrl + shift + r buat munculin flutter code template
    Shift + Alt + F buat ngerapihin
    Shift + Alt + arrow down buat ngecopy deret code berulang
    CTRL + Space<\/code> buat suggest<\/p>\n\n\n\n

    Destruktur Default Boilerplate<\/h2>\n\n\n\n

    Saat destruktur, posisi desain seperti ini :<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

     <\/p>\n\n\n\n

    \n
    \n

    main dart, fungsinya untuk tema, dan memanggil deklarasi awal untuk “Widget Page yang akan pertama diload”, yaitu pada home<\/code><\/p>\n\n\n\n

    import 'package:flutter\/material.dart';\n\nimport 'profile\/profile_page.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Demo Aplikasi',\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: ProfilePage(),\n    );\n  }\n}\n<\/code><\/pre>\n<\/div>\n\n\n\n
    \n
    Profile Page, ini akan jadi main activity dari kumpulan banyak widget menjadi satu<\/p>\n\n\n\n
    import 'package:flutter\/material.dart';\nimport 'package:flutter\/widgets.dart';\n\nimport 'widget\/profile_information.dart';\n\nclass ProfilePage extends StatefulWidget {\n  ProfilePage({\n    Key? key,\n  }) : super(key: key);\n\n  @override\n  _ProfilePageState createState() => _ProfilePageState();\n}\n\nclass _ProfilePageState extends State<ProfilePage> {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.grey[50],\n      body: SafeArea(\n          child: Column(\n        children: [\n          ProfileInformationWidget(),\n        ],\n      )),\n    );\n  }\n}<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n
    Kalau kalian perhatikan pada ProfilePage terdapat deklarasi custom ProfileInformationWidget, itu adalah stateless widget yang bisa dibuat generate langsung dengan shortcut statel lalu ctrl + space atau statelessw, nanti akan muncul opsi StatelessWidget, pilih, lalu ketik nama classnya yaitu ProfileInformationWidget.<\/p>\n\n\n\n
    Menambah Akses Gambar<\/h3>\n\n\n\n
    Di flutter untuk mengakses gambar (atau file lain), kita bisa deklarasikan folder tempat menyimpan gambar tersebut, caranya, cukup buat foldernya, di sini, saya buat folder asset lalu dalamnya lagi ada folder images<\/p>\n\n\n\n
    Lalu pada flutter, kita buka pubsec.yaml, silahkan uncomment lalu modify sesuai dengan relative posisi direktori folder gambar tadi<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Kalau aku jadinya seperti ini<\/p>\n\n\n\n
      assets:\n    - assets\/images\/<\/code><\/pre>\n\n\n\n
    Sekarang mari membuat main widget Flutternya<\/h2>\n\n\n\n
    Membuat Profile Info<\/h3>\n\n\n\n
    sekarang kita ke basic buat outernya dulu<\/p>\n\n\n\n
    \n
    \n
        return Container(\n      \/\/Ini dekorasi kolom penampung\n      width: double.infinity,\n      height: 250,\n      decoration: BoxDecoration(boxShadow: [\n        BoxShadow(\n            color: Colors.grey,\n            spreadRadius: 2,\n            blurRadius: 15,\n            offset: Offset.fromDirection(90)),\n      ]),\n      \/\/Ini untuk isi kolom penampung\n      child: Column(),\n    );<\/pre>\n<\/div>\n\n\n\n
    \n
    Jadi kita inisialisasi width dengan ukuran maksimum, lalu heightnya 250, tambahkan dekorasi<\/p>\n\n\n\n
    \"\"
    jadinya akan terdapat box dengan shadow berikut<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
    sekarang kita tambahkan warna boxnya di dalam decoration paramnya<\/p>\n\n\n\n
         decoration: BoxDecoration(boxShadow: [\n        BoxShadow(\n            color: Colors.grey,\n            spreadRadius: 2,\n            blurRadius: 15,\n            offset: Offset.fromDirection(90)),\n      ], color: Colors.white, borderRadius: BorderRadius.circular(10)),\n      \/\/ Set Widget padding margin\n      margin: EdgeInsets.all(10),\n      padding: EdgeInsets.all(15),\n<\/code><\/pre>\n\n\n\n
    Jadilah kotak<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Kode untuk seluruh bagian card profile<\/p>\n\n\n\n
    import 'package:flutter\/material.dart';\nimport 'package:flutter\/widgets.dart';\n\nclass ProfileInformationWidget extends StatelessWidget {\n  const ProfileInformationWidget({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      \/\/Ini dekorasi kolom penampung\n      width: double.infinity,\n      height: 250,\n      decoration: BoxDecoration(boxShadow: [\n        BoxShadow(\n            color: Colors.grey,\n            spreadRadius: 2,\n            blurRadius: 15,\n            offset: Offset.fromDirection(90)),\n      ], color: Colors.white, borderRadius: BorderRadius.circular(10)),\n      \/\/ Set Widget padding margin\n      margin: EdgeInsets.all(10),\n      padding: EdgeInsets.all(15),\n      \/\/Ini untuk isi kolom penampung\n      child: Column(\n        \/\/Rata Kiri\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          \/\/ Bagian user info\n          Container(\n            height: 160,\n            color: Colors.yellow,\n            \/\/ Ini untuk foto profile  dan informasi user\n            child: Row(\n              children: [\n                \/\/Container untuk foto\n                Container(\n                  width: 150,\n                  margin: EdgeInsets.only(bottom: 10),\n                  decoration: BoxDecoration(\n                      image: DecorationImage(\n                          image: AssetImage('assets\/images\/nak.jpg'),\n                          fit: BoxFit.cover),\n                      borderRadius: BorderRadius.circular(15)),\n                ),\n                \/\/ Container untuk user infos\n                \/\/ Flexible mempengaruhi keputusan child\n                Flexible(\n                    child: Container(\n                  margin: EdgeInsets.only(left: 15, top: 10),\n                  child: Column(\n                    crossAxisAlignment: CrossAxisAlignment.start,\n                    mainAxisSize: MainAxisSize.max,\n                    children: [\n                      Text(\n                        \"Nak Sun Suk\",\n                        \/\/ bila teks penuh\n                        overflow: TextOverflow.ellipsis,\n                        maxLines: 1,\n                        style: TextStyle(\n                            fontSize: 20, fontWeight: FontWeight.bold),\n                      ),\n                      SizedBox(\n                        height: 20,\n                      ),\n                      Text(\n                        \"Cloud Developer\",\n                        \/\/ bila teks penuh\n                        overflow: TextOverflow.ellipsis,\n                        maxLines: 1,\n                        style: TextStyle(\n                            color: Colors.blueGrey,\n                            fontSize: 13,\n                            fontWeight: FontWeight.bold),\n                      ),\n                      SizedBox(\n                        height: 20,\n                      ),\n                      Flexible(\n                        child: Container(\n                          decoration: BoxDecoration(\n                              color: Colors.grey[50],\n                              borderRadius: BorderRadius.circular(7)),\n                          height: 60,\n                          \/\/ color: Colors.grey,\n                          child: Row(\n                            mainAxisAlignment: MainAxisAlignment.spaceAround,\n                            children: [\n                              InformationValueBox(\n                                subtitle: \"Articles\",\n                                value: \"10\",\n                              ),\n                              InformationValueBox(\n                                subtitle: \"Followers\",\n                                value: \"10\",\n                              ),\n                              InformationValueBox(\n                                subtitle: \"Rating\",\n                                value: \"10\",\n                              ),\n                            ],\n                          ),\n                        ),\n                      ),\n                    ],\n                  ),\n                ))\n              ],\n            ),\n          ),\n          \/\/ Bagian Button bottom\n          Flexible(\n              child: Container(\n            color: Colors.orange[200],\n            child: Row(\n              crossAxisAlignment: CrossAxisAlignment.stretch,\n              children: [\n                Expanded(\n                  flex: 1,\n                  child: OutlineButton(\n                      shape: RoundedRectangleBorder(\n                          borderRadius: BorderRadius.circular(10)),\n                      child: Text(\n                        \"Chat\",\n                        style: TextStyle(fontSize: 16),\n                      ),\n                      onPressed: () => {}),\n                ),\n                \/\/Tambah space antar tombol\n                SizedBox(\n                  width: 15,\n                ),\n                Expanded(\n                    flex: 1,\n                    child: RaisedButton(\n                      onPressed: () {},\n                      color: Colors.blue,\n                      child: Text(\n                        \"Follow\",\n                        style: TextStyle(fontSize: 16, color: Colors.white),\n                      ),\n                      shape: RoundedRectangleBorder(\n                          borderRadius: BorderRadius.circular(10)),\n                    ))\n              ],\n            ),\n          ))\n        ],\n      ),\n    );\n  }\n}\n\nclass InformationValueBox extends StatelessWidget {\n  const InformationValueBox(\n      {Key? key, required this.subtitle, required this.value})\n      : super(key: key);\n\n  final String subtitle, value;\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      mainAxisAlignment: MainAxisAlignment.center,\n      crossAxisAlignment: CrossAxisAlignment.start,\n      children: [\n        Text(\n          subtitle,\n          style: TextStyle(\n            fontWeight: FontWeight.bold,\n            fontSize: 15,\n            color: Colors.black54,\n          ),\n        ),\n        Text(\n          value,\n          style: TextStyle(\n            fontWeight: FontWeight.bold,\n            fontSize: 20,\n            color: Colors.black87,\n          ),\n        ),\n      ],\n    );\n  }\n}\n<\/pre>\n\n\n\n
    sebenarnya untuk image ini kita bisa pakai<\/p>\n\n\n\n
    child: Image.asset('assets\/images\/namaimage.jpg' <\/pre>\n\n\n\n
    atau pakai<\/p>\n\n\n\n
    child: FittedBox(\n                  child: Image.asset('assets\/images\/namaimage.jpg'),\n                  fit: BoxFit.fill,\n),<\/code><\/pre>\n\n\n\n
    Tapi saya ingin memberikan efek melengkung di setiap sisi, jadi saya pilih boxdecoration kemudian mempunyai background image.<\/p>\n\n\n\n
    Perbedaan Expanded dan Flexible?<\/h4>\n\n\n\n
    dalam flutter gak jauh-jauh amat bedanya, Expanded itu berusaha untuk match parent dan Flexible itu hanya mengisi seadanya atau wrap content, yang jadi kelebihan dari flexible adalah ketika misal isi dari yang diwrap itu kebesaran, misal teksnya kepanjangan, otomatis teks sisa akan muncul dibawah, sedangkan expanded akan muncul error bila widget yang diwrap kebesaran. Istilahnya Flexible (fit: FlexFit.tight) = Expanded()<\/code> Yeah, secara default Flexible itu FlexFit.loose.<\/p>\n\n\n\n
    BTW, Berikut ini hasil jadinya<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Membuat List Discovery Widged<\/h3>\n\n\n\n
    Kali ini kita buat list view pada flutter, sekarang kita tidak buat class, tapi function :3, dan itu di dalam file profile_page<\/p>\n\n\n\n
    ini just fun saja, tapi kalian bisa rubah stateless widget ke statefull widget caranya klik ctrl + shift + r pada area extend StatelessWidget, oke untuk full codenya seperti ini<\/p>\n\n\n\n
    import 'package:flutter\/material.dart';\nimport 'package:flutter\/widgets.dart';\n\nimport 'widget\/profile_information.dart';\n\nclass ProfilePage extends StatefulWidget {\n  ProfilePage({\n    Key? key,\n  }) : super(key: key);\n\n  @override\n  _ProfilePageState createState() => _ProfilePageState();\n}\n\nclass _ProfilePageState extends State<ProfilePage> {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      backgroundColor: Colors.grey[50],\n      body: SafeArea(\n          child: Column(\n        children: [\n          ProfileInformationWidget(),\n          SizedBox(\n            height: 20,\n          ),\n          Container(\n              margin: EdgeInsets.only(left: 10),\n              child: _listDiscoveryData(\n                  \"Notable Works\", \"Based on popularity On Social Media\")),\n        ],\n      )),\n    );\n  }\n}\n\nWidget _listDiscoveryData(String title, String subtitle) {\n  return Container(\n    width: double.infinity,\n    child: Column(\n      crossAxisAlignment: CrossAxisAlignment.start,\n      children: [\n        Column(\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: [\n            Text(title,\n                style: TextStyle(\n                  fontSize: 20,\n                  fontWeight: FontWeight.bold,\n                )),\n            SizedBox(\n              height: 8,\n            ),\n            Text(subtitle,\n                overflow: TextOverflow.ellipsis,\n                maxLines: 1,\n                style: TextStyle(\n                    fontSize: 15,\n                    fontWeight: FontWeight.bold,\n                    color: Colors.grey))\n          ],\n        ),\n        SizedBox(\n          height: 10,\n        ),\n        Container(\n          height: 200,\n          \/\/list perlu di wrap dengan container untuk deklarasi weight\n          child: ListView.builder(\n              scrollDirection: Axis.horizontal,\n              itemBuilder: (context, index) {\n                return Container(\n                  width: 230,\n                  margin: EdgeInsets.only(right: 15),\n                  child: Column(\n                    children: [\n                      Flexible(\n                        flex: 6,\n                        child: Container(\n                          width: 230,\n                         \n                          decoration: BoxDecoration(\n                              borderRadius: BorderRadius.circular(10),\n                              image: DecorationImage(\n                                  fit: BoxFit.cover,\n                                  image: NetworkImage(\n                                    \"http:\/\/www.world-art.ru\/animation\/img\/10000\/9660\/10.jpg\",\n                                  ))),\n                        ),\n                      ),\n                      SizedBox(\n                        height: 10,\n                      ),\n                      Flexible(\n                        flex: 3,\n                        child: Container(\n                          decoration: BoxDecoration(\n                            borderRadius: BorderRadius.circular(10),\n                            color: Colors.lightBlue.shade50,\n                          ),\n                          child: Flex(\n                            direction: Axis.vertical,\n                            crossAxisAlignment: CrossAxisAlignment.start,\n                            children: [\n                              Text(\n                                \"Nature\",\n                                style: TextStyle(\n                                    fontSize: 15,\n                                    color: Colors.yellow.shade900),\n                              ),\n                              SizedBox(\n                                height: 10,\n                              ),\n                              Flexible(\n                                child: Text(\n                                    \"Let us plant more trees from this year Let us plant more trees from this year\",\n                                    maxLines: 2,\n                                    overflow: TextOverflow.ellipsis,\n                                    style: TextStyle(\n                                        fontSize: 15, color: Colors.black)),\n                              ),\n                            ],\n                          ),\n                        ),\n                      ),\n                    ],\n                  ),\n                );\n              }),\n        ),\n        SizedBox(\n          height: 15,\n        ),\n      ],\n    ),\n  );\n}\n<\/pre>\n\n\n\n
    ItemBuilder <\/code>Akan mereturn list widgets, ListViews<\/code> itu strict dan perlu deklarasi ukuran height, makannya perlu diwrap dulu dengan Container<\/code> dan mau discroll kemana<\/p>\n\n\n\n
    Jadinya akan seperti ini<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Basic Routing<\/h2>\n\n\n\n
    Kita akan nyoba basic routing guys<\/p>\n\n\n\n
    kita buat file dart baru namanya homepage.dart, classnya saya iseng buat statefull, biar ada contoh bagaimana mengambil parameter yang dipass kalau statefull<\/p>\n\n\n\n
    import 'package:flutter\/material.dart';\nimport 'package:flutter\/widgets.dart';\n\nclass HomePage extends StatefulWidget {\n  \/\/deklarasi string untuk paramater  \n  HomePage({Key? key, required this.title}) : super(key: key);\n  final String title; \n  @override\n  _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State<HomePage> {\n  @override\n  Widget build(BuildContext context) {\n    return SafeArea(\n      child: Scaffold(\n        appBar: AppBar(\n          title: Text(widget.title), \/\/Manggilnya pakai variable widget yang mana auto ada\n        ),\n        body: Column(children: [\n          Container(\n            margin: EdgeInsets.only(top: 20),\n            child: Center(\n              child: ElevatedButton(\n                onPressed: () => {\n                  Navigator.of(context).pop(),\n                },\n                style: ElevatedButton.styleFrom(\n                  primary: Colors.teal,\n                ),\n                child: Text(\n                  'Go To Profile',\n                ),\n              ),\n            ),\n          )\n        ]),\n      ),\n    );\n  }\n}\n<\/pre>\n\n\n\n
    lalu pada dart profile_information itu ada tombol, tambahkan onPress, kalau saya, saya pilih chat button<\/p>\n\n\n\n
                      Expanded(\n                    flex: 1,\n                    child: OutlineButton(\n                        shape: RoundedRectangleBorder(\n                            borderRadius: BorderRadius.circular(10)),\n                        child: Text(\n                          \"Chat\",\n                          style: TextStyle(fontSize: 16),\n                        ),\n                        onPressed: () {\n                          Navigator.of(context).push(MaterialPageRoute(\n                              builder: (context) => OtherPage(\n                                    title: 'From Profile Page',\n                                  )));\n                        }),\n                  ),<\/code><\/pre>\n\n\n\n
    Sekarang coba didemokan dengan cara klik tombolnya, dan lihat hasilnya,<\/p>\n\n\n\n
    Navigator of content lalu push maksudnya navigasi dari konteks yang mana konteks ini adalah activity sekarang ini, lalu push, pust ini mereturn route dan dalam flutter ada built in route yaitu MaterialPageRoute.<\/p>\n
    Navigator.of(context).pop() berfungsi untuk kembali ke halaman aktif sebelumnya.<\/p><\/p>\n\n\n\n
    Nah untuk widget featured artikel, kalian coba kerjakan menggunakan tutorial yang tersedia<\/p>\n\n\n\n\n\n\n\n
    Solusi untuk featured page<\/h4>\n\n\n\n
    import 'package:flutter\/material.dart';\n\nclass FeaturedArticleBannerWidget extends StatelessWidget {\n  const FeaturedArticleBannerWidget({\n    Key key,\n  }) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return Container(\n      padding: EdgeInsets.symmetric(horizontal: 20),\n      height: 150,\n      decoration: BoxDecoration(\n          color: Colors.teal, borderRadius: BorderRadius.circular(18)),\n      child: Column(\n        mainAxisAlignment: MainAxisAlignment.center,\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          Container(\n              padding: EdgeInsets.all(10),\n              decoration: BoxDecoration(\n                  color: Colors.teal[200],\n                  borderRadius: BorderRadius.circular(10)),\n              child: Text(\n                \"Featured Article\",\n                style: TextStyle(\n                    color: Colors.white,\n                    fontSize: 16,\n                    fontWeight: FontWeight.w500),\n              )),\n          SizedBox(\n            height: 20,\n          ),\n          Flexible(\n            child: Text(\n              \"natural mood regulation low or even absent in people with depression\",\n              maxLines: 2,\n              overflow: TextOverflow.ellipsis,\n              style: TextStyle(\n                  color: Colors.white,\n                  fontSize: 20,\n                  fontWeight: FontWeight.bold),\n            ),\n          )\n        ],\n      ),\n    );\n  }\n}\n<\/pre>\n\n\n\n
     <\/p>\n","protected":false},"excerpt":{"rendered":"
    Ya namanya masih belajar, dan ini blog buat belajar bareng, ya ini deh contoh aplikasinya, apa adanya. Jadi saya jelaskan, di contoh ini ada 3 widget utama, yang pertama profile card yang paling atas, yang kedua, ditengah itu intinya list item, yang ketiga itu banner. Inisialisasi IDE Tahap Pertama inisialisasi pembuatan flutter terlebih dahulu:Buka visual…<\/p>\n","protected":false},"author":2,"featured_media":1993,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[254],"tags":[255,256,257],"class_list":["post-1912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-development","tag-flutter","tag-mobile-development","tag-pengembangan-mobile","reaction-wahaha"],"yoast_head":"\nRencana Belajar Flutter : Hands On Tutorial - Sedang Belajar<\/title>\n<meta name=\"description\" content=\"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter\" \/>\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\/rencana-belajar-flutter-hands-on-tutorial\/\" \/>\n<link rel=\"next\" href=\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Rencana Belajar Flutter : Hands On Tutorial\" \/>\n<meta property=\"og:description\" content=\"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Hilarious Developer School\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-30T14:47:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-06T06:57:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1260\" \/>\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=\"8 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\/rencana-belajar-flutter-hands-on-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\"},\"author\":{\"name\":\"nakomin\",\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"headline\":\"Rencana Belajar Flutter : Hands On Tutorial\",\"datePublished\":\"2021-06-30T14:47:24+00:00\",\"dateModified\":\"2022-05-06T06:57:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\"},\"wordCount\":643,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png\",\"keywords\":[\"flutter\",\"mobile development\",\"pengembangan mobile\"],\"articleSection\":[\"Mobile Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\",\"url\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\",\"name\":\"Rencana Belajar Flutter : Hands On Tutorial - Sedang Belajar\",\"isPartOf\":{\"@id\":\"https:\/\/sunaonako.my.id\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png\",\"datePublished\":\"2021-06-30T14:47:24+00:00\",\"dateModified\":\"2022-05-06T06:57:41+00:00\",\"description\":\"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage\",\"url\":\"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png\",\"contentUrl\":\"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png\",\"width\":\"2240\",\"height\":\"1260\"},{\"@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":"Rencana Belajar Flutter : Hands On Tutorial - Sedang Belajar","description":"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter","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\/rencana-belajar-flutter-hands-on-tutorial\/","next":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/2\/","og_locale":"en_US","og_type":"article","og_title":"Rencana Belajar Flutter : Hands On Tutorial","og_description":"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter","og_url":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/","og_site_name":"Hilarious Developer School","article_published_time":"2021-06-30T14:47:24+00:00","article_modified_time":"2022-05-06T06:57:41+00:00","og_image":[{"width":2240,"height":1260,"url":"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png","type":"image\/png"}],"author":"nakomin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"nakomin","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#article","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/"},"author":{"name":"nakomin","@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"headline":"Rencana Belajar Flutter : Hands On Tutorial","datePublished":"2021-06-30T14:47:24+00:00","dateModified":"2022-05-06T06:57:41+00:00","mainEntityOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/"},"wordCount":643,"commentCount":0,"publisher":{"@id":"https:\/\/sunaonako.my.id\/#\/schema\/person\/e35d0cb9128a86b66ec2ba6abacadd5a"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png","keywords":["flutter","mobile development","pengembangan mobile"],"articleSection":["Mobile Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/","url":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/","name":"Rencana Belajar Flutter : Hands On Tutorial - Sedang Belajar","isPartOf":{"@id":"https:\/\/sunaonako.my.id\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png","datePublished":"2021-06-30T14:47:24+00:00","dateModified":"2022-05-06T06:57:41+00:00","description":"Belajar membuat aplikasi flutter simple sederhana, memahami widget dan routing sederhana, Have fun saja dan ini sekedar catatan kecil proses belajar flutter","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sunaonako.my.id\/blog\/rencana-belajar-flutter-hands-on-tutorial\/#primaryimage","url":"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png","contentUrl":"https:\/\/sunaonako.my.id\/aruuploads\/2021\/06\/banner.png","width":"2240","height":"1260"},{"@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\/1912","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=1912"}],"version-history":[{"count":0,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/posts\/1912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media\/1993"}],"wp:attachment":[{"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sunaonako.my.id\/apps-api\/wp\/v2\/tags?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}