HTTP Request Menggunakan Flutter

Tutorial pintar-android.com Http Request menggunakan Flutter

Di tutorial pintar-android.com kali ini kita akan belajar menampilkan list dengan data dari HTTP request menggunakan Flutter. HTTP request yang kita coba buat, akan menembak API yang dibuat dari data Firebase Realtime Database. API tersebut berisi data lirik lagu Jason Mraz yang berjudul “The Woman I Love”. Untuk yang mengikuti tutorial sebelumnya, pasti tahu kalau lagu yang sama juga dipakai untuk belajar membuat model menggunakan Flutter 😀

Mari kita mulai! Download kodingan dari tutorial sebelumnya di https://github.com/meidikawardana/instagram_list . Ekstrak file zip dari project tersebut, lalu rename folder hasil ekstrakan jadi: instagram_list . Buka folder tersebut di Visual Studio Code (VSCode), lalu tekan Ctrl+` (Control + tanda quote) di keyboard untuk membuka terminal di VSCode. lalu ketik di terminal:

flutter pub get

untuk download package flutter supaya project kita bisa jalan.

Sebelum kita menembak API pakai Flutter, kita perlu menyesuaikan sedikit kodingan kita supaya listview yang sudah ada bisa menampilkan data lebih efisien & mengurangi lag ketika di-scroll. Buka file lib/main.dart, lalu cari class InstagramCards. Ubah class InstagramCards sesuai kodingan dibawah ini. Hapus bagian yang dicoret, & tambahkan bagian yang berwarna hijau.

...

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    ...

    List<Widget> cards =
        new List.generate(3, (i) => new InstagramCard(instagramPost));

    return ListView(
      children: cards, /*<Widget>[
        InstagramCard()
      ],*/
    );

    return ListView.builder(
      itemBuilder: (BuildContext context, int index) {
        return InstagramCard(instagramPost);
      },
      itemCount: 3,
    );    
  }
}

Setelah itu, kita bisa mulai koding untuk menembak API firebase. Kita perlu menambahkan dulu library untuk menembak API, yaitu library http. Buka file pubspec.yaml, lalu tambahkan baris: http: ^0.12.0+2 di bagian dependencies seperti gambar berikut ini:

gambar  1 - menambahkan library http di pubspec.yaml

Lalu, masih di file main.dart, tambahkan import library http & tambahkan juga fungsi getPosts() untuk mendapatkan data dari API firebase realtime database. Di fungsi getPosts() inilah kita melakukan http request menggunakan Flutter.

...
import 'models/instagram_post.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

Future<List<InstagramPost>> getPosts() async {
  final response =
      await http.get('https://instagram-list.firebaseio.com/posts.json');

  if (response.statusCode == 200) {
    final List<InstagramPost> postList = [];
    final Map<String, dynamic> postsJson = json.decode(response.body);

    postsJson.forEach((String id, dynamic data) {
      final InstagramPost product = InstagramPost(
        profilePicture: 'images/insta_profpic.jpg',
        username: 'meidika_wardana',
        picture: data['pic_url'],
        likeCount: int.parse(data['like_count']),
        text: data['text_'],
      );
      postList.add(product);
    });

    return postList;
  } else {
    throw Exception('Gagal menampilkan postingan');
  }
}

class InstagramCards extends StatefulWidget {
   ...

Kalau kita amati, ada beberapa hal yang menarik di fungsi getPosts() di atas. Fungsi getPosts(), biasanya kita sebut sebagai fungsi asynchronous (async) yang menunggu (await) suatu proses. Prosesnya untuk kasus ini adalah menembak API firebase di https://instagram-list.firebaseio.com/posts.json . Proses asynchronous ini, dilakukan di diluar proses utama aplikasi kita (main thread) karena jika dilakukan di main thread, proses async - await bisa memakan waktu yang lama & berpotensi membuat aplikasi kita jadi seakan “hang”.

Fungsi async getPosts(), harus mengembalikan sebuah obyek Future karena fungsi getPosts() akan mengembalikan hasil di waktu yang belum diketahui kapan di masa depan. Hasil fungsi getPosts() adalah sebuah List yang setiap item nya adalah sebuah obyek InstagramPost, atau disingkat List<InstagramPost> .

Nah, sekarang bagaimana kita bisa memanggil fungsi getPosts() ?

Kita akan memanggil fungsi getPosts() di class InstagramCards di file main.dart. Tapi karena fungsi getPosts() berpotensi mengubah tampilan aplikasi, maka kita perlu mengubah class IntagramCards jadi sebuah StatefulWidget. Kalau kita pakai VSCode, ada cara yang cukup mudah untuk mengubah class InstagramCards menjadi StatefulWidget. Klik kanan di class InstagramCards, lalu klik Refactor… seperti gambar berikut ini

gambar 2 - refactoring class InstagramCards

Setelah klik Refactor… , lalu klik “Convert to StatefulWidget”.

gambar 3 - mengubah class InstagramCards menjadi StatefulWidget

Dan class InstagramCards akan berubah jadi StatefulWidget. Akan ada class baru di bawah class InstagramCards, yaitu _InstagramCardsState yang memungkinkan kita mengubah tampilan aplikasi sesuai yang kita mau.

Kembali ke fungsi getPosts, sekarang kita bisa memanggil fungsi getPosts di class _InstagramCardsState. Untuk best practice, kita perlu memanggil getPosts di dalam class _InstagramCardsState, seperti berikut ini:

...

	class InstagramCards extends StatefulWidget {
	  @override
	  _InstagramCardsState createState() => _InstagramCardsState();
	}

	class _InstagramCardsState extends State {
	  Future<List<InstagramPost>> posts;

	  @override
	  void initState() {
		super.initState();
		posts = getPosts();
	  }

	  @override
	  Widget build(BuildContext context) {
		...

Class _InstagramCardsState punya fungsi build() yang dijalankan setiap kali state berubah. Kenapa kita tidak memanggil fungsi getPosts() di fungsi build(), melainkan di fungsi initState() ? Karena fungsi build() akan dipanggil setiap kali tampilan berubah, dan ini akan sangat sering terjadi. Kalau kita panggil fungsi getState() di dalam build(), kita akan menembaki API lebih sering dari yang dibutuhkan, berpotensi membuat aplikasi kita jadi lebih lambat.

Di kodingan di atas, setelah kita panggil fungsi getPosts(), kita mendapatkan obyek posts yang tipenya Future<List<InstagramPost>>. … Ngga perlu takut dengan tipe yang terdengar “asing” dan “rumit” ini ha3… Kalau diterjemahkan, obyek posts cuma bertipe Future yang didalamnya mengandung List berisi InstagramPost.

Sekarang kita bisa pakai obyek posts untuk menampilkan data yang ada didalamnya. Caranya, kita hapus fungsi build() didalam class _InstagramCardsState, lalu copy paste kodingan berikut ini :

...
  @override
  Widget build(BuildContext context) {
    // InstagramPost instagramPost = new InstagramPost(
    //     profilePicture: 'images/insta_profpic.jpg',
    //     username: 'meidika_wardana',
    //     picture: 'https://pintar-android.com/wp_res/insta_pic2.png',
    //     likeCount: 3,
    //     text: 'Lagu romantis dari Jason Mraz :D');

    // return ListView.builder(
    //   itemBuilder: (BuildContext context, int index) {
    //     return InstagramCard(instagramPost);
    //   },
    //   itemCount: 3,
    // );

    return FutureBuilder<List<InstagramPost>>(
      future: posts,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemBuilder: (BuildContext context, int index) {
              return InstagramCard(snapshot.data[index]);
            },
            itemCount: snapshot.data.length,
          );
        } else if (snapshot.hasError) {
          return Center(
            child: Text(
              "${snapshot.error}",
              textAlign: TextAlign.center,
            ),
          );
        }

        return CircularProgressIndicator();
      },
    );    
  }
  ...

Di kodingan di atas, banyak bagian yang kita komen (//). Bagian itu adalah kodingan asli fungsi build() sebelum kita ubah barusan. Kemudian kita buat supaya fungsi build() mengembalikan sebuah listview dengan menggunakan FutureBuilder. FutureBuilder ini cukup unik. Dia bisa menggunakan obyek posts yang bertipe Future, lalu di bagian builder-nya, kita mendapatkan context dan snapshot. Kita tidak menggunakan context, kita pakai snapshot saja. snapshot ini asalnya dari obyek posts, dan kita bisa mengecek jika snapshot punya data (snapshot.hasData), maka kita menampilkan listview menggunakan data dari snapshot. Kita menampilkan data satu per satu dalam InstagramCard, yang di kodingan di atas ditulis InstagramCard(snapshot.data[index]).

Kita juga bisa mengecek, jika snapshot berisi error (snapshot.hasError), maka kita bisa menampilkan errornya di widget Text.

Di bagian terakhir, kita menampilkan CircularProgressIndicator yang berupa tampilan loading. Tampilan loading ini adalah yang pertama ditampilkan di aplikasi sampai listview ditampilkan (jika snapshot berisi data), atau sampai error ditampilkan (jika snapshot berisi error).

Saatnya kita coba menjalankan aplikasi ini di emulator :D. Kalau tidak ada error, hasilnya akan seperti ini:

gambar 4 - tampilan list dari http request

Tampilan aplikasi di atas, asalnya dari firebase database yang kita ambil menggunakan kodingan2 kita sebelumnya yang cukup panjang di artikel ini. Secara pribadi, penulis sendiri kurang sreg dengan gambar di setiap postingan yang terlalu banyak bagian yang berwarna hitam.

gambar 5 - gambar postingan yang terlalu banyak bagian hitamnya

Kita bisa mengurangi bagian berwarna hitam tersebut, dengan mengeset height (tinggi) container gambar menjadi hanya setinggi gambarnya sendiri. Di file lib/instagram_card.dart, komen 1 baris property height untuk widget Container yang membungkus widget Image.

...
Row(
  //row #2
  children: [
	Expanded(
	  child: Container(
		child: // Image.asset(_instagramPost.picture)
			Image.network(
		  _instagramPost.picture,
		  fit: BoxFit.contain,
		  // height: _screenWidth,
		),
		color: Colors.black,
	  ),
	)
  ],
),
...

Nah.. sekarang kalau kita jalankan lagi, maka bagian warna hitam akan jadi lebih sedikit & menurut penulis, tampilan aplikasi jadi lebih enak dilihat.

gambar 6 - tampilan akhir aplikasi instagram_list

Sampai di sini artikel pintar-android.com kali ini, mengenai http request menggunakan Flutter. Semoga bermanfaat. Kodingan lengkap untuk tutorial ini ada di https://github.com/meidikawardana/instagram_list_http .

Jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel & tutorial lainnya yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Menampilkan ListView Dengan Data Dari Model Menggunakan Flutter

menampilkan listview dengan data dari model menggunakan Flutter

Di tutorial kali ini, kita membuat aplikasi yang menampilkan listview dengan data dari model menggunakan Flutter. Aplikasi yang akan kita buat, mirip Instagram yang menampilkan banyak postingan. Postingan2 tersebut akan menampilkan lirik dari lagu Jason Mraz yang berjudul “The Woman I Love”. Sebuah lagu romantis yang disukai penulis he3..

Mari kita mulai! Kita akan mulai koding dari aplikasi yang sudah dibuat di tutorial sebelumnya. Kodingannya bisa didownload di https://github.com/meidikawardana/like_app . Download project tersebut, ekstrak lalu rename folder hasil ekstrakan menjadi “instagram_list”. Kemudian buka folder tersebut di Visual Studio Code (VSCode).

Seharusnya akan ada banyak error di tab “Problems” di kanan bawah, karena file2 package yang dibutuhkan oleh Flutter harus didownload dulu. Jadi buka terminal di VSCode, lalu ketik: flutter pub get .

gambar 1 - jalankan flutter pub get

Setelah semua error hilang, tekan Ctrl+F5 untuk menjalankan project ke emulator. Kalau project berhasil dijalankan di emulator, kita bisa mulai mengubah kodingannya. Buka folder lib di kanan, lalu dobel klik file main.dart untuk membuka file tersebut.

Di file main.dart, ada 2 class yaitu class InstagramCards & class AplikasiLikeInstagram . Kita bisa memindahkan (refactoring) sebagian isi class InstagramCards supaya file main.dart lebih ringkas & lebih mudah dibaca. Buat file baru di dalam folder lib dengan klik kanan di folder lib, lalu pilih “New File”. Lalu beri nama: “instagram_card.dart”. Dobel klik untuk buka file baru tersebut, lalu isi file tersebut dengan kodingan berikut ini:

import 'package:flutter/material.dart';

class InstagramCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return null;
  }

}

Lalu kita kembali ke file main.dart. Sorot kodingan pakai mouse, dari baris ke-10 s/d baris ke-120. Kemudian cut kodingan tersebut. Kembali ke file instagram_card.dart, sorot: null di baris ke-6, lalu paste kodingan dari main.dart. Seharusnya akan ada error di baris ke-116 di instagram_card.dart. Hapus koma di baris tersebut supaya errornya hilang. Kemudian tekan Ctrl+S untuk menyimpan file instagram_card.dart. Kalau kesulitan, source nya ada di https://gist.github.com/meidikawardana/c84fab4c24be78fce1f0831b3cf2c61b

Sampai sini, kita sudah memindahkan widget card. Sekarang kita perlu memasukkan widget card tersebut ke class InstagramCards di file main.dart supaya widget card ditampilkan di aplikasi. Kita tinggal “memanggil” class InstagramCard di file main.dart seperti berikut ini:

import 'package:flutter/material.dart';
import 'package:like_app/instagram_card.dart';

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

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        InstagramCard()
      ],
    );
  }
}

...

Setelah itu, simpan file main.dart dengan menekan Ctrl+S. Seharusnya tampilan di aplikasi akan sama dengan sebelum kita memindah kodingan card.

Saat ini, card berisi postingan yang ditampilkan di aplikasi hanya ada 1 buah. Kita bisa dengan mudah menampilkan lebih dari 1 card. Kita tinggal menambahkan beberapa card dengan metode looping. Ubah class InstagramCards di main.dart jadi seperti ini:

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> cards = new List.generate(3, (i) => new InstagramCard());

    return ListView(
      children: cards,  /*<Widget>[
        InstagramCard()
      ],*/ 
    );
  }
}

Yang berwarna biru di kodingan di atas, adalah untuk membuat beberapa card menggunakan looping (perintah List.generate()), lalu membuat hasilnya (variabel cards) menjadi anak (children) dari widget ListView. Sedangkan kodingan sebelumnya berwarna merah yang menampilkan hanya 1 card, kita komen dengan tanda /* di sebelum dan tanda */ di sesudahnya. Coba jalankan lagi ke emulator dengan Ctrl+F5, maka akan tampil 3 card berisi postingan mirip instagram 😀

Saat ini, card hanya menampilkan teks dan gambar yang kita tulis di kodingan class InstagramCard. Kita perlu membuat supaya card menampilkan data dari sebuah class model, supaya nantinya kita bisa mengubah2 data yang ditampilkan dengan lebih mudah. Buat 1 folder baru di folder lib di sebelah kanan, dan beri nama “models” untuk folder baru tersebut. Di dalam folder “models”, buat file “instagram_post.dart” yang berisi class model yang kita perlukan.

gambar 1b - membuat file instagram_post.dart di folder models

Isi file “instagram_post.dart” adalah seperti berikut ini:

import 'package:flutter/material.dart';

class InstagramPost {
  final String profilePicture;
  final String username;
  final String picture;
  final int likeCount;
  final String text;

  InstagramPost(
      {@required this.profilePicture,
      @required this.username,
      @required this.picture,
      @required this.likeCount,
      @required this.text});
}

Struktur folder project kita akan seperti ini:

gambar 2 - struktur project listview flutter

Setelah kita membuat class model, kita bisa menggunakan class model tersebut untuk menampilkan data. Di file main.dart, kita bisa memanggil class tersebut, membuat sebuah obyek menggunakan model tersebut, lalu memasukkan obyek tersebut ke card supaya ditampilkan di card. Ubah kodingan main.dart jadi seperti berikut ini:

import 'package:flutter/material.dart';
import 'package:like_app/instagram_card.dart';

import 'models/instagram_post.dart';

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

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    InstagramPost instagramPost = new InstagramPost(
        profilePicture: 'images/insta_profpic.jpg',
        username: 'meidika_wardana',
        picture: 'images/insta_pic.jpg',
        likeCount: 1,
        text:
            'Lagi lucu2nya nih ... he3. Semoga jadi anak yang berbakti ke ortu :D');

    List<Widget> cards =
        new List.generate(3, (i) => new InstagramCard(instagramPost));

    return ListView(
      children: cards, /*<Widget>[
        InstagramCard()
      ],*/
    );
  }
}

...

Di kodingan di atas, di warna biru kita mengimport file instagram_post.dart ke file main.dart supaya kita bisa menggunakan class InstagramPost. Di warna hijau, kita membuat sebuah obyek menggunakan class InstagramPost. Obyek ini berisi data yang bisa tampilkan di sebuah card. Setelah kita membuat obyek tersebut, kita memasukkan obyek tersebut ke InstagramCard.

Saat ini kodingan kita akan error karena class InstagramCard perlu kita ubah supaya bisa menerima obyek InstagramPost. Jadi buka file instagram_card.dart, lalu ubah isinya jadi seperti berikut ini:

import 'package:flutter/material.dart';

import 'models/instagram_post.dart';

class InstagramCard extends StatelessWidget {

  final InstagramPost _instagramPost;

  InstagramCard(this._instagramPost);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          // row #1
          children: [
            Container(
              child: Image.asset(
                _instagramPost.profilePicture,
                width: 30,
                fit: BoxFit.contain,
              ),
              margin: EdgeInsets.all(10),
            ),
            Expanded(
              child: Text(
                _instagramPost.username,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {},
            )
          ],
        ),
        Row(
          //row #2
          children: <Widget>[
            Expanded(
              child: Image.asset(_instagramPost.picture),
            )
          ],
        ),
        Row(
          //row #3
          children: <Widget>[
            IconButton(
              icon: Image.asset(
                'images/ic_love.png',
                fit: BoxFit.contain,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Image.asset(
                'images/ic_comment.png',
                fit: BoxFit.contain,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Image.asset(
                'images/ic_send.png',
                fit: BoxFit.contain,
              ),
              onPressed: () {},
            ),
            Expanded(
              child: IconButton(
                icon: Image.asset(
                  'images/ic_save.png',
                  fit: BoxFit.contain,
                ),
                onPressed: () {},
                padding: EdgeInsets.only(right: 10),
                alignment: Alignment.centerRight,
              ),
            ),
          ],
        ),
        Row(
          //row #4
          children: <Widget>[
            Container(
              child: Text(
                _instagramPost.likeCount.toString() + ' like',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              padding: EdgeInsets.only(left: 10),
            ),
          ],
        ),
        Row(
          //row #5
          children: <Widget>[
            Container(
              child: RichText(
                text: new TextSpan(
                  style: new TextStyle(
                    fontSize: 14.0,
                    color: Colors.black,
                  ),
                  children: <TextSpan>[
                    TextSpan(
                        text: _instagramPost.username + ' ',
                        style: new TextStyle(fontWeight: FontWeight.bold)),
                    TextSpan(text: _instagramPost.text),
                  ],
                ),
              ),
              padding: EdgeInsets.only(left: 10, top: 5, bottom: 10),
              width: MediaQuery.of(context).size.width * 0.8,
            )
          ],
        ),
      ],
    );
  }
}

