Tutorial Flutter Cara Menciptakan Aplikasi Quotes Dengan Api

Tutorial Flutter Cara Membuat Aplikasi Quotes dengan API

- Quotes atau kutipan merupakan pengulangan suatu verbal yang diambil dari sumber aslinya, biasanya ditandai dengan tanda petik, dan bisa menunjukkan imbas secara emosional kepada pembacanya. Pada tutorial ini kita akan mencar ilmu menciptakan aplikasi quotes sederhana yang diambil dari API dengan memakai Flutter.

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

Untuk sanggup menciptakan aplikasi quotes kalian sanggup mengikuti langkah-langkah berikut :

1. Membuat project flutter

Pertama, buat project flutter gres dengan nama flutter_quotes_apps, kau sanggup memakai Android Studio atau menciptakan project dengan versi CLI di terminal. Pastikan saat menciptakan project gres laptop terkoneksi dengan internet, tunggu hingga proses sinkronisasi selesai.

2. Menambahkan dependencies

Dependencies yang akan ditambahkan yaitu http dan flutter_html, berikut perbedaanya :

http : package yang dipakai untuk mengambil data dari internet
flutter_html : package ini akan dipakai untuk parsing html

Tambahkan pada bab dependencies, sehingga kodenya menjadi menyerupai berikut :

dependencies:   flutter:     sdk: flutter   http: 0.12.0+2   flutter_html: ^0.8.2

3. Menyiapkan Quotes API

Quotes API yang akan dipakai yaitu dari Quotes on Design API v4. Untuk URL yang akan dipakai untuk menampilkan random quotesnya url random quotes. Kamu sanggup mencobanya dengan Postman atau dengan browser langsung, jikalau tampil data quotes menyerupai berikut maka API sanggup dipakai :

Random Quotes on Design v4

4. Membuat file model

Buat folder gres didalam folder lib dengan nama model, kemudian buat file gres didalamnya dan beri nama quote.dart. File model nantinya dipakai untuk menangani data yang diambil dari API dan menampilkannya pada aplikasi, serta berisi konversi json ke dart object. Tambahkan kodenya menyerupai berikut :

class Quotes {   akibat int id;   akibat String title;   akibat 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 dipakai terinspirasi dari George Agiasotellis. Buka file main.dart pada folder lib, kemudian hapus semua kodenya dan ikuti langkah berikut :

Tambahkan isyarat 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 alasannya yaitu 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 isyarat berikut sehabis fungsi main :

List<Quotes> parseQuotes(String responseBody) {     akibat 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 {   akibat urlApi = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=10";   akibat response = await client.get(urlApi);   if (response.statusCode == 200) {     return compute(parseQuotes, response.body);   } else {     throw Exception('Failed to load quotes');   } } 

Selanjutnya kita akan menciptakan class QuotesPage berupa StatefulWidget, tambahkan isyarat dibawahnya menyerupai berikut :

class QuotesPage extends StatefulWidget {   @override   _QuotesPageState createState() => _QuotesPageState(); }  class _QuotesPageState extends State<QuotesPage> {    @override   Widget build(BuildContext context) {          akibat width = MediaQuery.of(context).size.width;     akibat 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(     akibat double width,      akibat double height,     akibat 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 isyarat diatas :

Penggunaan MediaQuery untuk tampilan aplikasi yang responsive di device yang berbeda. 

Penggunaan FutureBuilder untuk menangani saat melaksanakan request maka menampilkan progress bar, saat mendapat data gres quotes ditampilkan.

Pada Widget _buildQuotesSection() untuk menciptakan widget quotes berupa ListView yang sanggup discroll secara horizontal.

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

6. Finishing 

Karena kita tidak mengimplementasikan class MyApp seperti pada isyarat pertama kali menciptakan project, buka file widget_test.dart pada folder test. Tambahkan komentar untuk isyarat berikut :

//import 'package:flutter_quotes_apps/main.dart'; //await tester.pumpWidget(MyApp()); 

Source Code Quotes Apps

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

Github Saya

Sekarang coba jalankan dengan emulator atau hp kalian, jadinya menyerupai berikut :

Demikian tutorial flutter cara menciptakan aplikasi quotes dengan API, jikalau ada hambatan atau mau berdiskusi sanggup mengisi kolom komentar dibawah, jangan lupa share semoga banyak teman-teman yang belajar. Kalian sanggup subscribe website codingtive melalui form dibawah dengan mengisi email untuk mendapat update artikel dan tutorial menarik lainnya.

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

Share this post