MODUL MATERI WEEK 5

MEMBUAT GRAFIK PADA FLUTTER

A. GRAFIK
Grafik adalah penyajian data yang terdapat dalam table yang ditampilkan ke dalam
bentuk gambar. Selain itu grafik juga dapat diartikan sebagai suatu kombinasi data-data
baik berupa angka, huruf, simbol, gambar, lambang, perkataan, lukisan, yang disajikan
dalam sebuah media dengan tujuan memberikan gambaran tentang suatu data dari penyaji
materi kepada para penerima materi dalam proses menyampaikan informasi.
Adapun jenis - jenis dari grafik, yaitu sebagai berikut:
1. Grafik Batang
2. Grafik Garis
3. Grafik Lingkaran
B. LANGKAH KERJA
Adapun langkah kerja yang dilakukan dalam membuat sebuah grafik yang menarik pada
flutter, yaitu sebagai beriku:
1. Buat sebuah project flutter dengan nama project_flutter
2. Tambahkan packages tambahan pada pubspec flutter, yaitu sebagai berikut:

3. Jangan lupa untuk di Packages get

4. Import pada class main.dart packages yang ditambahkan
5. Codingn ketika chart tampil normal
6. import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Chart',
theme: ThemeData(

primarySwatch: Colors.blue,

1
 ),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

@override
Widget build(BuildContext context) {

var data=[
Sales("Sun", 50),
Sales("Mon", 70),
Sales("Tue", 100),
Sales("Wed", 150),
Sales("Thu", 250),
Sales("Fri", 350),
Sales("Sat", 550),
];

var series=[
charts.Series(
domainFn: (Sales sales,_)=>sales.day,
measureFn: (Sales sales,_)=>sales.sold,
id: 'Sales',
data: data
)
];

var chart = charts.BarChart(

series
);
return Scaffold(
appBar: AppBar(
title: Text('Flutter Chart'),
),
body: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
children: <Widget>[
Text("Sales Analysis", style: TextStyle(fontSize: 30.0),),
SizedBox(height: 400.0,child: chart),
],
),

2
 ),
);
}
}

class Sales{
final String day;
final int sold;

Sales(this.day, this.sold);

3
 7. Jika chart ingin tampil dalam bentuk horizontal
Codingan yang diganti yaitu pada:
var chart = charts.BarChart(
series,
vertical: false,
);

8. Jika ingin menampilkan barchart dengan jumlah pada masing-masing itemnya,

maka codingan nya sebagai berikut:
var series=[
charts.Series(
domainFn: (Sales sales,_)=>sales.day,

4
 measureFn: (Sales sales,_)=>sales.sold,
id: 'Sales',
data: data,
labelAccessorFn: (Sales sales,_)=> '${sales.day}:
${sales.sold.toString()}'
)
];

var chart = charts.BarChart(

series,
vertical: false,
barRendererDecorator: charts.BarLabelDecorator<String>(),
);

5
 9. Jika ingin pada samping kiri harinya tidak ditampilkan maka perlu ditambahkan
codingan sebagai berikut:
var chart = charts.BarChart(
series,
vertical: false,
barRendererDecorator: charts.BarLabelDecorator<String>(),
​ domainAxis: charts.OrdinalAxisSpec(renderSpec:
charts.NoneRenderSpec()),
);

6
 10. Cara untuk membuat Pie Diagaram, dengan menambahkan codingan sebagai
berikut ini:
var chartpie = charts.PieChart(
series,

);

7
 11. Untuk menambahkan keterangan pada pie chartnya, maka tambahkan codingan
sebagai berikut ini:
var chartpie = charts.PieChart(
series,
​defaultRenderer: charts.ArcRendererConfig(
arcRendererDecorators: [charts.ArcLabelDecorator()]
),
);

8
 12. Untuk menambahkan animate pada piechart nya, maka tambahkan codingan
berikut ini:

animate: true,

9
 13. Menambahkan warna pada pie chart

class Sales{
final String day;
final int sold;

​ final charts.Color color;

Sales(this.day, this.sold, Color color)

:this.color=charts.Color(r: color.red, g: color.green, b: color.blue,
a: color.alpha);

10
 }

var data=[
Sales("Sun", 50, Colors.red),
Sales("Mon", 70, Colors.yellow),
Sales("Tue", 100, Colors.green),
Sales("Wed", 150, Colors.purple),
Sales("Thu", 250, Colors.grey),
Sales("Fri", 180, Colors.brown),
Sales("Sat", 30, Colors.blue),
];

var series=[
charts.Series(
domainFn: (Sales sales,_)=>sales.day,
measureFn: (Sales sales,_)=>sales.sold,
​colorFn: (Sales sales,_)=>sales.color,
id: 'Sales',
data: data,
labelAccessorFn: (Sales sales,_)=> '${sales.day}:
${sales.sold.toString()}'
)
];

11
 14. Membuat Pie chart seperti Donat

var chartpie = charts.PieChart(

series,
defaultRenderer: charts.ArcRendererConfig(
arcRendererDecorators: [charts.ArcLabelDecorator()],
​ arcWidth: 100
),
animate: true,
);

12
 15. Untuk melihat berbagai referensi design untuk chart, maka pada pub.dev → →
charts_flutter klik Online Galerys

13
 Maka akan tampil, tampilan sebagai berikut ini:

16. Membuat Chart dengan multidata

​var series=[
charts.Series(
domainFn: (Sales sales,_)=>sales.day,
measureFn: (Sales sales,_)=>sales.sold,
colorFn: (Sales sales,_)=>sales.color,
id: 'Sales',

14
 data: food,
labelAccessorFn: (Sales sales,_)=> '${sales.day}:
${sales.sold.toString()}'
),
charts.Series(
domainFn: (Sales sales,_)=>sales.day,
measureFn: (Sales sales,_)=>sales.sold,
colorFn: (Sales sales,_)=>sales.color,
id: 'Sales',
data: nonfood,
labelAccessorFn: (Sales sales,_)=> '${sales.day}:
${sales.sold.toString()}'
)
];

var chart2 = charts.BarChart(

series,
barGroupingType: charts.BarGroupingType.grouped,
);

15
 17. Jika tampilannya ingin berbentuk stack maka ganti codingan seperti ini

var chart2 = charts.BarChart(

series,
barGroupingType: charts.BarGroupingType.​stacked​,
);

16
 18. Membuat tampilan menjadi lebih menarik dan dalam bentuk horizontal

17
18
 VIDEO PLAYER MENGGUNAKAN
YOUTUBE PLAYLIST

A. TENTANG APLIKASI
Pada kasus kali ini , kita akan membuat sebuah aplikasi tentang cara membuat aplikasi
video player dengan menggunakan youtube playlist.
B. LANGKAH KERJA
Adapun langkah kerja yang dilakukan dalam membuat sebuah aplikasi video player, yaitu
sebagai berikut:
1. Buat sebuah project dengan nama list_video
2. Import beberapa packages pada pubspec.yaml, sebagai berikut:

Sebelum masuk pada codingan, untuk mendapatkan playlist video dari youtube, maka
langkah kerjanya sebagai berikut:

1. Sebelum kita mengambil video playlist pada youtube, maka pastikan kita
memiliki API
2. Pergi pada link berikut:​ ​https://console.developers.google.com

19
 3. Pilih menu API dan Layanan Library

4. Kemudian cari dan pilih YouTube Data API v3

20
 5. Klik Enable
​

6. Kemudian klik buat credential

​

7. Isi Form berikut seperti dibawah ini:

21
 8. Maka API sudah dapat kita buat
9. Selanjutnya pergi pada halaman github pada link berikut ini
https://github.com/ThatGuySam/youtube-playlist-json

22
 10. K
​ lik Deploy to Heroku

11. I​ si form berikut ini:

23
24
 12. Klik Tombol Deploy App

13. Kemudian klik view, maka akan tampil tampilan sebagai berikut ini

25
 14. Maka yang akan kita gunakan adalah link berikut ini :
https://flutterrlist.herokuapp.com/
15. Kembali pada project android nya
16. Pada class main.dart, tambahkan codingan berikut ini:

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

import ​'package:list_video/myDrawer.dart'​;

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

));

class ​MyApp ​extends ​StatefulWidget {

​@override
​_MyAppState createState() => ​_MyAppState​();
}

class ​_MyAppState ​extends ​State<MyApp> {

​@override
​Widget build(BuildContext context) {
​return new ​MaterialApp​(
title: ​"Siti Saadiyah Videos"​,
debugShowCheckedModeBanner: ​false​,
home: ​new ​HomePage​(),
);
}
}

class ​HomePage ​extends ​StatefulWidget {

​@override
​_HomePageState createState() => ​_HomePageState​();

26
 }

class ​_HomePageState ​extends ​State<HomePage> {

​@override
​Widget build(BuildContext context) {
​return ​Scaffold​(
drawer: ​new ​MyDrawer​(),
appBar: ​new ​AppBar​(
backgroundColor: Colors.​pinkAccent​,
),
body: ​new ​Container​(
decoration: ​new ​BoxDecoration​(
image: ​new ​DecorationImage​(
image: ​new ​AssetImage​(​"images/bg4.jpg"​), fit: BoxFit.​cover
​)
),
child: ​new ​Center​(
child: ​new ​Column​(
mainAxisAlignment: MainAxisAlignment.​center​,
children: <Widget>[
​new ​Text​(​"Siti Saadiyah Videos"​, style: ​new ​TextStyle​(
fontSize: ​25.0​,
fontFamily: ​"Pacifico"​,
color: Colors.​pinkAccent
​),)
],
),
),
),
);
}
}

17. Pada Class myDrawer.dart, tambahkan codingan berikut ini:

import '​ package:flutter/material.dart'​;
import ​'package:list_video/playList.dart'​;

class ​MyDrawer ​extends ​StatelessWidget {

​@override
​Widget build(BuildContext context) {
​return new ​Drawer​(
child: ​SingleChildScrollView​(
child: ​new ​Column​(
children: <Widget>[
​new ​Padding​(padding: ​const ​EdgeInsets​.​all​(​20.0​)),
​new ​ListTile​(
leading: ​new ​Icon​(Icons.​home​),
title: ​new ​Text​(​"HOME"​, style: ​new ​TextStyle​(fontSize:
18.0​),),
),
​new ​Divider​(),
​new ​ListTile​(
leading: ​new ​Icon​(Icons.​video_library) ​ ,
title: ​new ​Text​(​"FLUTTER"​, style: ​new ​TextStyle​(fontSize:
18.0​),),
onTap: ()=>Navigator.​of( ​ context).push(
​new ​MaterialPageRoute​(builder: (BuildContext context)=>​new
ListVideo​(
url: ​"https://flutterrlist.herokuapp.com/"​,

27
 title: ​"FLUTTER"​,
)
)),
),
​new ​Divider​(),
​new ​ListTile​(
leading: ​new ​Icon​(Icons.​video_library) ​ ,
title: ​new ​Text​(​"CODE"​, style: ​new ​TextStyle​(fontSize:
18.0​),),
onTap: ()=>Navigator.​of(​ context).push(
​new ​MaterialPageRoute​(builder: (BuildContext
context)=>​new ​ListVideo​(
url: ​"https://cookinglist.herokuapp.com/"​,
title: ​"CODE"​,
)
)),
),
],
),
),
);
}
}

18. Pada class playList.dart, tambahkan codingan berikut ini:

import ​'dart:convert'​;

import ​'package:flutter/material.dart'​;
import ​'package:http/http.dart' ​as ​http;
import ​'package:list_video/myDrawer.dart'​;
import ​'package:flutter_webview_plugin/flutter_webview_plugin.dart'​;

class ​ListVideo ​extends ​StatefulWidget {

​final ​String ​title​;
​final ​String ​url​;

ListVideo({​this​.​title​, ​this​.​url​});

​@override
​_ListVideoState createState() => ​_ListVideoState​();
}

class ​_ListVideoState ​extends ​State<ListVideo> {

Future<List> getData() ​async​{

​final ​response = ​await ​http.get(​widget​.​url​);
​return ​json.decode(response.​body​);
}

​@override
​Widget build(BuildContext context) {
​return new ​Scaffold​(
​
appBar: ​AppBar​(backgroundColor: Colors.​pinkAccent,
title: ​new ​Text​(​widget​.​title​),),
drawer: ​new ​MyDrawer​(),
body: ​new ​FutureBuilder​<List>(

28
 future: getData(),
builder: (context, snapshot){
​if​(snapshot.​hasError​) print(snapshot.​error​);
​return ​snapshot.​hasData
​? ​new ​PlayListVideo​(list: snapshot.​data​,)
: ​new ​CircularProgressIndicator​();
},
),
);
}
}

class ​PlayListVideo ​extends ​StatelessWidget {

​final ​List ​list​;

PlayListVideo({​this​.​list​});
​@override
​Widget build(BuildContext context) {
​return new ​ListView​.​builder​(
itemCount: ​list​==​null​?​0​:​list​.​length​,
itemBuilder: (context, i){
​return new ​Container​(
padding: ​const ​EdgeInsets​.​all​(​10.0​),
child: ​Column​(
children: <Widget>[
​new ​GestureDetector​(
onTap: ()=> Navigator.​of​(context).push(​new ​MaterialPageRoute​(
builder: (BuildContext context) =>
​new ​VideoPlay​(url:
"https://youtube.com/embed/​${​list​[i][​'contentDetails'​][​'videoId'​]}​"​,))),
child: ​new ​Container​(
height: ​210.0​,
decoration: ​new ​BoxDecoration​(
image: ​new ​DecorationImage​(
image: ​new
NetworkImage​(​list​[i][​'snippet'​][​'thumbnails'​][​'high'​][​'url'​]), fit:
BoxFit.​cover
​)
),
),
),
​new ​Padding​(padding: ​const ​EdgeInsets​.​all​(​10.0​)),
​new ​Text​(​list​[i][​'snippet'​][​'title'​],
style: ​new ​TextStyle​(fontSize: ​18.0​),),
​new ​Padding​(padding: ​const ​EdgeInsets​.​all​(​10.0​)),
​new ​Divider​(),
],
),
);
},
);
}
}

class ​VideoPlay ​extends ​StatelessWidget {

​final ​String ​url​;

VideoPlay({​this​.​url​});

29
 ​@override
​Widget build(BuildContext context) {
​return new ​Center​(
child: ​new ​WebviewScaffold​(
url: ​url​,
),
);
}
}

19. Selanjutnya aplikasi dapat dijalankan, dan aplikasi akan terlihat seperti ini:

30
31
32
33
34