Di kodingan di atas, di warna biru kita mengimport file instagram_post supaya kita bisa menggunakan class InstagramPost di file instagram_card.dart. Kemudian di warna hijau, kita membuat sebuah obyek InstagramPost, dan menggunakan obyek tersebut supaya class InstagramCard bisa menerima obyek InstagramPost di file main.dart. Kita menerima obyek tersebut di fungsi yang biasa disebut constructor. Nah, setelah obyek tersebut diterima, kita bisa menggunakan obyek tersebut untuk menampilkan data2 di card, yang di kodingan di atas berwarna merah. Cukup banyak data yang perlu ditampilkan mulai dari gambar profile (profile picture) sampai teks postingan yang ada di card. Kalau kita jalankan lagi ke emulator, maka tampilan aplikasi masih sama, menampilkan 3 postingan seperti sebelumnya.

gambar 3 - tampilan aplikasi flutter pakai listview

Karena kita sudah memisahkan class InstagramCard jadi file tersendiri dari main.dart, kita bisa lebih mudah mengubah-ubah tampilan card. Kita tinggal mengubah class InstagramCard, maka tampilan semua card akan berubah. Misal kita mau mengubah gambar postingan, dari yang sekarang dimuat dari gambar di folder images, menjadi gambar yang dimuat dari internet. Maka kita tinggal mengubah class InstagramCard seperti berikut ini.

    ...
    Row( //file instagram_card.dart sekitar baris ke-39
      //row #2
      children: <Widget>[
        Expanded(
          child:
              // Image.asset(_instagramPost.picture)
              Image.network(_instagramPost.picture),
        )
      ],
    ),
    ...

Intinya kita tinggal mengubah dari Image.asset() jadi Image.network(). Cuma, kalau kita coba lagi jalankan aplikasi ke emulator, maka gambarnya tidak muncul dan di tab “debug console” di bagian bawah akan ada banyak error. Karena kita mencoba untuk memuat gambar dari variabel _instagramPost.picture, yang isinya adalah “images/insta_pic.jpg” (bisa dilihat di file main.dart sekitar baris ke-14). Padahal, kalau kita pakai Image.network(), maka kita harus memuat gambar dari sebuah link url.

Maka sekarang kita perlu mengubah obyek InstagramPost sesuai kebutuhan. Coba ubah obyek InstagramPost di file main.dart jadi seperti berikut ini:

	...
  @override //file main.dart sekitar baris ke-10
  Widget build(BuildContext context) {
    InstagramPost instagramPost = new InstagramPost(
        profilePicture: 'images/insta_profpic.jpg',
        username: 'meidika_wardana',
        picture:  'https://pintar-android.com/wp_res/insta_pic2.png',
        likeCount: 3,
        text: 'Lagu romantis dari Jason Mraz :D');


    List<Widget> cards =
        new List.generate(3, (i) => new InstagramCard(instagramPost));
	...

Nah.. sekarang kita bisa coba jalankan lagi aplikasi ke emulator dengan Ctrl+F5. Tapi ada kemungkinan aplikasi masih belum menampilkan gambar. Jadi kita kita bisa stop aplikasi dengan menekan tombol stop di VSCode, lalu tekan lagi Ctrl+F5. Maka aplikasi akan menampilkan gambar & isi card sesuai yang kita ubah di InstagramPost barusan.

gambar 4 - tampilan aplikasi dengan gambar baru

Dengan membuat obyek InstagramPost, kita lebih mudah mengubah isi card termasuk gambar yang dimuat. Jadi ngga percuma, kan, kita buat obyek InstagramPost? He3..

Tutorial kali ini sudah bisa dianggap selesai, tapi ada 1 hal kecil yang kurang. Kalau diperhatikan, postingan di aplikasi Instagram asli selalu memuat gambar yang ukurannya kotak sempurna (bujursangkar), kan? Nah, di aplikasi kita, ternyata tampilan gambar masih menyesuaikan ukuran asli gambar tersebut, & belum tentu kotak sempurna. Untuk memperbaiki ini, caranya cukup mudah. Tinggal ubah di file instagram_card.dart, class InstagramCard, lalu tambahkan kodingan seperti berikut ini.

...

class InstagramCard extends StatelessWidget {
  final InstagramPost _instagramPost;

  InstagramCard(this._instagramPost);

  @override
  Widget build(BuildContext context) {
    double _screenWidth = MediaQuery.of(context).size.width;

    return Column(
		...
        Row(
          //row #2
          children: [
            Expanded(
              child: Container(
                child:  // Image.asset(_instagramPost.picture)
                    Image.network(
                  _instagramPost.picture,
                  fit: BoxFit.contain,
                  height: _screenWidth,
                ),
                color: Colors.black,
              ),
            )
          ],
        ),
		...

Coba jalankan lagi aplikasinya ke emulator, maka tampilannya akan lebih mirip Instagram.

gambar 5 - aplikasi yang menampilkan listview dengan data dari model menggunakan Flutter sudah selesai

Secara pribadi, saya lebih suka tampilan sebelumnya. Tapi karena kali ini kita mau bikin aplikasi yang semirip mungkin dengan Instagram, maka kita perlu ubah sedikit hal kecil tadi 🙂 .

Kodingan lengkap untuk tutorial ini ada di https://github.com/meidikawardana/instagram_list .

Demikian tutorial kali ini, mengenai menampilkan listview dengan data dari model menggunakan Flutter. Semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel & tutorial lainnya yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Membuat Fitur Like Mirip Instagram Pakai Flutter

Di tutorial kali ini, kita akan membuat fitur like mirip Instagram pakai Flutter. Di tutorial sebelumnya, kita sudah membuat tampilan mirip Instagram menggunakan Flutter di Visual Studio Code (VSCode). Di tutorial kali ini, kita akan menambahkan sedikit fitur supaya kita bisa menekan tombol like seperti di aplikasi Instagram. Mari kita mulai 😀

Kodingan lengkap artikel sebelumnya ada di https://github.com/meidikawardana/like_app . Untuk yang ingin melihat hanya file2 utamanya saja, ada di gist di sini. Di gist tersebut hanya ada main.dart & pubspec.yaml saja.

Kodingan kita yang terakhir terdiri dari 2 class, yaitu class AplikasiLikeInstagram (utama) dan class InstagramCards yang menampilkan 1 postingan mirip Instagram. Di class InstagramCards kita sudah membuat beberapa tombol menggunakan widget IconButton. Salah satu tombol tersebut, adalah tombol Like berbentuk hati. Saat ini, tombol tersebut tidak aktif. Tidak akan terjadi apa-apa kalau kita menekan tombol tersebut. Nah, di tutorial kali ini kita akan membuat supaya tombol tersebut bisa berfungsi & mengubah jumlah like di postingan terkait.

Supaya tombol like bisa berfungsi, kita perlu mengubah class InstagramCards supaya menjadi turunan dari StatefulWidget. Sebelum itu, kita perlu memindah isi dari class InstagramCards ke sebuah class baru, supaya kodingan kita lebih rapi. Di bawah class InstagramCards, buat class _InstagramCardsState

class _InstagramCardsState {
  
}

Kemudian, pindahkan semua yang ada di dalam class InstagramCards, dari setelah kurung kurawal buka sampai sebelum kurung kurawal tutup ke class _InstagramCardsState . Kondisi 2 class tersebut, sekarang jadi seperti ini:

class InstagramCards extends StatelessWidget {

}

class _InstagramCardsState {
  
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
          ... // kodingan lengkap disingkat supaya lebih mudah dimengerti
      ],
    );
  }
}

Class InstagramCards sekarang jadi error (bergaris keriting merah), tapi kita akan betulkan. Jangan takut error, karena error bisa mempercepat kita mengerti he3..

gambar  1 - class InstagramCards error

Sekarang, ubah class InstagramCards jadi seperti ini:

class InstagramCards extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _InstagramCardsState();
  }
}

Artinya, InstagramCards sekarang jadi turunan dari StatefulWidget. Yaitu widget yang memungkinkan kita mengubah tampilan di aplikasi tanpa perlu pindah halaman. Di dalam StatefulWidget, kita bisa menulis logika yang kita mau, dan logika tersebut akan bisa mengubah tampilan aplikasi tanpa kita perlu pindah halaman.

gambar  2 - error ketika memanggil class _InstagramCardsState

Sekarang ada error ketika kita memanggil class _InstagramCardsState (di baris 8 pada gambar di atas). Supaya tidak error, kita perlu membuat _InstagramCardsState menjadi turunan dari class State yang disediakan Flutter. Kodingannya hanya perlu diubah sedikit:

gambar 3 - class _InstagramCardsState mengextend State

Setelah kita tambahkan kodingan extends State<InstagramCards> pada class _InstagramCardsState seperti pada gambar di atas, maka kita bisa menambahkan logika supaya tombol like bisa berfungsi. Kita bisa menambahkan variabel untuk menampung jumlah like, & variabel untuk menentukan apakah postingan sudah kita like atau belum. Misal kita namakan variabel _jumlahLike & _sudahLike, & kita taruh di class _InstagramCardsState seperti berikut ini.

gambar 4 - menambahkan 2 variabel

Kemudian pada tombol Like, kita tambahkan kodingan di dalam fungsi onPressed nya. Seperti ini:

                IconButton(
                  icon: Image.asset(
                    'images/ic_love.png',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                    if (!_sudahLike) {
                      setState(() {
                        _jumlahLike += 1;
                        _sudahLike = true;
                      });
                    } else {
                      setState(() {
                        _jumlahLike -= 1;
                        _sudahLike = false;
                      });
                    }
                  },
                ),

