Cara Mudah Membuat Aplikasi Cek Ongkir di Flutter

Share:
Cara Mudah Membuat Aplikasi Cek Ongkir di Flutter
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan membuat aplikasi cek ongkir(ongkos kirim) dengan menggunakan flutter dan data rajaongkir.com. Penasaran?, ayo ikuti tutorialnya di bawah ini.



Sebelumnya saya sudah menulis tutorial cara membuat aplikasi cek ongkir dengan menggunakan php dan ajax, jika kalian tertarika silahkan ikuti tautan berikut ini. https://www.sahretech.com/2022/04/membuat-aplikasi-cek-ongkir-dengan-ajax.html

Rajaongkir.com adalah penyedia api untuk pengecekan ongkos kirim paket dan pengecekan resi semua kurir di Indonesia. Tersedia fitur gratis dan berbayar. Tapi pada tutorial kali ini kita akan belajar yang gratis saja.

Jadi di tutorial kali ini, kita akan membuat aplikasi cek ongkos kirim sederhana yang memiliki dua screen/page. Page pertama menampilkan inputan kota asal, kota tujuan, berat, kurir dan tombol untuk trigger cek ongkir. Screen/page selanjutnya digunakan untuk menampilkan list service/layanan dan biaya dari kurir yang dipilih.

Pada tutorial kali ini juga, kita akan belajar cara http request, dan menggunakan package dropdown_search untuk melakukan pencarian data kota se-Indonesia dengan menggunakan inputan drowpdown. Silahkan scroll ke bagian paling bawah untuk melihat hasil akhirnya.



Cara Membuat Aplikasi Cek Ongkir dengan Flutter

1. Kunjungi situs rajaongkir.com dan buatlah akun baru. Setelah login masuk ke profil dan copy api key yang diberikan. Simpan api key tersebut, karena key ini akan kita gunakan saat melakukan request data ke server.
rajaongkir
rajaongkir.com



2. Buatlah sebuah project flutter baru dengan nama aplikasi_cek_ongkir atau dengan nama bebas sesuai keinginan kalian.

3. Buka file pubspec.yaml. Lalu tambahkan package http: dan dropdown_search:. Lihat gambar di bawah ini untuk lebih jelasnya.

pubspec.yaml



4. Buatlah sebuah file baru di dalam folder libs dengan nama kota.dart. Lalu ikuti scriptnya seperti di bawah ini. File ini berfungsi sebagai model untuk menampung data kota nantinya
    
class Kota { String? cityId; String? type; String? cityName; Kota( {this.cityId, this.type, this.cityName}); Kota.fromJson(Map<String, dynamic> json) { cityId = json['city_id']; type = json['type']; cityName = json['city_name']; } @override String toString() => cityName as String; static List<Kota> fromJsonList(List list) { if (list.length == 0) return List<Kota>.empty(); return list.map((item) => Kota.fromJson(item)).toList(); } }


5. Buka file main.dart lalu ganti isi di dalamnya dengna script di bawah ini. Dan jangan lupa mengganti YOUR API KEY sesuai dengan api key dari rajaongkir kalian masing-masing.
    

    import 'dart:convert'; import 'package:cek_ongkir/detail_page.dart'; import 'package:flutter/material.dart'; import 'package:dropdown_search/dropdown_search.dart'; import 'Kota.dart'; import 'package:http/http.dart' as http; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'Cek Ongkos Kirim', home: Home(), ); } } class Home extends StatefulWidget { const Home({Key? key}) : super(key: key); @override State<Home> createState() => _HomeState(); } class _HomeState extends State<Home> { var key = 'YOUR API KEY'; var kota_asal; var kota_tujuan; var berat; var kurir; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Cek Ongkir"), ), body: Container( padding: EdgeInsets.all(20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ DropdownSearch<Kota>( //kamu bisa mendekorasi tampilan field dropdownSearchDecoration: InputDecoration( labelText: "Kota Asal", hintText: "Pilih Kota Asal", ), //tersedia mode menu dan mode dialog mode: Mode.MENU, //jika ingin menampilkan pencarian box showSearchBox: true, //di dalam event kita bisa set state atau menyimpan variabel onChanged: (value) { kota_asal = value?.cityId; }, //kata yang ditampilkan setelah kita memilih itemAsString: (item) => "${item!.type} ${item.cityName}", //mencari data dari api onFind: (text) async { //mengambil data dari api var response = await http.get(Uri.parse( "https://api.rajaongkir.com/starter/city?key=${key}")); //parse string json as dart string dynamic //get data just from results List allKota = (jsonDecode(response.body) as Map<String, dynamic>)['rajaongkir']['results']; //simpan data ke dalam model kota var dataKota = Kota.fromJsonList(allKota); //return data return dataKota; }, ), SizedBox(height: 20), DropdownSearch<Kota>( //kamu bisa merubah tampilan field sesuai keinginan dropdownSearchDecoration: InputDecoration( labelText: "Kota Tujuan", hintText: "Pilih Kota Tujuan", ), //tersedia mode menu dan mode dialog mode: Mode.MENU, //jika kamu ingin menampilkan pencarian showSearchBox: true, //di dalam onchang3e kamu bisa set state onChanged: (value) { kota_tujuan = value?.cityId; }, //kata yang akan ditampilkan setelah dipilih itemAsString: (item) => "${item!.type} ${item.cityName}", //find data from api onFind: (text) async { //get data from api var response = await http.get(Uri.parse( "https://api.rajaongkir.com/starter/city?key=${key}")); //parse string json as dart string dynamic //get data just from results List allKota = (jsonDecode(response.body) as Map<String, dynamic>)['rajaongkir']['results']; //store data to model var dataKota = Kota.fromJsonList(allKota); //return data return dataKota; }, ), SizedBox(height: 20), TextField( //input hanya angka keyboardType: TextInputType.number, decoration: InputDecoration( labelText: "Berat Paket (gram)", hintText: "Input Berat Paket", ), onChanged: (text) { berat = text; }, ), SizedBox(height: 20), DropdownSearch<String>( mode: Mode.MENU, showSelectedItems: true, //pilihan kurir items: ["jne", "tiki", "pos"], dropdownSearchDecoration: InputDecoration( labelText: "Kurir", hintText: "Kurir", ), popupItemDisabled: (String s) => s.startsWith('I'), onChanged: (text){ kurir = text; } ), SizedBox(height: 20,), ElevatedButton( onPressed: (){ //validasi if(kota_asal == '' || kota_tujuan == '' || berat == '' || kurir == ''){ final snackBar = SnackBar(content: Text("Isi bidang yang masih kosong!")); ScaffoldMessenger.of(context).showSnackBar(snackBar); }else{ //berpindah halaman dan bawa data Navigator.push( context, // DetailPage adalah halaman yang dituju MaterialPageRoute( builder: (context) => DetailPage( kota_asal: kota_asal, kota_tujuan: kota_tujuan, berat: berat, kurir: kurir, ) ), ); } }, child: Center( child: Text("Cek Ongkir"), ), ) ], ), ), ); } }


6. Buatlah sebuah file baru dengan nama detail_page.dart. Lalu isi file tersebut dengan script di bawah ini. Halaman ini berfungsi untuk menampilkan list cost/biaya ongkir. Dan jangan lupa mengganti YOUR API KEY sesuai dengan api key dari rajaongkir kalian masing-masing.
    

        import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; class DetailPage extends StatefulWidget { final String? kota_asal; final String? kota_tujuan; final String? berat; final String? kurir; DetailPage({this.kota_asal, this.kota_tujuan, this.berat, this.kurir}); @override State<DetailPage> createState() => _DetailPageState(); } class _DetailPageState extends State<DetailPage> { List _data = []; var key = 'YOUR API KEY'; @override void initState() { // ignore: todo // TODO: implement initState super.initState(); _getData(); } Future _getData() async { try { final response = await http.post( Uri.parse( "https://api.rajaongkir.com/starter/cost", ), //MENGIRIM PARAMETER body: { "key": key, "origin": widget.kota_asal, "destination": widget.kota_tujuan, "weight": widget.berat, "courier": widget.kurir }, ).then((value) { var data = jsonDecode(value.body); setState(() { _data = data['rajaongkir']['results'][0]['costs']; }); }); } catch (e) { //ERROR print(e); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Detail Cek Ongkir"), ), body: ListView.builder( itemCount: _data.length, itemBuilder: (_, index) { return ListTile( title: Text("${_data[index]['service']}"), subtitle: Text("${_data[index]['description']}"), trailing: Column( crossAxisAlignment: CrossAxisAlignment.end, children: [ SizedBox(height: 5,), Text( "Rp ${_data[index]['cost'][0]['value']}", style: TextStyle(fontSize: 20, color: Colors.red), ), SizedBox(height: 3,), Text("${_data[index]['cost'][0]['etd']} Days") ], ), ); }, ), ); } }


7. Semua step sudah kita lalui. Beberapa penjelasan sudah saya sertakan pada script di atas. Jika kurang jelas atau memiliki masalah silahkan tanya langsung di kolom komentar. Silahkan jalankan emulator kalian dan jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

Aplikasi Cek Ongkir
Hasil Akhir Cek Ongkir



Ok, mantap!. Sekarang kalian sudah bisa membuat aplikasi cek ongkir dengan memanfaatkan package http dan dropdown_search. Sungguh perjalanan menjadi seorang flutter developer yang luar biasa!. Kalian bisa melakukan improvisasi secara mandiri dan menemukan ide-ide baru untuk dikombinasikan dan diaplikasikan ke dalam aplikasi yang nyata.

Berikut ini tutorial pemrograman flutter menarik lainnya yang bisa kalian ikuti secara mandiri

Baca Artikel Lain ✨
📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more
📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more
📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Ok, sekian tutorial kali ini tentang cara cepat dan mudah membuat aplikasi cek ongkir dengan menggunakan flutter. Semoga bermanfaat. Silahkan share sebanyak banyaknya dan kasih komentar. Sekian dan terima kasih.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik