yudiwbs

flutter_chart_http

May 24th, 2022
425
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
Dart 3.33 KB | None | 0 0
  1. import 'package:flutter/material.dart';
  2. import 'package:http/http.dart' as http;
  3. import 'package:charts_flutter/flutter.dart' as charts;
  4. import 'dart:convert';
  5.  
  6. //diambil dari: https://blog.logrocket.com/how-create-flutter-charts-with-charts-flutter/
  7.  
  8. class PopulasiTahun {
  9.   String tahun; //perlu string
  10.   int populasi;
  11.   charts.Color barColor;
  12.   PopulasiTahun(
  13.       {required this.tahun, required this.populasi, required this.barColor});
  14. }
  15.  
  16. class Populasi {
  17.   List<PopulasiTahun> ListPop = <PopulasiTahun>[];
  18.  
  19.   Populasi(Map<String, dynamic> json) {
  20.     // isi listPop disini
  21.     var data = json["data"];
  22.     for (var val in data) {
  23.       var tahun = val["Year"];
  24.       var populasi = val["Population"];
  25.       var warna =
  26.           charts.ColorUtil.fromDartColor(Colors.green); //satu warna dulu
  27.       ListPop.add(
  28.           PopulasiTahun(tahun: tahun, populasi: populasi, barColor: warna));
  29.     }
  30.   }
  31.  
  32.   //map dari json ke atribut
  33.   factory Populasi.fromJson(Map<String, dynamic> json) {
  34.     return Populasi(json);
  35.   }
  36. }
  37.  
  38. class PopulasiChart extends StatelessWidget {
  39.   List<PopulasiTahun> listPop;
  40.  
  41.   PopulasiChart({required this.listPop});
  42.   @override
  43.   Widget build(BuildContext context) {
  44.     List<charts.Series<PopulasiTahun, String>> series = [
  45.       charts.Series(
  46.           id: "populasi",
  47.           data: listPop,
  48.           domainFn: (PopulasiTahun series, _) => series.tahun,
  49.           measureFn: (PopulasiTahun series, _) => series.populasi,
  50.           colorFn: (PopulasiTahun series, _) => series.barColor)
  51.     ];
  52.     return charts.BarChart(series, animate: true);
  53.   }
  54. }
  55.  
  56. void main() => runApp(MyApp());
  57.  
  58. class MyApp extends StatelessWidget {
  59.   @override
  60.   Widget build(BuildContext context) {
  61.     return MaterialApp(title: "Chart-Http", home: HomePage());
  62.   }
  63. }
  64.  
  65. class HomePage extends StatefulWidget {
  66.   @override
  67.   State<StatefulWidget> createState() {
  68.     return HomePageState();
  69.   }
  70. }
  71.  
  72. //class state
  73. class HomePageState extends State<HomePage> {
  74.   late Future<Populasi> futurePopulasi;
  75.  
  76.   //https://datausa.io/api/data?drilldowns=Nation&measures=Population
  77.   String url =
  78.       "https://datausa.io/api/data?drilldowns=Nation&measures=Population";
  79.  
  80.   //fetch data
  81.   Future<Populasi> fetchData() async {
  82.     final response = await http.get(Uri.parse(url));
  83.  
  84.     if (response.statusCode == 200) {
  85.       // jika server mengembalikan 200 OK (berhasil),
  86.       // parse json
  87.       return Populasi.fromJson(jsonDecode(response.body));
  88.     } else {
  89.       // jika gagal (bukan  200 OK),
  90.       // lempar exception
  91.       throw Exception('Gagal load');
  92.     }
  93.   }
  94.  
  95.   @override
  96.   void initState() {
  97.     super.initState();
  98.     futurePopulasi = fetchData();
  99.   }
  100.  
  101.   @override
  102.   Widget build(BuildContext context) {
  103.     return Scaffold(
  104.       appBar: AppBar(
  105.         title: const Text('chart - http'),
  106.       ),
  107.       body: FutureBuilder<Populasi>(
  108.         future: futurePopulasi,
  109.         builder: (context, snapshot) {
  110.           if (snapshot.hasData) {
  111.             return Center(
  112.                 child: PopulasiChart(listPop: snapshot.data!.ListPop));
  113.           } else if (snapshot.hasError) {
  114.             return Text('${snapshot.error}');
  115.           }
  116.           // By default, show a loading spinner.
  117.           return const CircularProgressIndicator();
  118.         },
  119.       ),
  120.     );
  121.   }
  122. }
  123.  
Add Comment
Please, Sign In to add comment