Kodingan yang kita tambahkan di atas, artinya jika _sudahLike = false maka kita set nilai variabel _jumlahLike jadi ditambah 1, dan _sudahLike = true. Kalau _sudahLike = true maka kita set kebalikannya. _jumlahLike jadi dikurangi 1, dan _sudahLike jadi false. Kita mengeset variabel2 tersebut, di dalam sebuah fungsi yang disediakan Flutter yaitu setState.

Kalau kita sudah melibatkan fungsi setState di aplikasi kita, maka seringnya fitur hot reload Flutter tidak berfungsi. Karena itu, jika kita ingin mencoba kodingan yang barusan, maka kita perlu restart aplikasi di emulator dengan menekan Ctrl+Shift+F5 di Visual Studio Code (VSCode) jika menggunakan OS Windows.

Setelah aplikasi berjalan di emulator, & kita coba, ternyata tombol Like belum berfungsi. Kenapa? karena kita baru mengubah variabel di state nya saja. Sedangkan kita belum mengubah tampilan tombol like & tulisan jumlah like. Ubah kodingan tombol like, dari seperti ini:

                IconButton(
                  icon: Image.asset(
                    'images/ic_love.png',
                    fit: BoxFit.contain,
                  ),
                  onPressed: () {
                     // ... dipersingkat supaya lebih mudah dimengerti
                  },
                ),

Menjadi seperti ini:

                IconButton(
                  icon: (!_sudahLike)
                      ? Icon(
                          Icons.favorite_border,
                          color: Colors.grey,
                          size: 32.0,
                        )
                      : Icon(
                          Icons.favorite,
                          color: Colors.red,
                          size: 32.0,
                        ),
                  onPressed: () {
                     // ... dipersingkat supaya lebih mudah dimengerti
                  },
                ),

Artinya, kita mengubah ikon tombol like, supaya kalau belum like (_sudahLike = false) maka kita tampilkan ikon Icons.favorite_border warna abu-abu. Sedangkan kalau sudah like, maka kita tampilkan ikon Icons.favorite warna merah.

Setelah itu, kita ubah tulisan jumlah like di row #4 sesuai variabel _jumlahLike. Penjelasan row #4 ada di artikel minggu lalu . Ubah kodingan row #4 jadi seperti ini:

            Row(
              //row #4
              children: [
                Container(
                  child: Text(
                    _jumlahLike.toString() + ' like',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  padding: EdgeInsets.only(left: 10),
                ),
              ],
            ),

Nah, sekarang kalau kita coba jalankan lagi aplikasi kita di emulator, maka jadinya seperti ini:

Tombol Like sudah aktif. Dan dengan membuat tombol like ini, kita sudah belajar beberapa hal mengenai Flutter, antara lain StatefulWidget, tipe variabel, if – else, dan alur logika di Flutter. Lumayan kan? he3..

Kodingan lengkap untuk tutorial kali ini, bisa dilihat di https://github.com/meidikawardana/like_app/tree/stateful_widget .

Sampai di sini tutorial mengenai membuat fitur like mirip Instagram pakai Flutter, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel & tutorial lainnya yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Membuat Tampilan Mirip Instagram Menggunakan Flutter di Visual Studio Code

membuat tampilan mirip instagram menggunakan flutter

Setelah kita bisa membuat aplikasi Hello World Flutter di artikel sebelumnya, sekarang kita akan belajar menggunakan widget2 yang ada di Flutter untuk membuat aplikasi dengan tampilan mirip instagram menggunakan Flutter di Visual Studio Code (VSCode). Hasil akhir akan seperti ini:

gambar 1 - hasil akhir aplikasi tampilan mirip instagram

Mari kita mulai! pertama2, buat project baru via command line:

flutter create like_app

Kemudian buka folder like_app tersebut di VSCode. Seperti di tutorial sebelumnya, buka file lib/main.dart lalu hapus isi file main.dart.

Kemudian isi file main.dart dengan kodingan aplikasi dasar Flutter seperti ini:

import 'package:flutter/material.dart';

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

class AplikasiLikeInstagram extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: null,
      ),
    );
  }
}

Jika aplikasi di atas dijalankan di emulator dengan menekan Ctrl+F5 di VSCode, maka tampilannya masih berupa halaman kosong warna putih. Nah, sekarang kita perlu merencanakan widget Flutter apa saja yang akan kita gunakan, mulai dari widget terluar sampai widget anak2nya yang paling dalam. Kita cicil dulu, mulai dari widget terluar sampai beberapa lapis berikutnya. Perhatikan gambar berikut ini:

gambar 2 - widget terluar app flutter.png

Kerangka widget ada di sebelah kanan. Widget yang terluar, yang paling cocok adalah ListView, yang di gambar di atas bergaris merah. Kenapa ListView? karena aplikasi mirip Instagram ini bisa menampilkan banyak postingan yang isinya bisa melebihi layar hape.

Di dalam ListView, ada widget Column, yang warna biru di gambar di atas. Widget Column ini bisa menumpuk widget di dalamnya secara vertikal. Widget apa yang akan kita tumpuk? Yang paling gampang adalah widget Row. Jadi kita akan membuat 5 widget Row, yang di gambar di atas berwarna hijau.

Untuk menerapkan ke kodingan, kita bisa membuat class baru yang disebut InstagramCards, seperti ini.

class InstagramCards extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children: [
            Row( //row #1
              children: [],
            ),
            Row( //row #2
              children: [],
            ),
            Row( //row #3
              children: [],
            ),
            Row( //row #4
              children: [],
            ),
            Row( //row #5
              children: [],
            ),
          ],
        ),
      ],
    );
  }
}

Row #1 isinya adalah foto profil, nama akun Instagram, & ikon menu di sebelah kanan. Kerangkanya seperti ini:

gambar 3 - kerangka row #1

Sebenarnya row #1 hanya berisi 3 widget. Yaitu Widget Image (warna oranye), Widget Text (warna hijau), & widget IconButton (warna hitam). Kalau menurut kerangka di atas, maka kita bisa membuat Row #1 jadi seperti ini:

Row( //row #1
  children: [
	Image.asset(
	  'images/insta_profpic.jpg',
	  width: 30,
	  fit: BoxFit.contain,
	),
	Text(
	  'meidika_wardana',
	  style: TextStyle(
		fontWeight: FontWeight.bold,
	  ),
	),
	IconButton(
	  icon: Icon(Icons.more_vert),
	  onPressed: () {},
	)
  ],
)

Hanya ada beberapa problem di kodingan di atas, yang membuat tampilan aplikasi nantinya tidak sesuai yang kita inginkan. Problem pertama, kita perlu menambahkan jarak di sekeliling widget Image (margin) sebesar 10 poin. Sehingga kita perlu membungkus widget Image dengan widget Container, & menambahkan atribut margin ke widget Container tersebut. Problem kedua, ikon menu tidak mentok ke kanan. Jadi kita perlu membuat supaya widget Text memenuhi Row #1 & mendesak widget IconButton ke paling kanan. Untuk ini, kita perlu membungkus widget Text dengan widget Expanded. Setelah penyesuaian, maka kodingan Row #1 jadi seperti berikut ini.

Row( 
// row #1 children: [ Container( child: Image.asset( 'images/insta_profpic.jpg', width: 30, fit: BoxFit.contain, ), margin: EdgeInsets.all(10), ), Expanded( child: Text( 'meidika_wardana', style: TextStyle( fontWeight: FontWeight.bold, ), ), ), IconButton( icon: Icon(Icons.more_vert), onPressed: () {}, ) ], )

Oh ya. Di kodingan di atas, kita menampilkan gambar dari file images/insta_profpic.jpg. Jadi kita perlu menambahkan folder images di folder project kita,  lalu menaruh file insta_profpic.jpg di dalamnya. Download file insta_profpic.jpg dari sini. Posisi file insta_profpic.jpg akan seperti ini:

Kemudian kita perlu mendaftarkan gambar tersebut ke file pubspec.yaml. Buka file pubspec.yaml (panah biru di gambar di atas), kemudian cari bagian

# assets:

di sekitar baris 42.

Hapus tanda # sebelum tulisan tersebut, lalu dibawahnya copy paste baris

# - images/a_dot_burr.jpeg

, ganti menjadi

# - images/insta_profpic.jpg

, & hapus tanda #. He3.. agak ribet ya? Karena kita harus sangat berhati2 mengubah file pubspec.yaml ini. Jika ada kesalahan penulisan misal kekurangan spasi, maka file gambar akan gagal ditampilkan di aplikasi.

Tekan Ctrl+S untuk menyimpan file pubspec.yaml, lalu kita bisa mencoba menjalankan aplikasi ini. Kita perlu memanggil class InstagramCards ke AplikasiLikeInstagram seperti ini:

class AplikasiLikeInstagram extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        body: InstagramCards(),
      ),
    );
  }
}

Nah, sekarang tekan Shift+F5 untuk stop aplikasi kalau sedang jalan di emulator. Lalu tekan Ctrl+F5 untuk menjalankan lagi app. Tampilannya seharusnya akan jadi seperti ini:

gambar 5 - row pertama selesai

Row #1 Selesai 😀 . Kalau ada problem ketika menjalankan aplikasi, coba cek lagi kodingan Anda. Bisa dibandingkan dengan kodingan s/d Row #1 selesai yang sudah saya buat gist nya di sini. Kalau sudah beres, sekarang kita lanjut ke Row #2.

Row #2 tampilannya seperti ini:

gambar 6 - tampilan row kedua

Coba tebak. Widget apa saja yang perlu kita pakai untuk Row #2 ini? … Ya. Kita cuma perlu pakai 1 widget yaitu widget Image. Hanya saja kita perlu membungkus widget Image tersebut di dalam widget Expanded supaya gambar tersebut bisa memenuhi lebar 1 baris di tampilan layar hape. Kodingan Row #2 seperti ini:

Row( //row #2
  children: <Widget>[
	Expanded(
	  child: Image.asset('images/insta_pic.jpg'),
	)
  ],
),

