Mengirimkan Data ke Internet di Flutter

View Categories

Mengirimkan Data ke Internet di Flutter

Berinteraksi dengan internet sangat penting bagi sebagian besar aplikasi agar dapat berfungsi. Di Flutter, paket http digunakan untuk mengirimkan data ke internet. Untuk mengirim data ke internet melalui aplikasi Anda, ikuti langkah-langkah berikut:

  1. Impor paket http
  2. Kirim data ke server melalui paket http
  3. Ubah response menjadi object dart
  4. Tampilkan response

Mengimport Paket http

Pertama, tambahkan paket http ke dalam file pubspec.yaml seperti di bawah ini

Tangkapan layar ketika menambahkan library http pada pubspec.yaml

Setelah menambahkan http di pubspec.yaml lalu ketikkan command “flutter pub get” pada terminal agar flutter menginstal dependency paket yang telah ditambahkan pada pubspec.yaml ke dalam aplikasi.

flutter pub get

Setelah menambahkan paket di pubspec.yaml, selanjutnya import dependency http di file dart yang akan menggunakan http dengan kode sebagai berikut.

import 'package:http/http.dart' as http;

Mengirim Data ke Server

Dalam artikel ini, kita akan membuat data Album dan mengirimkannya ke JSONPlaceholder melalui metode http.post.

Future createAlbum(String title) async {
  final http.Response response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

  if (response.statusCode == 201) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to create album.');
  }
}

Konversi Data Response

Meskipun mengirim permintaan melalui internet tidaklah sulit, namun mengambil informasi data dari response asli dapat menjadi sulit. Untuk membuatnya lebih mudah, konversikan raw data (http.response) menjadi object dart. Dalam hal ini, kita akan membuat class Album yang berisi data JSON seperti contoh di bawah ini:

class Album {
  final int id;
  final String title;
  Album({required this.id, required this.title});
  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}

Lakukan langkah-langkah berikut untuk memperbarui fungsi fetchAlbum agar mengembalikan Future<Album>:

  1. Gunakan paket dart:convert untuk mengubah body respons menjadi Map JSON.
  2. Gunakan metode pembuatan fromJSON() untuk mengonversi Map JSON menjadi Album jika server memberikan respons OK dengan kode status 200.
  3. Lempar exception jika server tidak memberikan respons OK dengan kode status 200.
Future createAlbum(String title) async {
  final http.Response response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

  if (response.statusCode == 201) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to create album.');
  }
}

Judul Album dari Pengguna

Buatlah sebuah TextField agar pengguna dapat memasukkan judul dan sebuah RaisedButton untuk mengirim data ke server. Selain itu, buatlah sebuah TextEditingController untuk membaca input dari pengguna yang dimasukkan melalui TextField seperti yang ditunjukkan di bawah ini:

Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextField(
                      controller: _controller,
                      decoration: InputDecoration(
                          hintText: 'Masukkan Judul',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(18),
                          )),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                    ElevatedButton(
                      child: const Text('Create Data'),
                      onPressed: () {
                        setState(() {
                          _futureAlbum = createAlbum(_controller.text);
                        });
                      },
                    ),
                  ],
                )

Menampilkan Data

Gunakan widget FutureBuilder untuk menampilkan data di layar seperti yang ditunjukkan di bawah ini:

FutureBuilder(
                  future: _futureAlbum,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(snapshot.data!.title);
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }

                    return const CircularProgressIndicator();
                  },
                ),

Berikut ini adalah source code lengkap dari langkah-langkah di atas.

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future createAlbum(String title) async {
  final http.Response response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/albums'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );

  if (response.statusCode == 201) {
    return Album.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to create album.');
  }
}

class Album {
  final int id;
  final String title;

  Album({required this.id, required this.title});

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album(
      id: json['id'],
      title: json['title'],
    );
  }
}

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State {
  final TextEditingController _controller = TextEditingController();
  Future? _futureAlbum;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Membuat Data',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Nextgen Tutorial'),
          backgroundColor: Colors.blue,
        ),
        body: Container(
          alignment: Alignment.center,
          padding: const EdgeInsets.all(8.0),
          child: _futureAlbum == null
              ? Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    TextField(
                      controller: _controller,
                      decoration: InputDecoration(
                          hintText: 'Masukkan Judul',
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(18),
                          )),
                    ),
                    const SizedBox(
                      height: 12,
                    ),
                    ElevatedButton(
                      child: const Text('Create Data'),
                      onPressed: () {
                        setState(() {
                          _futureAlbum = createAlbum(_controller.text);
                        });
                      },
                    ),
                  ],
                )
              : FutureBuilder(
                  future: _futureAlbum,
                  builder: (context, snapshot) {
                    if (snapshot.hasData) {
                      return Text(snapshot.data!.title);
                    } else if (snapshot.hasError) {
                      return Text("${snapshot.error}");
                    }

                    return const CircularProgressIndicator();
                  },
                ),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Delete Data Di Flutter
Tutorial setelahnya : Mengirim Data Antar Screen Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan