Membuat Aplikasi Pertama Anda dnegan Flutter

Tutorial Flutter #3 – Membuat Aplikasi Pertama Anda

Rumahcoding.co.id – Pada kesempatan kali ini tutorial Flutter #3 akan membahas Cara Membuat Aplikasi Pertama Anda di Flutter. Setelah kita mempelajari structure project Flutter, maka akan sangat mudah ketika kita ingin membangun aplikasi menggunakan Flutter.

Sebelumnya, kita perlu tahu apa saja bagian-bagian yang bisa dicustom sesuai dengan project yang akan dibuat, yaitu:

  1. Header, yaitu bagian yang menangani semisal informasi aplikasi, title maupun icon.
  2. Body, yaitu bagian yang berisi content aplikasi yang akan dibuat.
  3. Footer, bagian optional yang bisa dicustom semisal list menu, floating action button, dan lain-lain.

Kurang lebih, desainnya seperti ini:

Tutorial-Flutter-3-Membuat-Aplikasi-Pertama-Anda

Ketiga bagian di atas dibungkus dengan Class Scafold. Class Scafold ini yang nantinya akan membentuk struktur tata letak dasar mulai dari header, body sampai footer.

Sekarang kita akan coba menerapkan beberapa code yang bisa diletakan pada masing-masing bagian. Mari kita mulai.

Bagian Header

Pada bagian header kita akan coba menerapkan code di bawah ini:

// Header
appBar: AppBar(
 title: Text("Flutter Demo"),
),

Pada bagian body kita akan menerapkan code berikut:

 // Body
body: Center( 
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello World",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
    ],
  ),
), 

Terakhir pada bagian footer kita akan menerapkan code berikut:

 // Bottom
floatingActionButton: new FloatingActionButton( 
  child: Icon(Icons.add),
  onPressed: () => print("Add"),
), 

Berikut code selengkapnya:

 import 'package:flutter/material.dart';

class App extends StatelessWidget{

  @override 

  Widget build(BuildContext context){

    return Scaffold( 
// Header
appBar: AppBar(
  title: Text("Flutter Demo"),
),
      // Body
      body: Center( 
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("Hello World",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
            ),
          ],
        ),
      ),
      // Bottom
      floatingActionButton: new FloatingActionButton( 
        child: Icon(Icons.add),
        onPressed: () => print("Add"),
      ),
    );
  }
} 

Panggil class App dan simpan pada main.dart

home: App(), // class yang akan dijalankan

Jalankan aplikasi tersebut. Jika berhasil akan tampil seperti ini:

ATTACHMENT DETAILS  Tutorial-Flutter-3-Membuat-Aplikasi-Pertama-Anda-02.png December 16,

Sampai di sini, kita sudah berhasil membuat aplikasi pertama menggunakan Flutter. Anda bisa mengcustom code di atas sesuai dengan kebutuhan project. Selamat mencoba dan jangan lupa bahwa #AnyOneCanCode

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Tutorial Flutter #1 – Pengenalan dan Cara Install Flutter

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Rumahcoding.co.idPengenalan dan Cara Install Flutter. Sebagai seorang pengembang aplikasi mobile, pastinya sudah memikirkan bagaimana cara membangun aplikasi mobile yang bisa digunakan di android dan ios dalam sekali kerja. Jika sampai saat ini masih memisahkan antara pengembangan android dan ios secara terpisah, itu artinya akan memakan banyak waktu, tenaga dan biaya untuk mengerjakannya.

Flutter hadir dengan kemampuan membangun aplikasi ios dan android dalam sekali pengembangan. Bayangkan saja dengan sekali membuat aplikasi maka sudah bisa diinstall di android maupun ios, keren!

Apa Itu Flutter?

Flutter merupakan sekumpulan SDK (Software Development Kit) untuk pengembangan aplikasi mobile yang dikembangkan oleh Google. Sama seperti react native maupun ionic, framework ini dapat digunakan untuk mengembangkan aplikasi mobile yang berjalan di ios maupun android. Bahasa yang digunakan oleh flutter merupakan Bahasa C, C++, Dart maupun Skia yang membuat framework buatan Google ini sangat menarik untuk kita pelajari.

Benefit Mengembangkan Aplikasi Mobile dengan Flutter

Ada banyak benefit yang bisa kita dapatkan apabila menggunakan flutter dalam mengembangkan aplikasi android maupun ios, di antaranya:

1. Fast Development

Flutter memiliki fitur widget-widget maupun class yang dapat membantu pengembangan aplikasi android maupun ios. Selain itu, flutter juga memiliki fitur hot reload yang dapat mempercepat compile / render perubahan-perubahan pada aplikasi yang kita kembangkan tanpa harus melakukan compile ulang.

2. Expressive and Flexsible UI

Flutter telah menyediakan banyak material UI yang berguna untuk membangun mobile app dengan canggih dan elegan. Material yang disediakan flutter sangat beragam dan lebih flexsible. Cukup dengan import satu material saja, maka Anda sudah bisa menggunakan banyak widget.

Selain itu, widget-widget yang disediakan flutter mudah dipelajari karena disediakan dokumentasi saat menggunakan widget tersebut.

3. Native Performance

Flutter memiliki kemampuan native performance, yaitu aplikasi yang Anda buat bisa berjalan di masing-masing di platform. Misalnya sintax scrooling di android dan ios berbeda, namun hanya dengan satu kali bekerja menggunakan flutter scrooling, Anda sudah bisa membuat system scrooling yang bisa bekerja dengan baik di android maupun ios.

4. Complete Documentation and Dependencies

Dokumentasi yang disediakan flutter sangat lengkap. Selain itu, depedensi yang Anda butuhkan sangat mudah diaplikasikan karena masing-masing depedensi ada tutorial dan cara menggunakannya. Hal ini membuat flutter semakin powerfull dalam membangun aplikasi mobile.

Tutorial Install Flutter

Flutter telah menyediakan dokumentasi bagaimana cara atau tutorial install flutter baik saat menggunakan windows, linux ataupun mac os.

1. Tutorial Install Flutter di Windows

Bagi Anda pengguna windows, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/windows

2. Tutorial Install Flutter di Mac OS

Bagi Anda pengguna Mac OS, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/macos

3. Tutorial Install Flutter di Linux

Bagi Anda pengguna Linux, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/linux

Kesimpulan

Demikianlah pembahasan pengenalan flutter, cara install flutter dan apa manfaat dari menggunakan flutter untuk membangun aplikasi mobile app. Semoga bermanfaat untuk pembaca sekalian. Aamiin.