Jangan lupa download file insta_pic.jpg di sini, copy ke folder images, lalu tambahkan images/insta_pic.jpg di pubspec.yaml, seperti gambar di bawah ini.

Jika kita menekan Ctrl+F5 lagi, maka seharusnya tampilan di emulator seperti ini:

Sudah mulai klihatan, hasilnya ya? Selanjutnya, kita bisa isi konten untuk row #3. Dasarnya, di row #3 kita hanya perlu membuat 4 widget, keempat-empatnya adalah widget IconButton. Kita pakai widget IconButton karena nantinya kita perlu supaya widget tersebut bisa ditekan seperti tombol & sekaligus menampilkan gambar ikon. Kerangkanya seperti berikut ini.

gambar  9 - kerangka row #3

4 widget IconButton, di sebelah kanan digambarkan jadi kotak warna hijau. Di IconButton yang paling kanan, ada sedikit perbedaan. Karena kita perlu supaya posisi widget tersebut ada di ujung kanan, maka kita perlu membungkus widget tersebut dengan widget Expanded. Juga kita perlu mengatur supaya posisi widget tersebut rata kanan di dalam widget Expanded. Kodingan row #3 jadinya seperti ini:

Row( 
	//row #3
	children: <Widget>[
	  IconButton(
		icon: Image.asset(
		  'images/ic_love.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  IconButton(
		icon: Image.asset(
		  'images/ic_comment.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  IconButton(
		icon: Image.asset(
		  'images/ic_send.png',
		  fit: BoxFit.contain,
		),
		onPressed: () {},
	  ),
	  Expanded(
		child: IconButton(
		  icon: Image.asset(
			'images/ic_save.png',
			fit: BoxFit.contain,
		  ),
		  onPressed: () {},
		  padding: EdgeInsets.only(right: 10),
		  alignment: Alignment.centerRight,
		),
	  ),
	],
  ),

Kita perlu menambahkan 4 gambar lagi untuk setiap IconButton. Download keempat gambar tersebut di sini, lalu ekstrak ke folder images di project kita. Lalu tambahkan ke-4 gambar tersebut ke pubspec.yaml seperti sebelum2nya. Lebih jelasnya bisa dilihat di gambar berikut ini.

gambar 10 - gambar2 untuk row #3

Coba dijalankan lagi ke emulator. Hasilnya seharusnya akan sperti ini:

Kalau Anda mengalami problem sampai disini, Anda bisa mendownload gist yg isinya kodingan s/d row #3 selesai di sini.

Untuk row #4, kita cukup menampilkan 1 widget, yaitu widget Text

Karena posisinya yang agak menjorok ke kanan, kita perlu membungkus widget Text dengan widget Container, lalu memberi padding ke widget Container. Paddingnya cukup 10 poin. Jadi kodingan untuk row #4 sebagai berikut:

Row(
  //row #4
  children: <Widget>[
	Container(
	  child: Text(
		'1 like',
		style: TextStyle(fontWeight: FontWeight.bold),
	  ),
	  padding: EdgeInsets.only(left: 10),
	),
  ],
),

Untuk row #5, kita akan menggunakan widget yang cukup unik yaitu RichText. Kita memerlukan widget RichText karena kita perlu menampilkan tulisan yang bercetak tebal & tulisan yg biasa dalam 1 paragraf teks yang sama. Di dalam widget RichText, kita perlu menampilkan teks pakai widget TextSpan. bukan widget Text. Jadi kita memasang widget RichText, yang didalamnya kita isi dengan widget TextSpan bold & widget TextSpan non-bold / biasa. Kerangkanya seperti ini:

gambar 13 kerangka row #5

Kotak warna hijau adalah widget RichText. Kotak warna hitam adalah widget TextSpan di dalam widget RichText yg berisi teks bercetak tebal. Sedangkan sisa isi widget RichText adalah TextSpan berisi teks biasa / tidak bercetak tebal. Terakhir, kita perlu membungkus widget RichText dengan widget Container yang berwarna kuning di gambar di atas. widget Container ini bertugas memberi padding di sekitar widget RichText, dan membatasi lebar widget RichText supaya tidak melebihi ukuran layar. Kodingannya seperti ini:

Row(
  //row #5
  children: <Widget>[
	Container(
	  child: RichText(
		text: new TextSpan(
		  style: new TextStyle(
			fontSize: 14.0,
			color: Colors.black,
		  ),
		  children: <TextSpan>[
			TextSpan(
				text: 'meidika_wardana ',
				style: new TextStyle(fontWeight: FontWeight.bold)),
			TextSpan(
				text:
					'Lagi lucu2nya nih ... he3. Semoga jadi anak yang berbakti ke ortu :D'),
		  ],
		),
	  ),
	  padding: EdgeInsets.only(left: 10, top: 5, bottom: 10),
	  width: MediaQuery.of(context).size.width * 0.8,
	)
  ],
),

Setelah row #5 selesai, selesailah aplikasi sederhana kita, yang menampilkan tampilan mirip instagram menggunakan flutter di Visual Studio Code. Kodingan kita sampai dengan sekarang, bisa didownload di https://github.com/meidikawardana/like_app . Aplikasi kita ini akan kita kembangkan sedikit lagi, supaya kita bisa belajar mengenai StatefulWidget. Karena artikel kali ini cukup panjang, jadi kita akan sambung di artikel berikutnya 😀

Sampai di sini artikel mengenai membuat tampilan mirip instagram menggunakan flutter, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Membuat Aplikasi Hello World Menggunakan Flutter di Visual Studio Code

Membuat aplikasi hello world menggunakan flutter

Di artikel kali ini, kita akan menginstall dan menyiapkan Visual Studio Code  (VSCode) untuk koding Flutter, kemudian kita akan membuat aplikasi Hello World menggunakan Flutter. Untuk bisa mengikuti artikel ini, Anda harus menginstall SDK Flutter lebih dulu di laptop. Di artikel2 sebelumnya, saya sudah menulis bagaimana kita bisa menginstall SDK Flutter dengan Android Studio maupun tanpa Android Studio. Oh ya, dalam artikel kali ini kita akan menggunakan OS Windows 10.

Download Visual Studio Code

Baiklah, mari kita mulai. Download VSCode di https://code.visualstudio.com/download . Untuk yang memakai OS (Operating System) Windows, bisa download yang versi Windows. Install seperti Anda menginstall aplikasi2 lain. Tinggal klik Next2 aja 😀

Gambar 1 - Download VSCode sesuai sistem operasi Anda

Install Ekstensi Flutter di Visual Studio Code

Setelah VSCode terinstall, kita perlu menginstall ekstensi Flutter supaya kita bisa koding Flutter di VSCode. Buka VSCode, kemudian klik ikon Extensions di kiri tengah. Lalu ketik: flutter . Lebih jelasnya, lihat gambar berikut ini:

 

Klik di baris Flutter, lalu klik tombol Install warna hijau:

Gambar 3 - klik di baris Flutter, lalu klik Install untuk menginstall Flutter

Membuat Project Flutter

Dengan ekstensi Flutter yang barusan kita install saja, kita sudah bisa koding Flutter di VSCode. Mari kita coba. Buka Terminal di VSCode. Caranya, klik View -> Terminal. Seperti gambar berikut ini.

Gambar 4 - Buka Terminal di Visual Studio Code

Terminal / Command Line akan terbuka. Kemudian ketik beberapa perintah berikut ini:

mkdir C:\flutterApps

Ini untuk membuat folder flutterApps di drive C: . Folder flutterApps akan menjadi folder untuk semua project Flutter kita ke depannya.

cd C:\flutterApps

Perintah ini untuk masuk ke folder flutterApps melalui command line.

flutter create hello_world_project

Nah.. akhirnya dengan perintah ini, kita membuat project Flutter. Nama project contoh ini adalah hello_world_project. Anda bisa menamakannya sesuka Anda, hanya saja ada aturan penamaannya, yaitu harus menggunakan huruf kecil dan garis bawah (underscore) seperti di contoh.

Setelah perintah flutter create, akan ada banyak baris di command line. Kalau project nya sukses dibikin, maka di command line baris2 terakhirnya seperti berikut ini:

Gambar 6 - Project Flutter berhasil dibuat

Kalau ada tulisan “All done!” seperti di panah kuning, maka sudah pasti project berhasil dibikin. Dan seperti dijelaskan di panah merah, kode aplikasi kita ada di dalam folder C:\flutterApps\hello_world_project\lib\main.dart.

Membuat Aplikasi Hello World Menggunakan Flutter

Sekarang kita bisa membuka folder hello_world_project tersebut di VSCode. Klik File -> Open Folder… -> lalu buka folder hello_world_project

Gambar 7 - Buka folder project Flutter yang baru dibuat

Setelah folder project dibuka, klik folder lib lalu klik file main.dart.

Gambar 8 - Buka file main.dart

Kemudian hapus seluruh isi file tersebut, karena kita akan menulis koding dari nol. Supaya kita mengerti bagaimana caranya membuat aplikasi dari nol.

Baris pertama yang kita ketik adalah,

import 'package:flutter/material.dart';

Kemudian kita membuat fungsi utama dart yang menjalankan sebuah aplikasi Flutter. Tambahkan baris berikut ini:

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

AplikasiHelloWorld adalah aplikasi Flutter, yang harus kita buatkan kodingannya. Buat class AplikasiHelloWorld seperti berikut ini:

class AplikasiHelloWorld extends StatelessWidget {
   //isi class
}

Di kodingan diatas, class AplikasiHelloWorld meng-extend StatelessWidget. Artinya, class AplikasiHelloWorld adalah turunan dari class StatelessWidget. Sehingga kita bisa menggunakan semua fitur yang disediakan oleh class StatelessWidget.

Sampai di sini, class AplikasiHelloWorld masih error, yang ditandakan ada garis bawah keriting warna merah seperti gambar berikut ini.

Gambar 9 - Koding aplikasi Flutter dari 0

Kita bisa mendapatkan penjelasan kenapa error, dengan mengarahkan kursor mouse ke bagian yang berwarna merah tersebut.

Gambar 10 - Penjelasan error Flutter

Secara sederhana, artinya kita perlu membuat fungsi di dalam class AplikasiHelloWorld yang diperlukan supaya kodingan tersebut bisa jalan.

Di kodingan, ganti //isi class dengan kodingan sebagai berikut:

@override
Widget build(BuildContext context) {
   // TODO: implement build
   return null;
}

Ini artinya kita membuat fungsi build untuk membangun aplikasi kita menggunakan Flutter.

Selanjutnya kita akan menampilkan teks bertuliskan Hello World! di aplikasi kita. caranya, ganti // TODO: implement build return null; dengan kodingan berikut ini.

return MaterialApp(
   title: 'Aplikasi Hello World',
   theme: ThemeData(
      primarySwatch: Colors.green,
   ),
   home: Text('Hello World!'),
);

Ini artinya, aplikasi kita menampilkan sebuah Widget MaterialApp dengan parameter title (judul) ‘Aplikasi Hello World’, theme (tema) warna green (hijau), dan home (layar) dengan Widget Text bertuliskan ‘Hello World!’.

Menjalankan Aplikasi Flutter Di Emulator

Kita bisa mencoba menjalankan aplikasi kita. Simpan file main.dart dengan menekan tombol Ctrl+S di VSCode, lalu nyalakan emulator Genymotion atau Emulator bawaan Android Studio (Emulator AVD). Kemudian kembali ke VSCode, lalu tekan tombol Ctrl+F5. Setelah menunggu beberapa saat, maka emulator akan menampilkan aplikasi kita seperti ini:

Gambar 11 - Tampilan aplikasi Hello World Flutter

Membuat Tampilan Menjadi Lebih Baik Dengan Widget Scaffold

Kalau kita perhatikan, maka dari beberapa parameter tadi yang kelihatan di emulator hanyalah teks Hello World! saja. Parameter lainnya seperti theme & title tidak berpengaruh. Supaya parameter theme bisa berpengaruh, kita perlu mengisi parameter home dengan Widget Scaffold. Jadi kita perlu mengganti

home: Text('Hello World!'),

dengan kodingan berikut ini:

      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),

Ini artinya, kita mengisi parameter home (layar) dengan Widget Scaffold, yang mempunyai appBar (bar aplikasi) yang bertuliskan ‘Hello World App’. Widget Scaffold juga mempunyai body (konten) yang di contoh ini kita isi dengan Widget Text bertuliskan ‘Hello World!’.

Kalau tadi Anda belum keluar dari aplikasi di emulator & belum menekan Ctrl+S, kita bisa memanfaatkan fitur hot reload supaya apa yang kita tulis barusan dapat langsung tampil di emulator, cukup dengan menekan Ctrl+S lagi. Hasilnya akan seperti ini:

Gambar 12 - Tampilan aplikasi Hello World Flutter dengan Widget Scaffold

Masih ingat dengan theme green (hijau) yang kita set di MaterialApp tadi? Theme tersebut membuat tulisan Hello World App yang di bagian atas menjadi berlatar belakang hijau seperti di gambar barusan.

Kodingan Lengkap Aplikasi Hello World Flutter

Berikut ini kodingan lengkap aplikasi Hello World Flutter yang sudah kita buat:

import 'package:flutter/material.dart';

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

class AplikasiHelloWorld extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Aplikasi Hello World',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

Menginstall Ekstensi Prettier

Sampai di sini, kodingan kita sudah ada lebih dari 20 baris. Pastinya Anda sudah merasa cukup kesulitan mengatur indentasi, kurung buka kurung tutup dan format lainnya di kodingan, kan?

Nah, supaya kita lebih mudah memformat kodingan, kita perlu menginstall ekstensi Prettier di VSCode. Caranya, klik ikon Extensions di kiri tengah, lalu ketik: prettier . Klik “Prettier – Code Formatter”, lalu klik Install untuk menginstall ekstensi tersebut ke VSCode.

Gambar 13 - Install Prettier Code Formatter Di Visual Studio Code

Mengaktifkan formatOnSave

Setelah kita install ekstensi tersebut, belum ada pengaruh apa2 yang terlihat di kodingan kita. Supaya terasa pengaruhnya, kita perlu mengaktifkan settingan formatOnSave di VSCode supaya kodingan kita otomatis diformat ketika kita menyimpan file di VSCode. Ya, ketika kita menekan Ctrl+S.

Untuk mengaktifkan formatOnSave, Klik File -> Preferences -> Settings -> ketik: formatOnsave -> lalu centang seperti pada gambar berikut.

Gambar 14 - Mengaktifkan formatOnSave di Visual Studio Code

Kita bisa mencoba membuat kodingan kita menjadi berantakan, contohnya seperti di gambar berikut ini:

Gambar 15 - Membuat kodingan Flutter jadi berantakan

Berantakan sekali.. saya sendiri bisa stress kalau harus memformat kodingan di atas, apalagi kalau sedang dikejar deadline he3.. . Tapi dengan ekstensi Prettier & settingan formatOnSave, maka kita cukup menekan Ctrl+S, maka kita menyimpan sekaligus memformat file tersebut. Bisa dicoba, jika sekarang kita menekan Ctrl+S, format kodingan kita akan menjadi bagus:

Gambar 16 - Format kodingan setelah menekan Ctrl dan S

Terakhir, kita bisa menyimpulkan bagaimana kodingan kita ditampilkan di emulator seperti ini:

Gambar 17 - Perbandingan kodingan dengan tampilan aplikasi Flutter

Panah merah: tampilan warna hijau dari theme yang kita set dengan green

Panah kuning: tampilan appBar, dengan teks sesuai yang kita koding di aplikasi

Panah biru: layar utama aplikasi, yaitu body Widget Scaffold, adalah teks dengan tulisan Hello World! .

Sampai di sini artikel kita kali ini, semoga bermanfaat dan jangan lupa like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

===============================================================

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Menginstall Flutter Tanpa Android Studio Di Windows

Menginstall Flutter Tanpa Android Studio

Kali ini, pintar-android.com akan membahas bagaimana caranya menginstall flutter tanpa Android Studio di Windows 10. Kita tidak akan menginstall Android Studio sama sekali, supaya teman2 yang memakai laptop kentang / ber-spek (maaf) rendah bisa mencoba koding menggunakan Flutter. Untuk yang ingin mencoba menginstall Flutter menggunakan Android Studio, bisa cek lagi artikel pintar-android.com sebelumnya di link https://pintar-android.com/wordpress/2019/08/cara-menginstall-flutter-di-windows-menggunakan-android-studio/ .

Mari kita mulai! Di Windows 10, buka drive C: di Windows Explorer, lalu buat folder dengan nama “Android” di drive C: tersebut sehingga alamat foldernya menjadi C:\Android . Folder ini akan kita pakai sebagai folder utama kita sepanjang artikel ini.

Menginstall OpenJDK8

Selanjutnya download OpenJDK dari link https://github.com/AdoptOpenJDK/openjdk8-binaries/releases/download/jdk8u222-b10/OpenJDK8U-jdk_x64_windows_hotspot_8u222b10.zip . Ukuran file-nya sekitar 99MB. File ini adalah yang terbaru ketika artikel ini ditulis. Untuk file yang lebih baru, bisa dicek di https://github.com/AdoptOpenJDK/openjdk8-binaries/releases . Jangan lupa, nama file-nya selalu diawali dengan “OpenJDK8U-jdk_x64_windows_hotspot” lalu bertipe file .zip.

Kalau sudah selesai didownload, ekstrak file tersebut lalu buka folder hasil ekstrakannya. di dalamnya ada folder dengan nama semacam “jdk8u222-b10”. Ubah nama folder tersebut menjadi “openjdk” lalu pindahkan folder tersebut ke dalam folder C:\Android yang sudah kita buat sebelumnya sehingga alamatnya menjadi C:\Android\openjdk .

Menginstall Flutter SDK

Download Flutter SDK terbaru di https://flutter.dev/docs/development/tools/sdk/releases . ketika artikel ini ditulis, file SDK terbaru adalah https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.7.8+hotfix.4-stable.zip . kalau sudah selesai didownload, ekstrak file tersebut lalu pindahkan folder hasil ekstrakan ke dalam folder Android sehingga alamatnya menjadi C:\Android\flutter .

Menginstall Command Tools untuk Android

Download Command Tools Android di https://developer.android.com/studio/#command-tools . Pilih yang untuk Windows. Saat artikel ini ditulis, filenya adalah https://dl.google.com/android/repository/sdk-tools-windows-4333796.zip . Setelah selesai didownload, ekstrak lalu pindahkan folder “tools” hasil ekstrakan ke dalam folder Android. Kemudian ubah nama folder “tools” menjadi “sdk” sehingga alamatnya menjadi C:\Android\sdk .

Menyetting beberapa Environment Variables

Kita perlu menyetting beberapa Environment Variables di Windows supaya tools-tools yang sudah kita download bisa kita panggil darimanapun kita mau melalui Command Prompt. Buka Command Prompt, lalu copy-paste:

setx JAVA_HOME "C:\Android\openjdk"

Kemudian tekan Enter di keyboard untuk menjalankan perintah tersebut. Hasilnya seperti ini:Gambar 1 - set environment variables di Windows untuk flutter

Berikutnya jalankan perintah ini satu per satu di Command Prompt:

setx ANDROID_HOME "C:\Android"
setx ANDROID_SDK_ROOT "C:\Android\sdk"
setx path "%path%;"C:\Android\sdk;C:\Android\sdk\bin;C:\Android\flutter\bin"

Setelah itu, tutup command prompt lalu buka lagi supaya settingan2 tersebut tersimpan dan bisa dijalankan di Windows.

Karena Flutter memerlukan SDK Android supaya bisa jalan, kita perlu mendownload SDK Android dengan menjalankan beberapa perintah berikut ini di command prompt, satu per satu:

sdkmanager "platform-tools"
sdkmanager "build-tools;28.0.3"
sdkmanager "platforms;android-28"

Jika muncul pertanyaan “Accept? y/N” di Command Prompt, ketik: y lalu Enter di keyboard supaya Android SDK bisa diinstall sampai selesai. Berikut ini contoh ketika mendownload platform-tools.

mendownload platform-tools android

Mengkonfigurasi Flutter

Ketikkan perintah berikut ini di command prompt, supaya flutter mengenali SDK Android yang sudah kita download tadi.

flutter config --android-sdk C:\Android\

Menginstall Emulator

Untuk menjalankan aplikasi flutter, kita perlu menginstall emulator. untuk mendownload image emulator, jalankan perintah berikut ini di Command Prompt:

sdkmanager "system-images;android-28;default;x86_64"

jika ditanya license Accept y/N, maka ketik: y .

Jalankan 1 perintah lagi untuk mendownload tools emulator android:

sdkmanager emulator

Membuat 1 emulator baru

Buat emulator dengan nama “google_pixel” dengan menjalankan perintah ini di Command Prompt:

avdmanager -s create avd -n google_pixel -k "system-images;android-28;default;x86_64"

Jika ada pertanyaan, ketik: no . Ini Penting, karena sebelum2nya kita selalu menjawab: y (Yes).

Menjalankan emulator

Untuk menjalankan emulator, jalankan perintah:

flutter emulators –launch google_pixel

Seperti ini lah penampakannya jika berhasil menjalankan emulator avd dengan perintah barusan:

menjalankan emulator avd

Mengecek apakah Flutter terinstall dengan baik

Kita bisa mengecek apakah Flutter terinstall dengan baik, dengan menjalankan perintah sbb:

flutter doctor -v

Seharusnya akan muncul tampilan mirip seperti ini:

menjalankan flutter doctorJika ada centangan yang berwarna merah, berarti ada error. Dan harus dibetulkan sampai semua centangan untuk Flutter, Android toolchain, & Connected Device berwarna hijau. Jika ketiga tools tersebut berwarna hijau, artinya instalasi Flutter berhasil dan Flutter siap digunakan di Windows 10.

Demikian artikel pintar-android.com kali ini tentang flutter. Semoga membantu teman2 yang tidak bisa menggunakan Android Studio karena spek komputer yang tidak memungkinkan. Artikel ini sebagian besar terinspirasi dari https://medium.com/@quicky316/install-flutter-sdk-on-windows-without-android-studio-102fdf567ce4 , dengan modifikasi dan penyederhanaan sehingga lebih mudah dimengerti.

Di artikel2 selanjutnya akan kita bahas bagaimana mulai koding flutter di Visual Studio Code tanpa Android Studio. Like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

Tersedia buku-buku untuk belajar pemrograman Android.

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

Cara Menginstall Flutter di Windows Menggunakan Android Studio

Flutter dan Android Studio

Di artikel kali ini, kita akan membahas mengenai Flutter, yang di Google I/O 2019 diumumkan telah merilis versi 1.5. Apa itu Flutter? Mengutip dari laman websitenya, Flutter adalah “framework UI baru, untuk aplikasi mobile yang diperkenalkan oleh Google. Flutter membantu para programmer membuat aplikasi native berkualitas tinggi baik untuk iOS dan Android”. Di artikel ini penulis juga akan membahasa cara menginstall Flutter di Windows menggunakan Android Studio.

Penulis sempat mencoba menginstall & membuat aplikasi sederhana menggunakan Flutter, mengikuti tutorial di https://flutter.io/get-started/ . Performa aplikasi yang dibuat dengan Flutter, dirasakan penulis tidak ada bedanya dengan aplikasi yang dibuat menggunakan Java. Pun pembuatannya sama2 menggunakan Android Studio.

Mengapa Flutter menarik untuk diikuti perkembangannya? Ada beberapa alasan, menurut penulis.

  1. Flutter bersifat open source. Bisa diartikan Flutter boleh dipakai secara gratis.
  2. Flutter disupport oleh Google. Google sendiri sudah membuat beberapa app menggunakan Flutter.
  3. Kita bisa membuat aplikasi menggunakan Flutter di Android Studio. Karena Flutter menyediakan plugin untuk Android Studio.
  4. Sekali bikin aplikasi menggunakan Flutter, kita bisa membuat file apk untuk dipasang di Google Playstore dan file ipa untuk dipasang di Apple Appstore. Dari pengalaman penulis membuat aplikasi androidnya, performa dan tampilan aplikasi kelihatan sama dengan yang dibuat menggunakan java.
  5. Flutter menggunakan cara yang berbeda dari framework multiplatform lainnya, yang bisa membantu kita membuat aplikasi dengan tampilan menarik dan performa yang lebih bagus. Detailnya bisa dibaca di salah satu artikel Medium ini.

Sekarang penulis akan mencoba membagikan langkah2 cara menginstall Flutter di Windows. Pertama2, buka laman https://flutter.io/get-started/install/ , lalu pilih OS yang digunakan. Penulis sendiri menggunakan Windows 10, jadi untuk selanjutnya akan diperlihatkan langkah2 untuk Windows. Tapi seharusnya tidak jauh beda dengan Linux dan MacOS.

Kemudian ikuti tutorial di https://flutter.dev/docs/get-started/install/windows . Karena di laptop penulis Android Studio 3.4.2 & Emulator (Genymotion / AVD) sudah siap, maka tinggal menginstall Flutter dari git. Buka command prompt, pergi ke folder yang diinginkan misal C:/flutter, lalu jalankan perintah untuk meng-clone Flutter menggunakan git:

git clone -b stable https://github.com/flutter/flutter.git

Setelah prosesnya selesai, tambahkan path untuk user variables di Control Panel. Buka Desktop komputer, klik ikon Windows di kiri bawah, ketik: env , lalu pilih “Edit environment variables for your account”.  Di path user variables, klik Path, lalu klik tombol Edit, lalu tambahkan baris baru yg isinya: C:\flutter\flutter\bin .

Setelah menambahkan path, tutup semua command prompt. Lalu di folder yang ada clone Flutter jalankan perintah untuk mengecek dan menyelesaikan instalasi Flutter:

flutter doctor

Ini screenshot dari laptop penulis, setelah selesai menjalankan perintah “flutter doctor”.
Hasil flutter doctor

Bagian yang ditandai biru, adalah karena kita belum menginstall plugin Flutter dan Dart di Android Studio. Kita akan menginstall plugin tersebut sebentar lagi. Bagian yang ditandai merah, bisa diabaikan jika kita mau menggunakan Android Studio untuk koding Flutter. Bagian warna kuning, ada peringatan “no devices available”. Ini karena penulis sedang tidak menyalakan emulator apapun. Flutter bisa mengenali emulator Genymotion dan emulator AVD bawaan Android Studio.

Setelah 1 emulator Genymotion dinyalakan, dan di command prompt dijalankan perintah

flutter devices

maka hasilnya seperti ini:

hasil flutter devices

Sampai di sini, Flutter sudah mengenali emulator yang sedang berjalan. Instalasi flutter sudah selesai, dan tidak ada masalah di command line. Selanjutnya mengikuti link https://flutter.dev/docs/get-started/editor, kita perlu menginstall 1 Plugin Flutter di Android Studio. Buka Android Studio 3.4.2, buka menu File>Settings>Plugins . Di bagian atas klik Marketplace untuk mencari plugin di marketplace. Lalu ketik: flutter & pencet Enter di keyboard . Jika ada dialog yang muncul, klik Yes untuk menginstal plugin Dart yang dibutuhkan oleh plugin Flutter.install plugin dart

Tunggu proses downloadnya, lalu klik Restart IDE supaya pluginnya bisa jalan di Android Studio. Kalau ada dialog lagi, klik tombol Restart lagi.

Setelah Android Studio terbuka lagi, tunggu proses gradle di bagian bawah sampai selesai, lalu klik File>New>New Flutter Project. Di sini kita bisa memilih tipe project Flutter yang mau kita buat. Apakah berupa aplikasi, plugin, package, atau modul untuk Flutter. Pilih tipe “Flutter Application”, lalu klik Next.Memilih Flutter Application

Selanjutnya, isi inputan nama aplikasi di “project name”, dan di inputan “Flutter SDK Path”, arahkan ke folder repo dari git di langkah awal2 tadi ketika instalasi Flutter. Di artikel ini, foldernya adalah C:\flutter\flutter. Jangan mengklik “Install SDK”, karena kita sudah menginstall SDK menggunakan git. Kemudian pilih Project location, dan terakhir Anda bisa mengubah Project Description jika Anda mau. Kalau sudah, klik tombol Next.

Konfigurasi project Flutter

 

Berikutnya Anda bisa mengisi company domain. Isi dengan: pintar-android.com . Project ini akan memakai library androidx karena androidx sudah tercentang. Project Flutter bisa mendukung Kotlin untuk app android & Swift untuk app iOS, dengan mencentang sesuai kebutuhan. Klik tombol Finish untuk membuka project di Android Studio.

Nama package Flutter

Setelah proses create project selesai, akan tampil project Flutter, siap kita modifikasi. Yang menarik perhatian bagi penulis adalah struktur projectnya. Dari awal sudah disediakan file main.dart yang berperan seperti MainActivity.java di project Java Android Studio, terletak di folder flutter_app (sesuai nama project), lalu di dalam folder lib. Selain itu sudah ada folder android dan ios yang berisi java & C++ yang mempunyai struktur persis seperti project Java & C++ native. Jangan lupa, kita juga bisa menambahkan kode kotlin & swift di project Flutter.

Tampilan project Flutter di Android Studio

Jika kita mau membuat aplikasi menggunakan Flutter, kita menggunakan bahasa pemrograman Dart. Bahasanya cukup simpel & berorientasi obyek, seharusnya tidak terlalu susah untuk mempelajarinya. Apalagi jika sudah pernah koding dengan bahasa Java atau Swift. Penulis sudah mengikuti tutorial di https://flutter.dev/docs/get-started/codelab , dan penulis sudah menguploadnya ke github untuk dipelajari di https://github.com/meidikawardana/startup_namer .

Terakhir, untuk programmer Android, Flutter memberikan beberapa info tambahan supaya bisa menggunakan Flutter dengan memanfaatkan pengetahuan yang sudah dimiliki ketika koding menggunakan java. Bisa dibaca di link https://flutter.dev/docs/get-started/flutter-for/android-devs .

Demikian artikel pintar-android.com mengenai cara menginstall Flutter di Windows, semoga bermanfaat. Like page pintar-android.com di FB untuk mendapatkan artikel2 yang pastinya berguna di dunia pemrograman khususnya android.

Tersedia buku-buku untuk belajar pemrograman Android.

Buku pertama, menginstall Android Studio: https://play.google.com/store/books/details?id=EOufCwAAQBAJ .

Buku kedua, membuat recyclerview yang menampilkan gambar2 dari internet menggunakan json: https://play.google.com/store/books/details?id=b-boDAAAQBAJ .

Buku registrasi user, membuat fitur login & register: https://play.google.com/store/books/details?id=FHMqDwAAQBAJ

Buku Onesignal: https://play.google.com/store/books/details?id=4n1oDwAAQBAJ

 

Apa itu app-ads.txt, dan bagaimana cara menambahkan app-ads.txt

Beberapa hari ini banyak programmer android di grup-grup FB yang menanyakan, apa itu app-ads.txt, dan bagaimana cara menambahkan app-ads.txt di aplikasi android mereka. Artikel kali ini akan membahas mengenai app-ads.txt. Semoga membantu.

Gambar: apa itu app-ads.txt

Pada tanggal 9 Agustus 2019, penulis menerima email dari Google Admob mengenai app-ads.txt. Email tersebut sebenarnya cukup jelas memberi petunjuk mengenai app-ads.txt. Bunyi email tersebut kira2 seperti ini:

Menerapkan file app-ads.txt dengan benar sebelum pemberlakuan peraturan app-ads.txt

Google selalu berkomitmen untuk melindungi keamanan pendapatan yang Anda dapatkan dari aplikasi android Anda. Tantangan utama yang dihadapi adalah penipuan inventaris dari pihak2 yang berniat buruk. Untuk membantu para pengiklan memerangi tantangan ini, kami menyiapkan dan menerapkan app-ads.txt di semua system iklan kami untuk memastikan pengeluaran biaya oleh pengiklan dapat sampai ke penerbit iklan yang tepat, yaitu Anda yang memasang iklan di aplikasi Anda.

Apa itu app-ads.txt?

App-ads.txt adalah turunan dari standar ads.txt. App-ads.txt menyediakan mekanisme untuk para pemilik website supaya bisa membuktikan bahwa mereka adalah penerbit iklan yang diakui oleh Google. Tujuan pemasangan app-ads.txt adalah untuk melindungi para pembuat aplikasi dari penipuan iklan.

Apa yang berubah dan apa pengaruhnya untuk Anda?

Kami dengan senang hati mengumumkan bahwa AdMob akan mendukung dan memberlakukan peraturan terkait app-ads.txt bagi para penerbit iklan yang sudah memasang app-ads.txt di website mereka, mulai 27 Agustus 2019.

Untuk menyiapkan diri terkait perubahan ini, mohon pastikan app-ads.txt yang dipasang di website Anda tidak mengandung error atau typo apapun.

Bagaimana Anda dapat memastikan file app-ads.txt sudah terpasang dengan benar?

Jika file Anda mengandung error atau typo, AdMob akan menghentikan penayangan iklan di aplikasi Anda karena file app-ads.txt yang Anda pasang akan dianggap sebagai obyek penegakan peraturan.

Jadi sangatlah penting untuk memasang file app-ads.txt dan membetulkan semua error sebelum 27 Agustus 2019, atau file app-ads.txt perlu dihapus dari website Anda untuk menghindari kehilangan pendapatan dari iklan yang tidak disengaja.

Karena itu, kami mengundang Anda untuk dengan hati-hati memeriksa file app-ads.txt Anda jika Anda sudah memasang file tersebut sebelum tanggal deadline. File tersebut harus dipasang di folder utama di website Anda yang terdaftar di Google Play Store atau iOS App Store.

Demikian penjelasan dari Google via email yang penulis terjemahkan ke bahasa Indonesia. Nah, sekarang bagaimana cara memasang file app-ads.txt? Berikut ini langkah2nya.

Langkah pertama. Cari ID publisher Admob Anda. biasanya formatnya adalah: pub-xxxxxxxxxxxxxxxx, dengan “x” adalah angka misalnya pub-9679776591517154. ID publisher ini bisa dilihat di email yang dikirimkan oleh Google Admob ke Anda, contohnya seperti ini.
ID Publisher Admob

Langkah kedua. buat file teks, dan beri nama app-ads.txt ke file tersebut. contoh isinya seperti berikut ini:

google.com, pub-9679776591517154, DIRECT

Anda harus mengganti “pub-9679776591517154” menjadi sesuai dengan id publisher admob Anda sendiri. dan file app-ads.txt harus hanya berisi 1 baris tersebut.

Langkah ketiga. upload file tersebut ke website / domain sesuai yg tertulis di aplikasi Anda di google playstore. Anda bisa mencari website tersebut di Google Play Console Anda. contohnya sebagai berikut:alamat website aplikasi android

Di gambar di atas, websitenya adalah https://pintar-android.com. Anda harus bisa mengupload file app-ads.txt ke website tersebut, sehingga alamatnya akan menjadi misalnya https://pintar-android.com/app-ads.txt . Tidak diperbolehkan mengupload ke subdomain. harus ke website utama yang terdaftar di Google Play Console.

Demikianlah artikel pintar-android.com kali ini. semoga membantu.

Jangan lupa like page pintar-android.com di FB untuk artikel-artikel seputar pemrograman android.

Untuk yang ingin belajar android, ada beberapa buku di Google Play dari pintar-android.com:

Google I/O 2019 Sedang Berlangsung (7 – 9 Mei 2019)

Perhelatan akbar yang digelar oleh Google setiap tahunnya, Google I/O sedang berlangsung sekarang. Untuk developer2 yang sudah mempunyai akun Google Play, pasti menerima email dari Google mengenai acara yang relevan sesuai masing2 developer. Admin pintar-android.com menerima email seperti ini:

Email dari Google yang diterima pintar-android.com mengenai Google I/O 2019
Google I/O 2019 7 – 9 Mei 2019

Jadwal lengkapnya bisa dicek di: https://events.google.com/io/schedule/events

Di link tersebut, bisa difilter event2 yang mau dilihat, seperti ini:

Event2 yang saya sarankan untuk programmer android, adalah yang di link ini: https://events.google.com/io/schedule/events?4=topic_androidplay&4=topic_firebase&4=topic_design&4=topic_flutter&4=topic_locationmaps

Ada juga Youtube playlist untuk menyaksikan semua sesi di Google I/O 2019, di link: https://www.youtube.com/watch?v=lyRPyRKHO8M&list=PLOU2XLYxmsILVTiOlMJdo7RQS55jYhsMi

Demikian posting kali ini, semoga membantu 🙂

Selamat Tahun Baru 2019 dari pintar-android.com (bonus: email tahun baru dari Google Play)

Pagi ini, admin mendapatkan email tahun baru dari Google Play. Admin juga ingin turut mengucapkan selamat tahun baru 2019, beserta beberapa patah kata.

Sebagai developer aplikasi BEI5000 (10.000+ download) dan DEBM (100.000+ download), di kesempatan ini admin ingin mengajak para developer khususnya yang di Indonesia untuk  belajar dan mengupgrade kemampuan supaya bisa lebih memanfaatkan fitur2 yang sudah disediakan oleh Google sampai saat ini.

 

gambar selamat tahun baru 2019 dari pintar-android.com

 

Admin banyak mengamati grup2 developer android di Facebook. Banyak sekali pertanyaan2 yang admin rasa bisa diselesaikan dengan kemauan yang besar untuk Googling dan belajar bahasa Inggris. Problem utama yang admin tangkap untuk developer android di Indonesia, hanya 2 itu. Jika itu sudah diatasi, maka kita bisa lanjut belajar mengenai hal2 yang lebih tinggi, seperti AI yang sekarang sudah menjadi bagian inti dari sistem operasi Android P, arsitektur komponen, android jetpack, fitur Slice,  dan masih banyak lagi di masa yang akan datang.

Admin juga ingin belajar bersama dengan sebanyak mungkin developer, sambil membagi ilmu melalui artikel2 dan buku2 di pintar-android.com. Semoga di tahun 2019, admin bisa membuat lebih banyak lagi artikel & buku seputar dunia pemrograman android, yang berguna untuk para developer di tanah air. Admin juga menerima saran & kritik teman2, karena tidak ada yang sempurna selama kita masih diberi kesempatan untuk berkarya.

Berikut ini adalah email yang admin terima dari Google Play pagi ini. banyak sekali informasi yang pastinya berguna untuk pengembangan aplikasi android.

https://pintar-android.com/berita/selamat_tahun_baru_2019_dari_google_play.html

 

Untuk yang ingin belajar android, ada beberapa buku di Google Play dari pintar-android.com: