Tutorial Flutter Cara Membuat Aplikasi Quotes dengan API

Tutorial Flutter Cara Membuat Aplikasi Quotes dengan API
Tutorial Flutter Cara Membuat Aplikasi Quotes dengan API
Codingtive.com - Quotes atau kutipan merupakan pengulangan suatu ekspresi yang diambil dari sumber aslinya, biasanya ditandai dengan tanda petik, dan mampu memberikan pengaruh secara emosional kepada pembacanya. Pada tutorial ini kita akan belajar membuat aplikasi quotes sederhana yang diambil dari API dengan menggunakan Flutter.

Jika sebelumnya kamu belum tahu bagaimana mengambil data dari API, saya sarankan untuk mempelajarinya terlebih dahulu di dokumentasi flutter fetch data from internet. Tutorial membuat quotes apps dengan flutter ini sangat cocok untuk pemula karena aplikasinya sangat sederhana, dan kamu akan mempelajari beberapa fitur yang ada di flutter seperti penggunaan ListView, StatefulWidget, color gradient, penggunaan http,  FutureBuilder dan masih banyak lagi.

Untuk dapat membuat aplikasi quotes kalian dapat mengikuti langkah-langkah berikut :

1. Membuat project flutter

Pertama, buat project flutter baru dengan nama flutter_quotes_apps, kamu dapat menggunakan Android Studio atau membuat project dengan versi CLI di terminal. Pastikan ketika membuat project baru laptop terkoneksi dengan internet, tunggu sampai proses sinkronisasi selesai.

2. Menambahkan dependencies

Dependencies yang akan ditambahkan yaitu http dan flutter_html, berikut perbedaanya :
http : package yang digunakan untuk mengambil data dari internet
flutter_html : package ini akan digunakan untuk parsing html
Tambahkan pada bagian dependencies, sehingga kodenya menjadi seperti berikut :
dependencies:
  flutter:
    sdk: flutter
  http: 0.12.0+2
  flutter_html: ^0.8.2

3. Menyiapkan Quotes API

Quotes API yang akan digunakan yaitu dari Quotes on Design API v4. Untuk URL yang akan digunakan untuk menampilkan random quotesnya url random quotes. Kamu dapat mencobanya dengan Postman atau dengan browser langsung, jika tampil data quotes seperti berikut maka API dapat digunakan :
Random Quotes on Design v4
Random Quotes on Design v4

4. Membuat file model

Buat folder baru didalam folder lib dengan nama model, kemudian buat file baru didalamnya dan beri nama quote.dart. File model nantinya digunakan untuk menangani data yang diambil dari API dan menampilkannya pada aplikasi, serta berisi konversi json ke dart object. Tambahkan kodenya seperti berikut :
class Quotes {
  final int id;
  final String title;
  final String content;

  Quotes({this.id, this.title, this.content});

  factory Quotes.fromJson(Map<String, dynamic> json) {
    return Quotes(
      id: json['ID'] as int,
      title: json['title'] as String,
      content: json['content'] as String,
    );
  }
}

5. Membuat halaman quotes

Tampilan halaman quotes desain yang digunakan terinspirasi dari George Agiasotellis. Buka file main.dart pada folder lib, kemudian hapus semua kodenya dan ikuti langkah berikut :

Tambahkan kode untuk import untuk library dan file model yang sudah ditambahkan :
import 'package:flutter/material.dart';
import 'package:flutter_quotes_apps/model/quotes.dart';
import 'dart:async';
import 'dart:convert';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'package:html/parser.dart';
Kemudian, buat fungsi main untuk menjalankan class yang akan ditampilkan. Tambahkan kodenya dibawah import :
void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: "Quotes Apps",
    home: QuotesPage(),
  ));
}
Kode diatas masih error karena belum ada class QuotesPage(), ikuti langkah selanjutnya terlebih dahulu.
Buat fungsi untuk mengubah hasil response body yang didapat dari API menjadi list quotes, dan fungsi untuk fetch quotes. Tambahkan kode berikut setelah fungsi main :
List<Quotes> parseQuotes(String responseBody) {
    final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
    return parsed.map<Quotes>((json) => Quotes.fromJson(json)).toList();
}

Future<List<Quotes>> fetchQuotes(http.Client client) async {
  final urlApi = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10";
  final response = await client.get(urlApi);
  if (response.statusCode == 200) {
    return compute(parseQuotes, response.body);
  } else {
    throw Exception('Failed to load quotes');
  }
}
Selanjutnya kita akan membuat class QuotesPage berupa StatefulWidget, tambahkan kode dibawahnya seperti berikut :
class QuotesPage extends StatefulWidget {
  @override
  _QuotesPageState createState() => _QuotesPageState();
}

class _QuotesPageState extends State<QuotesPage> {

  @override
  Widget build(BuildContext context) {
    
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;
    
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(
          top: height/12,
          bottom: height/5.5,
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topRight,
            end: Alignment.bottomLeft,
            colors: [const Color(0xff368882), const Color(0xff31597d)],
          ),
        ),
        child: Column(
          children: [
            Center(
              child: Text(
                'Quotes Apps',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w300,
                  fontSize: 20.0,
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                top: height/12,
              ),
            ),
            FutureBuilder<List<Quotes>>(
              future: fetchQuotes(http.Client()),
              builder: (context, snapshot) {
                if (snapshot.hasError) print(snapshot.error);

                if (snapshot.hasData) {
                  return _buildQuotesSection(
                    width,
                    height,
                    snapshot.data
                  );
                } else {
                  return Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildQuotesSection(
    final double width, 
    final double height,
    final List<Quotes> quotes
  ) {

    String _htmlParsed(String text) {
      var document = parse(text);
      String parsedString = parse(document.body.text).documentElement.text;
      return parsedString;
    }

    return Expanded(
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: quotes.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.only(
              right: width/20,
              left: width/20,
            ),
            padding: EdgeInsets.all(16.0),
            width: width/1.1,
            height: height/5,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.15),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Text(
                    _htmlParsed(quotes[index].content),
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w300,
                      fontSize: 18.0,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
                Center(
                  child: Text(
                    quotes[index].title,
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 14.0,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
Penjelasan kode diatas :
Penggunaan MediaQuery untuk tampilan aplikasi yang responsive di device yang berbeda. 

Penggunaan FutureBuilder untuk menangani ketika melakukan request maka menampilkan progress bar, ketika mendapatkan data baru quotes ditampilkan.

Pada Widget _buildQuotesSection() untuk membuat widget quotes berupa ListView yang dapat discroll secara horizontal.

Terdapat fungsi _htmlParsed() digunakan untuk parsing dan menghilangkan format karakter html pada data dari API.

6. Finishing 

Karena kita tidak mengimplementasikan class MyApp seperti pada kode pertama kali membuat project, buka file widget_test.dart pada folder test. Tambahkan komentar untuk kode berikut :
//import 'package:flutter_quotes_apps/main.dart';
//await tester.pumpWidget(MyApp());

Source Code Quotes Apps

Untuk source code lengkapnya, kalian dapat mempelajarinya di link dibawah ini dan jangan lupa star repositorynya ya.

Sekarang coba jalankan dengan emulator atau hp kalian, hasilnya seperti berikut :
Tutorial flutter membuat aplikasi quotes Tutorial flutter membuat aplikasi quotes Tutorial flutter membuat aplikasi quotes

Demikian tutorial flutter cara membuat aplikasi quotes dengan API, jika ada kendala atau mau berdiskusi dapat mengisi kolom komentar dibawah, jangan lupa share supaya banyak teman-teman yang belajar. Kalian dapat subscribe website codingtive melalui form dibawah dengan mengisi email untuk mendapatkan update artikel dan tutorial menarik lainnya.

Untuk belajar lebih lanjut kalian dapat mempelajarinya juga pada tutorial berikut :
Tutorial Flutter Cara Membuat Onboarding Screen Menarik
Tutorial Membuat Form Login dan Register Keren dengan Flutter

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Membuat Aplikasi Quotes dengan API"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel