Membuat Aplikasi Android Pertama dengan Flutter

Chairruddin Arrasid | 31/03/2019 | Flutter | 1 Comment

Pada artikel sebelumnya saya sudah share bagaimana memulai persiapan untuk bisa menggunakan Flutter. Dan di artikel kali ini saya akan share bagaimana cara membuat aplikasi Android dengan Flutter. Berhubung ini adalah aplikasi pertama, maka kita buat yang ringan-ringan dulu, karena yang berat-berat itu awalnya dari yang ringan-ringan ini ?

Memulai Membuat Aplikasi Android dengan Flutter

Membuat Project Baru

Sekarang kita mulai untuk membuat project baru…

Buka Android Studio. Lalu pilih Start a new Flutter project.
Pilih Flutter Application. Kemudain klik Next.
Isi Project name dengan nama project-nya, Flutter SDK path dengan direktori Flutter SDK, Project location dengan direktori untuk menyimpan file project-nya, Description dengan deskripsi project. Setelah itu klik Next.
Isi Company domain dengan domain kita, agar ter-generate di nama package aplikasinya (Package name). Ceklis generate sample content, agar secara otomatis dibuatkan sample coding untuk AppBar. Lalu klik Finish.
Seperti yang kita lihat, file main.dart terbuka secara otomatis. Dan terdapat beberapa baris kode seperti ini,

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for material.AppBar.actions',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // ...
            },
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

// This widget is the root of your application.

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Flutter Code Sample for material.AppBar.actions',

theme: ThemeData(

primarySwatch: Colors.blue,

home: MyStatelessWidget(),

);

}

class MyStatelessWidget extends StatelessWidget {

MyStatelessWidget({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Hello World'),

actions: <Widget>[

IconButton(

icon: Icon(Icons.shopping_cart),

tooltip: 'Open shopping cart',

onPressed: () {

// ...

);

}

Running Project

Tidak usah diubah dulu kodenya, kita running saja untuk melihat seperti apa hasilnya. Namun sebelum running, pastikan dulu kita sudah menghubungkan device Android kita ke laptop/komputer, atau bisa juga menggunakan emulator Android. Pada kasus ini saya menggunakan emulator.

Untuk melakukan running, pilih target device Android atau emulator yang akan digunakan untuk running aplikasinya, lalu klik run icon di toolbar.
Maka hasilnya…

Sekarang kita ubah title toolbar-nya. Yang tadinya Hello World diubah menjadi My Flutter App. Buka file main.dart, lalu pada class MySatelessWidget ubah menjadi seperti ini :

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Flutter App'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // ...
            },
          ),
        ],
      ),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {

MyStatelessWidget({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('My Flutter App'),

actions: <Widget>[

IconButton(

icon: Icon(Icons.shopping_cart),

tooltip: 'Open shopping cart',

onPressed: () {

// ...

);

}

Kemudian lakukan hot reload agar kode yang kita ubah bisa dieksekusi langsung secara instan tanpa harus melakukan run lagi. Caranya, klik icon hot reload (lihat gambar poin 6) atau juga bisa menggunakan shortcut CTRL+S.
Maka hasilnya…

Oke, sekarang kita sudah membuat aplikasi Android pertama dengan Flutter. Semoga dengan yang pertama ini, ke depannya bisa memudahkan kita untuk membuat aplikasi-aplikasi lainnya menggunakan Flutter.

Happy Coding! 🙂

Tags:Cara Menggunakan Flutter di Android Studio, Flutter, Flutter Android Studio, Membuat Aplikasi Android dengan Flutter, Membuat Aplikasi iOS dengan Flutter, Membuat Aplikasi Mobile dengan Flutter, Menggunakan Flutter di Android Studio, Tutorial Flutter, Tutorial Flutter Bahasa Indonesia, Tutorial Flutter Indonesia

About The Author

Chairruddin Arrasid

Orang yang suka belajar, juga suka membaca, juga suka menulis, dan juga suka makan kalau lapar. Dulu waktu kecil tidak punya cita-cita jadi programmer, tapi sekarang jadi programmer. Lah? Mungkin dulu masih belum tahu bahwa programming itu menyenangkan.

0 0 votes

Article Rating

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Memulai Membuat Aplikasi Android dengan Flutter | Always Del Heru

5 years ago

[…] Membuat Aplikasi Android Pertama dengan Flutter […]

fery

4 years ago

pass di run lalau eror g mana bg cara mengatasinya

Membuat Project Baru

Running Project

Related Posts

About The Author

Chairruddin Arrasid