flutter memungkinkan kita untuk membuat aplikasi yang ... · flutter adalah teknologi untuk...

Flutter adalah teknologi untuk membangun suatu mobile apps yang dibuat oleh

Google. Dengan menggunakan Flutter, Anda dapat membuat aplikasi Android dan

iOS sekaligus. Flutter menggunakan bahasa Dart yang juga dibuat oleh Google dan

merupakan bahasa general purpose. Artinya, Dart mampu berjalan di banyak

platform.

Flutter merupakan cross-platform framework, alias aplikasi yang dapat digunakan

di lebih dari satu platform. Aplikasi yang dibuat dengan menggunakan Flutter dapat

dijalankan baik di platform Android maupun iOS. Tentu hal ini akan menghemat

waktu. Anda pun tidak perlu mempelajari bahasa native yang digunakan di masing-

masing platform.

Keunggulan Flutter :

• Flutter memungkinkan kita untuk membuat aplikasi yang indah (beautiful)

• Flutter berjalan dengan sangat cepat (fast)

• Flutter sangat produktif (productive)

• Flutter bersifat terbuka (opensource)

Apa bedanya membuat aplikasi android menggunakan Android Studio (native)

dengan Flutter?

• hot reload

• Flutter menggunakan bahasa pemrograman Dart

• Aplikasi yang kita buat dengan Flutter dapat di-build ke Android dan iOS.

Contoh aplikasi yang dibangun dengan flutter :

• Alibaba (Android);

• Google AdWords (Android);

• App Tree (Android);

• Topline (Android);

• Hamilton (Android dan iOS);

Tools yang perlu dipersiapkan

• Java Development Kit (JDK);

• Android Studio;

• Android SDK;

• Flutter SDK;

• Teks Editor (atau bisa juga pakai Android Studio).

Kebutuhan dasar software

• Operating Systems: Windows 7 SP1 or later (64-bit)

• Disk Space: 400 MB (does not include disk space for IDE/tools).

• Tools: Flutter depends on these tools being available in your environment.

• Windows PowerShell 5.0 or newer (this is pre-installed with Windows 10)

• Git for Windows 2.x, with the Use Git from the Windows Command Prompt

option.

Cara download Flutter SDK

• https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_

windows_v1.7.8+hotfix.4-stable.zip

• Extract zip file dan simpan flutter pada installation location Flutter SDK

(Contoh, C:\src\flutter; Jangan diletakan pada folder yang membutuhkan hak

akses sistem ! )

• Jalankan file flutter_console.bat dalam flutter directory

Update Path SDK

• Buka konfigurasi “Environment Variable”.

https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.7.8+hotfix.4-stable.zip

https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.7.8+hotfix.4-stable.zip

• Tambahkan pada user variable:

– Jika belum ada, tambahkan full path flutter\bin

Menjalankan Flutter Doctor

Sebelum kita membuat aplikasi dengan Flutter, kita perisksa dulu kesiapan peralatan

yang kita install.

Silahkan ketik perintah berikut untuk memeriksanya:

• Jalankan flutter doctor dari Fluuter Console Command prompt:

– C:\src\flutter\flutter console

– Ketik :

• Flutter doctor

• Apabila tampila centang seperti ini:

Berarti, Flutter sudah siap digunakan untuk membuat aplikasi Android.

Bila kamu mendapatkan masalah seperti:

• Library yang dibutuhkan belum terinstall di komputer kita;

• Android SDK tidak dapat terdeteksi oleh Flutter

• dll.

Biasanya akan ada saran link yang harus dibuka dan perintah yang harus

diketik. Error tersebut disebabkan karena saya belum menyetujui lisensi

Android SDK. Di sana saya diminta untuk mengetik perintah flutter doctor

--android-licences.

Membuat aplikasi Flutter dengan Android Studio

1. Buka Aplikasi Android Studio

2. Pilih Start a new Flutter Project

3. Pilih Flutter Application

4. Beri nama project, tentukan Flutter SDK yang sudah dipersiapkan

sebelumnya

5. Tentukan nama domain, biasanya diberi nama perusahaan (TIDAK

DISARANKAN MENGGUNAKAN DOMAIN EXAMPLE.COM)

6. Wizard sudah selesai, dan Android Studio akan masuk ke tampilan utama

Struktur Direktori Flutter

android berisi source code untuk aplikasi android;

ios berisi source code untuk aplikasi iOS;

lib berisi source code Dart, di sini kita akan menulis kode aplikasi;

test berisi source code Dart untuk testing aplikasi;

.gitignore adalah file Git;

.metadata merupakan file yang berisi metadata project yang di-generate

otomatis;

.packages merupakan file yang berisi alamat path package yang dibuat oleh

pub;

flutter_app.iml merupakan file XML yang berisi keterangan project;

pubspec.lock merupakan file yang berisi versi-versi library atau package. File

ini dibuat oleh pub. Fungsinya untuk mengunci versi package.

pubspec.yaml merupakan file yang berisi informasi tentang project dan

libraray yang dibutuhkan;

README.md merupakan file markdown yang berisi penjelasan tentang

source code.

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 Demo',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: Center(child: MyHomePage(title: 'Aplikasi Flutter')),

);

}

}

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

int _counter = 0;

void _incrementCounter() {

setState(() {

_counter++;

});

}

@override


return Scaffold(

appBar: AppBar(

title: Text(widget.title),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

'You have pushed the button this many times:',

),

Text(

'$_counter',

style: Theme.of(context).textTheme.display1,

),

],

),

),

floatingActionButton: FloatingActionButton(

onPressed: _incrementCounter,

tooltip: 'Increment',

child: Icon(Icons.add),

);

}

}

1. Bagian Import

Bagian import adalah tempat kita mendeklarasikan atau mengimpor library yang

dibutuhkan pada aplikasi.

2. Bagian Main

Bagian main adalah fungsi utama dari aplikasi yang akan menjadi entri point.

Fungsi ini akan dieksekusi pertama kali saat aplikasi dibuka.

3. Bagian Widget

Bagian widget adalah tempat kita membuat widget. Aplikasi Flutter sebenarnya

terdiri dari susunan widget. Widget bisa kita bilang elemen-elemen seperti

Tombol, Teks, Layaout, Image, dan sebagainya.

Sebuah widget dapat berisi widget.

StatelessWidget adalah class widget yang propertinya immutable, artinya

nilainya tidak bisa diubah.

Cara membuat StatelessWidget adalah dengan membuat class turunan (extends)

dari class StatelessWidget.

Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget

MaterialApp(). Kemudian di dalam MateralApp() berisi widget lagi: Scaffold,

AppBar, Center, dan Text.

MyApp adalah StatelessWidget, merupakan widget induk;

MaterialApp adalah widget yang membungkus beberapa widget yang

menggunakan tema material design 1;

Scaffold adalah widget untuk struktur dasar material design;

AppBar adalah widget untuk membuat AppBar;

Center adalah Widget layout untuk membuat widget ke tengah;

Text adalah wdiget untuk membuat teks.

App Bar

AppBar mungkin bisa disinonimkan dengan tag <header> pada HTML, sebab

AppBar merupakan fungsi untuk membuat head dari sebuah aplikasi, dimana

didalamnya terdapat title yang dapat digunakan untuk menampilkan brand atau

page apa yang sedang dibuka dari aplikasi tersebut.

Mengatur Layout Dengan Row & Column

Row() & Column() dapat digunakan untuk mengatur posisi dari widget yang akan

ditampilkan. Row sendiri berarti baris, maka apapun yang diapit oleh class ini

akan menggunakan posisi baris atau berderet kesamping (Horizontal). Sedang

Column berarti kolom, maka widget yang berada didalamnya akan tersusun

kebawah (Vertical).

Lab Layout (Mengatur penggunaan Row dan Column)


void main(){

runApp(new MaterialApp

title:"Layouts",

home: new HalamanSatu(),

));

}

class HalamanSatu extends StatelessWidget{

@override

Widget build (BuildContext context){

return new Scaffold(

backgroundColor: Colors.yellow[200],

appBar: new AppBar(

backgroundColor: Colors.red[900],

leading: new Icon(Icons.home),

title: new Center(child: new Text("Inixindo")),

actions : <Widget>[

new Icon(Icons.search)

]

),

body: new Container(

child : new Column(

children: <Widget>[

new Icon(

Icons.local_airport,

size:80 ,

color: Colors.white),

new Icon(Icons.donut_large,

size : 80,

color: Colors.red),

new Icon(Icons.add_call,

size : 80,

color: Colors.red),

new Row(

children: <Widget>[

new Icon(Icons.computer,

size : 80,

color: Colors.red),

new Icon(Icons.headset,

size : 80,

color: Colors.red),

],

),

new Icon(Icons.add_comment,

size : 80,

color: Colors.red),

],

)

)

);

}

}

Card & Passing Data

Card Merupakan layout manager yang mampu menciptakan efek “Tumpukan”

komponen. Atrinya, layout ini tidak memposisikan komponen dilokasi-lokasi

tertentu didalam container, melainkan menampilkannya satu demi satu. CardLayout

merupakan tata letak berguna ketika kita ingin menyembunyikan dan menampilkan

komponen dalam satu kelompok.

Objek CardLayout adalah layout manager untuk sebuah container.

Penggunaan Cardlayout biasanya untuk membuat panel yang bersifat custom-

tabbed.

Dalam lab kali ini kita akan coba melakukan passing data dari sebuah Class

menuju objek dalam Card


void main(){

runApp(new MaterialApp(

title:"Card & Passing Data",

home: new HalamanSatu(),

));

}

class HalamanSatu extends StatelessWidget{

@override

Widget build (BuildContext context){


appBar: new AppBar(title: new Text("Card & Passing

Data"),),


child : new Column(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: <Widget>[

new CardSaya(icon: Icons.home,

teks:"Home",warnaIcon: Colors.brown),

new CardSaya(icon: Icons.add_photo_alternate,

teks:"Photo", warnaIcon: Colors.red),

new CardSaya(icon: Icons.add_shopping_cart,

teks:"Cart",warnaIcon: Colors.green),

],

)

)

) ;

}

}

class CardSaya extends StatelessWidget{

CardSaya({this.icon, this.teks, this.warnaIcon});

final IconData icon;

final String teks;

final Color warnaIcon;

@Override

Widget build(BuildContext context){

return new Container(

padding: new EdgeInsets.all(10),

child: new Card(

child:

new Column(

children: <Widget>[

new Icon(icon, size: 50.0, color: warnaIcon,),

new Text(teks ,style: new TextStyle(fontSize:

20)),

],

)

),

);

}

}

Lab Perpindahan halaman (Intent)

-File Main.dart


import './komputer.dart' as komputer;

import './laptop.dart' as laptop;

import './headset.dart' as headset;

void main(){


home: new Home(),

title: "Tab Bar"

));

}

class Home extends StatefulWidget {

@override

_HomeState createState() => _HomeState();

}

class _HomeState extends State<Home> with

SingleTickerProviderStateMixin{

TabController controller;

@override

void initState() {

// TODO: implement initState

controller = new TabController(vsync:this,length:3);

super.initState();

}

@override

void dispose() {

// TODO: implement dispose

controller.dispose();

super.dispose();

}

@override



appBar: new AppBar(

backgroundColor: Colors.red,

title: new Text("My List"),

bottom: new TabBar(

controller: controller,

tabs: <Widget>[

new Tab(icon: new Icon(Icons.computer),text:

"Computer",),

new Tab(icon: new Icon(Icons.laptop),text:

"Laptop"),

new Tab(icon: new

Icon(Icons.headset),text:"Headset"),

],

)

),

body: new TabBarView(


children: <Widget>[

new komputer.Komputer(),

new laptop.Laptop(),

new headset.Headset(),

],

),

bottomNavigationBar: new Material(

color: Colors.red,

child: new TabBar(


tabs: <Widget>[

new Tab(icon: new Icon(Icons.computer),),

new Tab(icon: new Icon(Icons.laptop),),

new Tab(icon: new Icon(Icons.headset),),

],

)

)

);

}

}

Kemudian buat kembali beberapa file .dart lainnya

komputer.dart


class Komputer extends StatelessWidget {

@override


return Container(

child: new Center(

child: new Column(

children: <Widget>[

new Padding(padding: new EdgeInsets.all(20),),

new Text("Halaman Computer", style: new

TextStyle(fontSize: 30)),

new Icon(Icons.computer,size:90),

],

)

)

);

}

}

laptop.dart


class Laptop extends StatelessWidget {

@override


return Container(

child: new Center(

child: new Column(

children: <Widget>[


new Text("Halaman Laptop", style: new


new Icon(Icons.laptop,size:90),

],

)

)

);

}

}

headset.dart


class Headset extends StatelessWidget {

@override


return Container(

child: new Center(

child: new Column(

children: <Widget>[


new Text("Halaman Headset", style: new


new Icon(Icons.headset,size:90),

],

)

)

);

}

}

ListView

ListView adalah tampilan beberapa item dalam bentuk list yang dapat di scroll

secara vertikal. Setiap item akan otomatis dimasukkan kedalam list menggunakan

Adapter yang datanya di ambil dari array/database/json/dsb. ListView sering

digunakan dalam aplikasi Android, seperti kontak, email, twitter, dsb.

Adapter adalah jembatan antara dan AdapterView (contohnya ListView) dengan

data. Adapter inilah yang menyediakan akses ke item data dan juga bertanggung

jawab untuk membuat sebuah View pada setiap item dalam kumpulan data. Selain

itu Adapter juga yang mengelola data model. Jadi, dunia ini butuh adapter.

Lab Adapter


void main(){


home: new Home(),

title: "List View"

));

}

class Home extends StatelessWidget{

@override



appBar: new AppBar(

backgroundColor: Colors.red,

title: new Text("List"),

),

body: new ListView(

children: <Widget>[

// new ListTile(

// leading: new Icon(Icons.speaker),

// title: new Text("Speaker")

// ),

// new ListTile(

// leading: new Icon(Icons.computer),

// title: new Text("Computer")

// ),

new

ListTutorial(gambar:"https://upload.wikimedia.org/wikipedia/comm

ons/1/17/Google-flutter-logo.png",judul:"Flutter"),

new


ons/thumb/a/a7/React-icon.svg/1200px-React-

icon.svg.png",judul:"React"),

new

ListTutorial(gambar:"https://logikapagi.files.wordpress.com/2018

/08/codeigniter-logo-png-

transparent.png?w=863&h=0&crop=1",judul:"Codeigniter"),

new


ons/thumb/c/cf/Angular_full_color_logo.svg/250px-

Angular_full_color_logo.svg.png",judul:"Angular"),

new

ListTutorial(gambar:"https://vuejs.org/images/logo.png",judul:"V

ueJS"),

new


ons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-

HTML5_logo_and_wordmark.svg.png",judul:"HTML 5"),

new

ListTutorial(gambar:"https://www.edureka.co/blog/wp-

content/uploads/2018/09/Golang-Logo-Golang-Tutorial-

Edureka.jpg",judul:"Go Lang"),

],

),

);

}

}

class ListTutorial extends StatelessWidget {

ListTutorial({this.gambar, this.judul});

final String judul;

final String gambar;

@override




child: new Center(

child: new Row(

children: <Widget>[

new Image(image: new

NetworkImage(gambar),width:70),

new Container(

child: new Center(

child: new Column(

children: <Widget>[

new Text("Tutorial "+judul,style:

new TextStyle(fontSize: 20,color:Colors.green)),

],

)

)

)

],

)

)

);

}

}

Membuat List dengan ListView Builder


void main(){


home: new Home(data: new List<String>.generate(300,

(i)=>"Data ke $i")),

title: "List View"

));

}

class Home extends StatelessWidget{

final List<String> data;

Home({this.data});

@override



appBar: new AppBar(title: new Text("List View")),


child: new ListView.builder(

itemCount: data.length,

itemBuilder: (context,index){

return new ListTile(

leading: new Icon(Icons.widgets),

title: new Text("${data[index]}"),

);

}

),

)

);

}

}

Membuat ListView dengan data JSON

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan,

mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat

(generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa

Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999. JSON

merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun

karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga

C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Oleh karena sifat-sifat

tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data.

JSON terbuat dari dua struktur:

Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai

objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash

(hash table), daftar berkunci (keyed list), atau associative array.

Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini

dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence).

Struktur-struktur data ini disebut sebagai struktur data universal. Pada dasarnya,

semua bahasa pemprograman moderen mendukung struktur data ini dalam bentuk

yang sama maupun berlainan. Hal ini pantas disebut demikian karena format data

mudah dipertukarkan dengan bahasa-bahasa pemprograman yang juga berdasarkan

pada struktur data ini.

Objek adalah sepasang nama/nilai yang tidak terurutkan. Objek dimulai dengan

{kurung kurawal buka dan diakhiri dengan }kurung kurawal tutup. Setiap nama

diikuti dengan :titik dua dan setiap pasangan nama/nilai dipisahkan oleh ,koma.

Larik adalah kumpulan nilai yang terurutkan. Larik dimulai dengan [kurung kotak

buka dan diakhiri dengan ]kurung kotak tutup. Setiap nilai dipisahkan oleh ,koma.

Nilai (value) dapat berupa sebuah string dalam tanda kutip ganda, atau angka, atau

true atau false atau null, atau sebuah objek atau sebuah larik. Struktur-struktur

tersebut dapat disusun bertingkat.

String adalah kumpulan dari nol atau lebih karakter Unicode, yang dibungkus

dengan tanda kutip ganda. Di dalam string dapat digunakan backslash escapes "\"

untuk membentuk karakter khusus. Sebuah karakter mewakili karakter tunggal pada

string. String sangat mirip dengan string C atau Java.

Lab Membuat ListView dengan menggunakan data JSON


import 'package:http/http.dart' as http;

import 'dart:async';

import 'dart:convert';

void main(){


home: new Home(),

title: "List View"

));

}


@override


}

class _HomeState extends State<Home> {

List dataJSON;

Future<String> ambildata() async{

http.Response hasil= await http.get(

Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),hea

ders:{

"Accept":"application/json"

}

);

this.setState((){

dataJSON = json.decode(hasil.body);

});

}

@override

void initState(){

this.ambildata();

}



appBar: new AppBar(title: new Text("JSON Data"),),

body: new ListView.builder(

itemCount: dataJSON==null ? 0: dataJSON.length,

itemBuilder: (context,i){

return new Card(

child: new Text(

dataJSON[i]['title'],

style : new TextStyle(fontSize: 20,

color:Colors.redAccent)

)

);

},

)

);

}

}

Lab membuat ListView dengan multiple column





void main(){


home: new Home(),

title: "List View"

));

}


@override


}


List dataJSON;

Future<String> ambildata() async{

http.Response hasil= await http.get(

Uri.encodeFull("https://jsonplaceholder.typicode.com/posts"),hea

ders:{

"Accept":"application/json"

}

);

this.setState((){

dataJSON = json.decode(hasil.body);

});

}

@override

void initState(){

this.ambildata();

}



appBar: new AppBar(title: new Text("JSON Data"),),

body: new ListView.builder(

itemCount: dataJSON==null ? 0: dataJSON.length,

itemBuilder: (context,i){

return

new Container(


child:new Card(

child: new Column(

crossAxisAlignment:

CrossAxisAlignment.start,

children: <Widget>[

new Text(

dataJSON[i]['title'],

style : new TextStyle(fontSize:

20, color:Colors.blue)

),

new Text(

dataJSON[i]['body'],

style : new TextStyle(fontSize:

15, color:Colors.black)

)

],

)

),

);

},

)

);

}

}

Inputan, Alert dan Snackbar

TextField adalah widget input teks yang paling umum digunakan. Secara default,

TextField dihiasi dengan garis bawah. Anda dapat menambahkan label, ikon, teks

petunjuk sebaris, dan teks kesalahan dengan memasok InputDecoration sebagai

properti dekorasi dari TextField. Untuk menghapus dekorasi seluruhnya (termasuk

garis bawah dan ruang yang disediakan untuk label), atur dekorasi ke nol.

Alert Dialog adalah sebuah pop up yang muncul pada saat-saat tertentu dan

berfungsi untuk memberi info pada pengguna, berbentuk kotak. Pada tutorial ini kita

akan membuat Alert Dialog sederhana / bawaan dari Android, AlertDialog basic ini

berisi icon (default-nya kosong), title dialog, pesan yang ingin disampaikan dialog

itu, dan tombol “Yes” atau “No” yang bisa dicustom.

SnackBar adalah view baru yang ada di Android Material Design yang mempunyai

fungsi hampir sama seperti Toast, yaitu menampilkan informasi atau pesan singkat

untuk pengguna. Bedanya, SnackBar mempunyai posisi default pada bagian bawah

layar ketika tampil. Selain itu SnackBar tidak hanya memberikan informasi/pesan

kepada pengguna, namun SnackBar juga mempunyai tombol “Action” yang ketika

diklik oleh pengguna akan melakukan suatu aksi yang sudah kita definisikan

sebelumnya.


void main(){


home: new Home(),

title: "Input Text"

));

}


@override


}


String teks="";

TextEditingController controllerInput = new

TextEditingController();

TextEditingController controllerAlert = new


TextEditingController controllerSnack = new


void _alertdialog(String str){

if(str.isEmpty) return;

AlertDialog alertDialog = new AlertDialog(

content: new Text(str,style: new TextStyle(fontSize:

20),),

actions: <Widget>[

new RaisedButton(

color: Colors.deepPurple,

child: new Text("OK"),

onPressed: (){

Navigator.pop(context);

},

)

],

);

showDialog(context: context, child: alertDialog);

}

final GlobalKey<ScaffoldState> _scaffoldState = new

GlobalKey<ScaffoldState>();

void _snackbar(String str){

if(str.isEmpty)return;

_scaffoldState.currentState.showSnackBar(new SnackBar(

content: new Text(str,style: new TextStyle(fontSize:

20),),

duration: new Duration(seconds: 3),)

);

}

@override



key: _scaffoldState,

appBar: new AppBar(title : new Text("Form Input")),


child: new Column(

children: <Widget>[

new TextField(

controller: controllerInput,

decoration: new InputDecoration(

hintText: "Input TextField"

),

onSubmitted: (String str){

setState((){

teks = str + "\n" +teks;

controllerInput.text="";

});

},

),

new Text(teks, style: new TextStyle(fontSize:

18),),

new TextField(

controller: controllerAlert,


hintText: "Alert Dialog"

),


_alertdialog(str);

controllerAlert.text="";

},

),

new TextField(

controller: controllerSnack,


hintText: "Snack Bar "

),


_snackbar(str);

controllerSnack.text="";

},

),

],

)

)

);

}

}

Navigation Drawer Menu

Navigation Drawer adalah panel yang menampilkan pilihan navigasi utama aplikasi

dari tepi kiri layar. Tersembunyi sebagian, tetapi menu akan muncul ketika

pengguna gesekan jari dari tepi kiri layar atau pengguna menyentuh ikon aplikasi di

bar untuk menampilkannya.

Lab File Navigation Drawer


void main(){


home: new Home(),

title: "Input Text"

));

}


@override


}


String gambar1 =

"https://awsimages.detik.net.id/visual/2014/11/03/45f5eef5-1c50-

496f-9f00-b6afe62a22da_169.jpg?w=650";

String gambar2 =

"https://www.google.com/url?sa=i&source=images&cd=&ved=2ahUKEwiW

p5ShmuvjAhVw4HMBHZjnAfMQjRx6BAgBEAU&url=https%3A%2F%2Fid.aliexpr

ess.com%2Fitem%2FKnitting-Needles-NEW-3D-Diamond-Painting-full-

square-drill-wall-decor-Mosaic-Embroidery-Series-Inlaid-

craft%2F32360787325.html&psig=AOvVaw1rxuu9w_Gt3HtWowzGbqyb&ust=1

565076414769532";

String gambarx;

String nama1 ="Nazar Firman";

String nama2 ="Firas Fitrada";

String namax;

String email1 = "[email protected]";

String email2 = "[email protected]";

String emailx;

void gantiuser(){

this.setState((){

gambarx = gambar1;

gambar1 = gambar2;

gambar2 = gambarx;

namax = nama1;

nama1 = nama2;

nama2 = namax;

emailx = email1;

email1 = email2;

email2 = emailx;

});

}

@override



appBar: new AppBar(title: new Text("Navigation

Drawer")),

drawer: new Drawer(

child: new ListView(

children: <Widget>[

new UserAccountsDrawerHeader(

accountName: new Text(nama1),

accountEmail: new Text(email1),

currentAccountPicture:

new CircleAvatar(

backgroundImage: new

NetworkImage(gambar1)),

otherAccountsPictures: <Widget>[

new GestureDetector(

onTap:()=> gantiuser(),

child : new

CircleAvatar(backgroundImage: new NetworkImage(gambar2),)

)

],

),

new ListTile(

title : new Text("Setting"),

trailing: new Icon(Icons.settings),

),

new ListTile(

title : new Text("Exit"),

trailing: new Icon(Icons.exit_to_app),

)

],

)

),


)

);

}

}

Local Database menggunakan SQLite

Banyak opsi media penyimpanan yang bisa kita pakai untuk menyimpan data ke

dalam aplikasi Android, menggunakan database SQLite adalah salah satu opsi yang

paling serbaguna dan praktis untuk kita implementasikan.

Database SQLite adalah solusi penyimpanan yang baik jika anda memiliki data

terstruktur yang perlu diakses dan disimpan secara persisten serta sering ditelusuri

dan diubah. Anda juga bisa menggunakan SQLite sebagai media penyimpanan

utama untuk data aplikasi atau pengguna, atau anda juga bisa menggunakannya

untuk proses caching serta menyediakan data yang diambil dari cloud.

Secara umum, Flutter tidak menyediakan Class SQLite, Tetapi Flutter mendukung

modul open source SQFlite. SQFlite adalah cara menyimpan data aplikasi di

Aplikasi Flutter. SQFlite adalah plugin Database untuk flutter.

Pada Lab SQLite, kita akan Bersama – sama membuat beberapa file diantara lain

file untuk database helper, models, dan masing – masing file untuk operasi CRUD

user.dart

class User {

int id;

String _firstName;

String _lastName;

String _dob;

User(this._firstName, this._lastName, this._dob);

User.map(dynamic obj) {

this._firstName = obj["firstname"];

this._lastName = obj["lastname"];

this._dob = obj["dob"];

}

String get firstName => _firstName;

String get lastName => _lastName;

String get dob => _dob;

Map<String, dynamic> toMap() {

var map = new Map<String, dynamic>();

map["firstname"] = _firstName;

map["lastname"] = _lastName;

map["dob"] = _dob;

return map;

}

void setUserId(int id) {

this.id = id;

}

}

database_helper.dart


import 'dart:io' as io;

import 'package:flutter_database/User.dart';

import 'package:path/path.dart';

import 'package:path_provider/path_provider.dart';

import 'package:sqflite/sqflite.dart';

class DatabaseHelper {

static final DatabaseHelper _instance = new

DatabaseHelper.internal();

factory DatabaseHelper() => _instance;

static Database _db;

Future<Database> get db async {

if (_db != null) return _db;

_db = await initDb();

return _db;

}

DatabaseHelper.internal();

initDb() async {

io.Directory documentsDirectory = await

getApplicationDocumentsDirectory();

String path = join(documentsDirectory.path, "main.db");

var theDb = await openDatabase(path, version: 1, onCreate:

_onCreate);

return theDb;

}

void _onCreate(Database db, int version) async {

// When creating the db, create the table

await db.execute(

"CREATE TABLE User(id INTEGER PRIMARY KEY, firstname

TEXT, lastname TEXT, dob TEXT)");

}

Future<int> saveUser(User user) async {

var dbClient = await db;

int res = await dbClient.insert("User", user.toMap());

return res;

}

Future<List<User>> getUser() async {


List<Map> list = await dbClient.rawQuery('SELECT * FROM

User');

List<User> employees = new List();

for (int i = 0; i < list.length; i++) {

var user =

new User(list[i]["firstname"], list[i]["lastname"],

list[i]["dob"]);

user.setUserId(list[i]["id"]);

employees.add(user);

}

print(employees.length);

return employees;

}

Future<int> deleteUsers(User user) async {


int res =

await dbClient.rawDelete('DELETE FROM User WHERE id = ?',

[user.id]);

return res;

}

Future<bool> update(User user) async {


int res = await dbClient.update("User", user.toMap(),

where: "id = ?", whereArgs: <int>[user.id]);

return res > 0 ? true : false;

}

}

add_user_dialog.dart



import 'package:flutter_database/database_hepler.dart';


class AddUserDialog {

final teFirstName = TextEditingController();

final teLastFirstName = TextEditingController();

final teDOB = TextEditingController();

User user;

static const TextStyle linkStyle = const TextStyle(

color: Colors.blue,

decoration: TextDecoration.underline,

);

Widget buildAboutDialog(

BuildContext context, _myHomePageState, bool isEdit, User

user) {

if (user != null) {

this.user=user;

teFirstName.text = user.firstName;

teLastFirstName.text = user.lastName;

teDOB.text = user.dob;

}

return new AlertDialog(

title: new Text(isEdit ? 'Edit' : 'Add new User'),

content: new SingleChildScrollView(

child: new Column(

mainAxisSize: MainAxisSize.min,

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

getTextField("Enter first name", teFirstName),

getTextField("Enter last name", teLastFirstName),

getTextField("DD-MM-YYYY", teDOB),

new GestureDetector(

onTap: () {

addRecord(isEdit);

_myHomePageState.displayRecord();

Navigator.of(context).pop();

},

child: new Container(

margin: EdgeInsets.fromLTRB(10.0, 0.0, 10.0,

0.0),

child: getAppBorderButton(

isEdit?"Edit":"Add",

EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0)),

),

),

],

),

),

);

}

Widget getTextField(

String inputBoxName, TextEditingController

inputBoxController) {

var loginBtn = new Padding(

padding: const EdgeInsets.all(5.0),

child: new TextFormField(

controller: inputBoxController,


hintText: inputBoxName,

),

),

);

return loginBtn;

}

Widget getAppBorderButton(String buttonLabel, EdgeInsets

margin) {

var loginBtn = new Container(

margin: margin,

padding: EdgeInsets.all(8.0),

alignment: FractionalOffset.center,

decoration: new BoxDecoration(

border: Border.all(color: const Color(0xFF28324E)),

borderRadius: new BorderRadius.all(const

Radius.circular(6.0)),

),

child: new Text(

buttonLabel,

style: new TextStyle(

color: const Color(0xFF28324E),

fontSize: 20.0,

fontWeight: FontWeight.w300,

letterSpacing: 0.3,

),

),

);

return loginBtn;

}

Future addRecord(bool isEdit) async {

var db = new DatabaseHelper();

var user = new User(teFirstName.text, teLastFirstName.text,

teDOB.text);

if (isEdit) {

user.setUserId(this.user.id);

await db.update(user);

} else {

await db.saveUser(user);

}

}

}

list.dart

import 'package:flutter/foundation.dart';


import 'package:flutter_database/add_user_dialog.dart';


import 'package:flutter_database/home_presenter.dart';

class UserList extends StatelessWidget {

List<User> country;

HomePresenter homePresenter;

UserList(

List<User> this.country,

HomePresenter this.homePresenter, {

Key key,

}) : super(key: key);

@override


return new ListView.builder(

itemCount: country == null ? 0 : country.length,

itemBuilder: (BuildContext context, int index) {

return new Card(

child: new Container(

child: new Center(

child: new Row(

children: <Widget>[

new CircleAvatar(

radius: 30.0,

child: new

Text(getShortName(country[index])),

backgroundColor: const

Color(0xFF20283e),

),

new Expanded(

child: new Padding(

padding: EdgeInsets.all(10.0),

child: new Column(

crossAxisAlignment:

CrossAxisAlignment.start,

children: <Widget>[

new Text(

country[index].firstName +

" " +

country[index].lastName,

// set some style to text


fontSize: 20.0,

color:

Colors.lightBlueAccent),

),

new Text(

"DATE: " + country[index].dob,

// set some style to text


fontSize: 20.0, color:

Colors.amber),

),

],

),

),

),

new Column(

mainAxisAlignment:

MainAxisAlignment.spaceBetween,

children: <Widget>[

new IconButton(

icon: const Icon(

Icons.edit,

color: const Color(0xFF167F67),

),

onPressed: () =>

edit(country[index], context),

),

new IconButton(

icon: const

Icon(Icons.delete_forever,

color: const Color(0xFF167F67)),

onPressed: () =>

homePresenter.delete(country[index]),

),

],

),

],

),

),

padding: const EdgeInsets.fromLTRB(10.0, 0.0,

0.0, 0.0)),

);

});

}

displayRecord() {

homePresenter.updateScreen();

}

edit(User user, BuildContext context) {

showDialog(

context: context,

builder: (BuildContext context) =>

new AddUserDialog().buildAboutDialog(context, this,

true, user),

);

homePresenter.updateScreen();

}

String getShortName(User user) {

String shortName = "";

if (!user.firstName.isEmpty) {

shortName = user.firstName.substring(0, 1) + ".";

}

if (!user.lastName.isEmpty) {

shortName = shortName + user.lastName.substring(0, 1);

}

return shortName;

}

}

home_presenter.dart




abstract class HomeContract {

void screenUpdate();

}

class HomePresenter {

HomeContract _view;


HomePresenter(this._view);

delete(User user) {


db.deleteUsers(user);

updateScreen();

}

Future<List<User>> getUser() {

return db.getUser();

}

updateScreen() {

_view.screenUpdate();

}

}

homescreen.dart


import 'dart:io';


import 'package:flutter_database/add_user_dialog.dart';



import 'package:flutter_database/home_presenter.dart';

import 'package:flutter_database/list.dart';

class MyHomePage extends StatefulWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

_MyHomePageState createState() => new _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> implements

HomeContract {

HomePresenter homePresenter;

@override

void initState() {

super.initState();

homePresenter = new HomePresenter(this);

}

displayRecord() {

setState(() {});

}

Widget _buildTitle(BuildContext context) {

var horizontalTitleAlignment =

Platform.isIOS ? CrossAxisAlignment.center :

CrossAxisAlignment.center;

return new InkWell(

child: new Padding(

padding: const EdgeInsets.symmetric(horizontal: 12.0),

child: new Column(

mainAxisAlignment: MainAxisAlignment.center,

crossAxisAlignment: horizontalTitleAlignment,

children: <Widget>[

new Text('User Database',


fontWeight: FontWeight.bold,

color: Colors.white,

),

),

],

),

),

);

}

Future _openAddUserDialog() async {

showDialog(

context: context,

builder: (BuildContext context) =>

new AddUserDialog().buildAboutDialog(context, this,

false, null),

);

setState(() {});

}

List<Widget> _buildActions() {

return <Widget>[

new IconButton(

icon: const Icon(

Icons.group_add,

color: Colors.white,

),

onPressed: _openAddUserDialog,

),

];

}

@override



appBar: new AppBar(

title: _buildTitle(context),

actions: _buildActions(),

),

body: new FutureBuilder<List<User>>(

future: homePresenter.getUser(),

builder: (context, snapshot) {

if (snapshot.hasError) print(snapshot.error);

var data = snapshot.data;

return snapshot.hasData

? new UserList(data,homePresenter)

: new Center(child: new

CircularProgressIndicator());

},

),

);

}

@override

void screenUpdate() {

setState(() {});

}

}

main.dart


import 'package:flutter_database/homescreen.dart';

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

class MyApp extends StatelessWidget {

@override


return new MaterialApp(

title: 'Flutter Database',

debugShowCheckedModeBanner: false,

theme: new ThemeData(

primaryColor: const Color(0xFF02BB9F),

primaryColorDark: const Color(0xFF167F67),

accentColor: const Color(0xFFFFAD32),

),

home: new MyHomePage(title: 'Flutter Database'),

);

}

}

PHP MySQL RESTful API

REST (REpresentational State Transfer) adalah suatu arsitektur metode komunikasi

yang sering diterapkan dalam pengembangan layanan berbasis web.

Arsitektur REST, yang umumnya dijalankan via HTTP (Hypertext Transfer

Protocol), melibatkan proses pembacaan laman web tertentu yang memuat sebuah

file XML atau JSON. File inilah yang menguraikan dan memuat konten yang hendak

disajikan. Setelah melalui sebuah proses definisi tertentu, konsumen akan bisa

mengakses antarmuka aplikasi yang dimaksudkan.

Kekhasan REST terletak pada interaksi antara klien dan server yang difasilitasi oleh

sejumlah tipe operasional (verba) dan Universal Resource Identifiers (URIs) yang

unik bagi tiap-tiap sumberdaya. Masing-masing verba – GET, POST, PUT dan

DELETE – memiliki makna operasional khusus untuk menghindari ambiguitas.

REST kerap dipergunakan dalam mobile application, situs web jejaring sosial,

mashup tools, dan automated business processes.

Arsitektur REST yang decoupled (terpisah) serta beban komunikasi yang ringan

antara produsen dan konsumen membuatnya populer di dunia cloud-based API,

seperti yang disajikan oleh Amazon, Microsoft, dan Google.

Layanan berbasis web yang menggunakan arsitektur REST semacam itu dinamakan

RESTful APIs (Application Programming Interfaces) atau REST APIs.

Lab File REST

Buat database dengan nama db_store, kemudia buat table seperti dibawah ini

CREATE TABLE IF NOT EXISTS `tb_item` (

ìd` int(11) NOT NULL AUTO_INCREMENT,

ìtem_code` text NOT NULL,

ìtem_name` text NOT NULL,

`price` int(11) NOT NULL,

`stock` int(11) NOT NULL,

PRIMARY KEY (ìd`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

INSERT INTO `tb_item` (ìd`, ìtem_code`, ìtem_name`, `price`, `stock`) VALUES

(1, 'B001', 'Kulkas LG 2 Pintu', 1750000, 100),

(2, 'C002', 'Mesin Cuci Sharp', 1250000, 500),

Kemudian buat beberapa file php pada root_directory web server

Conn.php

<?php

$connect = new mysqli("localhost","root","","my_store");

if($connect){

}else{

echo "Connection Failed";

exit();

}

?>

Adddata.php

<?php

include 'conn.php';

$itemcode = $_POST['itemcode'];

$itemname = $_POST['itemname'];

$price = $_POST['price'];

$stock= $_POST['stock'];

$connect->query("INSERT INTO tb_item (item_code,item_name,price,stock) VALUES

('".$itemcode."','".$itemname."','".$price."','".$stock."')")

?>

Deletedata.php

<?php

include 'conn.php';

$id=$_POST['id'];

$connect->query("DELETE FROM tb_item WHERE id=".$id);

?>

Editdata.php

<?php

include 'conn.php';

$id = $_POST['id'];

$itemcode = $_POST['itemcode'];

$itemname = $_POST['itemname'];

$price = $_POST['price'];

$stock= $_POST['stock'];

$connect->query("UPDATE tb_item SET item_code='".$itemcode."',

item_name='".$itemname."', price='".$price."', stock='".$stock."' WHERE id=".

$id);

?>

Getdata.php

<?php

include 'conn.php';

$queryResult=$connect->query("SELECT * FROM tb_item");

$result=array();

while($fetchData=$queryResult->fetch_assoc()){

$result[]=$fetchData;

}

echo json_encode($result);

?>

Kemudian cek apakah REST sudah berjalan dengan baik? Bisa menggunakan

beberapa tools WEB seperti POSTMAN

Lab Flutter – SQL

Main.dart





import './detail.dart';

import './adddata.dart';

void main() {


title: "My Store",

home: new Home(),

));

}


@override

_HomeState createState() => new _HomeState();

}


Future<List> getData() async {

final response = await

http.get("http://192.168.1.247/rest/getdata.php");

return json.decode(response.body);

}

@override



appBar: new AppBar(

title: new Text("MY STORE"),

),

floatingActionButton: new FloatingActionButton(

child: new Icon(Icons.add),

onPressed: ()=>Navigator.of(context).push(

new MaterialPageRoute(

builder: (BuildContext context)=> new AddData(),

)

),

),

body: new FutureBuilder<List>(

future: getData(),

builder: (context, snapshot) {

if (snapshot.hasError) print(snapshot.error);

return snapshot.hasData

? new ItemList(

list: snapshot.data,

)

: new Center(

child: new CircularProgressIndicator(),

);

},

),

);

}

}

class ItemList extends StatelessWidget {

final List list;

ItemList({this.list});

@override


return new ListView.builder(

itemCount: list == null ? 0 : list.length,

itemBuilder: (context, i) {



child: new GestureDetector(

onTap: ()=>Navigator.of(context).push(


builder: (BuildContext context)=> new

Detail(list:list , index: i,)

)

),

child: new Card(

child: new ListTile(

title: new Text(list[i]['item_name']),

leading: new Icon(Icons.widgets),

subtitle: new Text("Stock :

${list[i]['stock']}"),

),

),

),

);

},

);

}

}

adddata.dart



class AddData extends StatefulWidget {

@override

_AddDataState createState() => new _AddDataState();

}

class _AddDataState extends State<AddData> {

TextEditingController controllerCode = new


TextEditingController controllerName = new


TextEditingController controllerPrice = new


TextEditingController controllerStock = new


void addData(){

var url="http://192.168.1.247/rest/adddata.php";

http.post(url, body: {

"itemcode": controllerCode.text,

"itemname": controllerName.text,

"price": controllerPrice.text,

"stock": controllerStock.text

});

}

@override



appBar: new AppBar(

title: new Text("ADD DATA"),

),

body: Padding(


child: ListView(

children: <Widget>[

new Column(

children: <Widget>[

new TextField(

controller: controllerCode,


hintText: "Item Code", labelText: "Item

Code"),

),

new TextField(

controller: controllerName,


hintText: "Item Name", labelText: "Item

Name"),

),

new TextField(

controller: controllerPrice,


hintText: "Price", labelText: "Price"),

),

new TextField(

controller: controllerStock,


hintText: "Stock", labelText: "Stock"),

),

new Padding(


),

new RaisedButton(

child: new Text("ADD DATA"),

color: Colors.blueAccent,

onPressed: () {

addData();

Navigator.pop(context);

},

)

],

),

],

),

),

);

}

}

detail.dart


import './editdata.dart';


import './main.dart';

class Detail extends StatefulWidget {

List list;

int index;

Detail({this.index,this.list});

@override

_DetailState createState() => new _DetailState();

}

class _DetailState extends State<Detail> {

void deleteData(){

var url="http://192.168.1.247/rest/deleteData.php";

http.post(url, body: {

'id': widget.list[widget.index]['id']

});

}

void confirm (){

AlertDialog alertDialog = new AlertDialog(

content: new Text("Are You sure want to delete

'${widget.list[widget.index]['item_name']}'"),

actions: <Widget>[

new RaisedButton(

child: new Text("OK DELETE!",style: new

TextStyle(color: Colors.black),),

color: Colors.red,

onPressed: (){

deleteData();

Navigator.of(context).push(


builder: (BuildContext context)=> new Home(),

)

);

},

),

new RaisedButton(

child: new Text("CANCEL",style: new TextStyle(color:

Colors.black)),

color: Colors.green,

onPressed: ()=> Navigator.pop(context),

),

],

);

showDialog(context: context, child: alertDialog);

}

@override



appBar: new AppBar(title: new

Text("${widget.list[widget.index]['item_name']}")),


height: 270.0,


child: new Card(

child: new Center(

child: new Column(

children: <Widget>[

new Padding(padding: const EdgeInsets.only(top:

30.0),),

new Text(widget.list[widget.index]['item_name'],

style: new TextStyle(fontSize: 20.0),),

new Text("Code :

${widget.list[widget.index]['item_code']}", style: new

TextStyle(fontSize: 18.0),),

new Text("Price :

${widget.list[widget.index]['price']}", style: new


new Text("Stock :

${widget.list[widget.index]['stock']}", style: new


new Padding(padding: const EdgeInsets.only(top:

30.0),),

new Row(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

new RaisedButton(

child: new Text("EDIT"),

color: Colors.green,

onPressed: ()=>Navigator.of(context).push(


builder: (BuildContext context)=>new

EditData(list: widget.list, index: widget.index,),

)

),

),

new RaisedButton(

child: new Text("DELETE"),

color: Colors.red,

onPressed: ()=>confirm(),

),

],

)

],

),

),

),

),

);

}

}

editdata.dart



import './main.dart';

class EditData extends StatefulWidget {

final List list;

final int index;

EditData({this.list, this.index});

@override

_EditDataState createState() => new _EditDataState();

}

class _EditDataState extends State<EditData> {

TextEditingController controllerCode;

TextEditingController controllerName;

TextEditingController controllerPrice;

TextEditingController controllerStock;

void editData() {

var url="http://192.168.1.247/rest/editdata.php";

http.post(url,body: {

"id": widget.list[widget.index]['id'],

"itemcode": controllerCode.text,

"itemname": controllerName.text,

"price": controllerPrice.text,

"stock": controllerStock.text

});

}

@override

void initState() {

controllerCode= new TextEditingController(text:

widget.list[widget.index]['item_code'] );

controllerName= new TextEditingController(text:

widget.list[widget.index]['item_name'] );

controllerPrice= new TextEditingController(text:

widget.list[widget.index]['price'] );

controllerStock= new TextEditingController(text:

widget.list[widget.index]['stock'] );

super.initState();

}

@override



appBar: new AppBar(

title: new Text("EDIT DATA"),

),

body: Padding(


child: ListView(

children: <Widget>[

new Column(

children: <Widget>[

new TextField(

controller: controllerCode,


hintText: "Item Code", labelText: "Item

Code"),

),

new TextField(

controller: controllerName,


hintText: "Item Name", labelText: "Item

Name"),

),

new TextField(

controller: controllerPrice,


hintText: "Price", labelText: "Price"),

),

new TextField(

controller: controllerStock,


hintText: "Stock", labelText: "Stock"),

),

new Padding(


),

new RaisedButton(

child: new Text("EDIT DATA"),

color: Colors.blueAccent,

onPressed: () {

editData();

Navigator.of(context).push(


builder: (BuildContext context)=>new

Home()

)

);

},

)

],

),

],

),

),

);

}

}

PDF Viewers

Kita akan coba menggunakan Flutter untuk membuat aplikasi yang dapat

membuka PDF dengan menekan tombol. Pertama kita akan menggunakan paket

Dart untuk menyajikan PDF. Di bawah ini Anda akan melihat langkah-langkah

cara membuka PDF di Flutter dengan flutter_full_pdf_viewer.

1. Setting Dependency (pubscpec.yaml)

dependencies:

flutter_full_pdf_viewer: ^1.0.4

path_provider: ^0.4.1

2. Buat folder assets dan folder pdfs didalamnya, kemudian daftarkan assets

pada file pubspec.yaml

flutter:

assets:

- PDFs/

3. Kemudian jalankan perintah flutter packages get pada CMD

4. Ketik perintah dibawah ini pada file dart anda

5. import 'dart:io';

6. import 'dart:typed_data';

7.

8. import 'package:flutter/material.dart';

9. import 'package:flutter_full_pdf_viewer/full_pdf_viewer_scaffold.dart';

10. import 'package:path_provider/path_provider.dart';

11.

12. // Change this to fit the PDF file you are using to test.

13. const String _documentPath = 'PDFs/Guide-v4.pdf';

14.

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

16.

17. class MyApp extends StatelessWidget {

18. @override

19. Widget build(BuildContext context) {

20. return MaterialApp(

21. title: 'Opening a PDF',

22. theme: ThemeData(

23. primarySwatch: Colors.blue,

24. ),

25. home: MyHomePage(),

26. );

27. }

28. }

29.

30. class MyHomePage extends StatefulWidget {

31. MyHomePage({Key key}) : super(key: key);

32.

33. @override

34. _MyHomePageState createState() => _MyHomePageState();

35. }

36.

37. class _MyHomePageState extends State<MyHomePage> {

38. // This moves the PDF file from the assets to a place accessible by our

PDF viewer.

39. Future<String> prepareTestPdf() async {

40. final ByteData bytes =

41. await DefaultAssetBundle.of(context).load(_documentPath);

42. final Uint8List list = bytes.buffer.asUint8List();

43.

44. final tempDir = await getTemporaryDirectory();

45. final tempDocumentPath = '${tempDir.path}/$_documentPath';

46.

47. final file = await File(tempDocumentPath).create(recursive: true);

48. file.writeAsBytesSync(list);

49. return tempDocumentPath;

50. }

51.

52. @override

53. Widget build(BuildContext context) {

54. return Scaffold(

55. appBar: AppBar(

56. title: Text("Opening a PDF"),

57. ),

58. body: Center(

59. child: Column(

60. mainAxisAlignment: MainAxisAlignment.center,

61. children: <Widget>[

62. RaisedButton(

63. onPressed: () {},

64. child: const Text('Open PDF with full_pdf_viewer'),

65. ),

66. ],

67. ),

68. ),

69. );

70. }

71. }

72.

Deploy Signing APK

Setelah selesai membangun aplikasi, langkah selanjutnya adalah membangun

release APK. Adapun langkah – langkahnya seperti berikut :

1. Hilangkan debug mode banner dengan cara :

a. return new MaterialApp(

b. title: 'Flutter Test',

c. debugShowCheckedModeBanner: false, //Seperti ini

d. home: new Column(

e. ...

f. ),

g. builder: (BuildContext context, Widget child) {

h. ...

i. }

j. );

2. Pilih File – Project Structure

3. Pilih Project anda pada module

Click + pada project anda

4. Pilih Android

5. Kemudian pilih Build – Generate Signed APK

6. Pada halaman ini, pertama kalian harus membuat file KeyStore berformat .jks.

caranya klik tombol Create new...

7. Isikan data Author dengan lengkap

Berikut keterangan dari data-data yang harus diisi:

Password (Key Store) : Membuat Password key store baru

Alias : Mempunyai peran seperti username, buat nama alias baru

Password (Alias) : Membuat Password Alias baru

Validity (Years) : Isi dengan angka 25 saja

Lalu isi dengan nama lengkap, organisasi unit, nama organisasi, kota, provinsi

dan kode dari negara (Indonesia).

8. Tentukan Path dimana APK akan disimpan (defaultnya ada di

AndroidStudioProjects\<nama_project>\app\build\outputs)