Membuat Aplikasi Berita dengan Grid View Flutter dan Api Wordpress

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat aplikasi berita sederhana dengan menggunakan widget grid view dan api wordpress. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Saya sebelumnya sudah pernah membuat aplikasi berita dengan wordpress api di link berikut ini https://www.sahretech.com/2023/07/membuat-aplikasi-berita-dengan-api.html. Tapi tampilannya masih menggunakan list view. Nah, bagi kalian yang masih bingung bagaimana cara menggunakan grid view, maka ini adalah tutorial yang tepat bagi kalian yang ingin mengimplementasikan widget tersebut. Scroll ke bawah untuk langsung melihat hasilnya.

Cara Membuat Aplikasi Grid View Flutter dengan Wordpress Api

1. Buat sebuah project baru dengan nama yang kalian mau. Gunakan flutter versi 3+ yang sudah mendukung null safety.

2. Kemudian buka file pubspec.yaml. Lalu tambahkan paket http: dan flutter_widget_from_html_core:. Ikuti contohnya seperti di bawah ini.

Menambahkan Package

3. Buat sebuah file baru di dalam folder lib dengan nama api.dart. Copy scriptnya di bawah ini.

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

class Api {

  //method untuk mengambil data
  Future fetchData() async {
    
    //mengambil data dari api
    //kita mengambil data dari website hipwee dan menyimpannya ke variabel dataJson
    //anda bisa menggunakan url dari website lain asalkan menggunakan wordpress dan api yang dapat diakses
    var dataJson = await http.get(Uri.parse('https://hipwee.com/wp-json/wp/v2/posts?_embed'));

    //mengubah string ke objek dart
    //perubahan ini bertujuan agar data dapat dikelola dengan mudah
    var data = jsonDecode(dataJson.body);

    //mengembalikan data
    return data;
    
  }
}

4. Buat sebuah file baru di dalam folder lib dengan nama detail.dart. Copy scripnya di bawah ini.

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

class Detail extends StatelessWidget {
  final String title;
  final String content;
  final String image;

  Detail({
    required this.title,
    required this.content,
    required this.image,
  });

  @override
  Widget build(BuildContext context) {
    //menghilangkan text 'data' pada 'data-src' ini biasa terdapat pada 
    String modifiedHtmlString = this.content.replaceAll('data-src', 'src');


    return Scaffold(
      appBar: AppBar(
        title: Text('Detail'),
      ),
      body: ListView(
        padding: EdgeInsets.zero,
        children: [
          Container(
            //ukuran gambar selebar perangkat
            width: double.infinity,
            height: MediaQuery.of(context).size.height * 0.33,


            //anda dapat mengisi container dengan gambar menggunakan properti ini
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage(this.image), // menampilkan gambar
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(
            height: 10, //jarak antara gambar dan konten
          ),
          Padding(
            padding: EdgeInsets.only(left: 16, right: 16, top: 5, bottom: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start, //semua konten dimulai dari sebelah kiri
              children: [
                Text(
                  this.title, //menampilkan judul
                  style: TextStyle(
                    fontSize: 22, //ukuran huruf
                    fontWeight: FontWeight.w400, //ketebalan huruf
                  ),
                ),
                SizedBox(
                  height: 20, //jarak antara judul dan konten
                ),
                HtmlWidget(
                  modifiedHtmlString, //teks html diubah menjadi teks yang bisa dibaca
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

5. Buka file main.dart. Kemudian edit dengan script di bawah ini.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

import 'api.dart';
import 'detail.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Api api = Api();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter News'),
        ),
        body: FutureBuilder(
          future: api.fetchData(),
          builder: (_, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              var list = snapshot.data as List;

              return GridView.builder(
                itemCount: list.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  // banyak grid yang ditampilkan dalam satu baris
                  crossAxisCount: 2,
                ),
                itemBuilder: (_, index) {
                  return Container(
                    margin: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.grey,
                        width: 1.0,
                      ),
                    ),
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          // DetailPage adalah halaman yang dituju
                          MaterialPageRoute(
                            builder: (context) => Detail(
                              title: list[index]['title']['rendered'],
                              content: list[index]['content']['rendered'],
                              image: list[index]['_embedded']
                                  ['wp:featuredmedia'][0]['source_url'],
                            ),
                          ),
                        );
                      },
                      child: Column(
                        children: [
                          Flexible(
                            child: Image.network(
                              list[index]['_embedded']['wp:featuredmedia'][0]
                                  ['source_url'],
                              height:
                                  100, // Sesuaikan ukuran gambar sesuai kebutuhan.
                              fit: BoxFit.cover,
                              width: MediaQuery.of(context).size.width,
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(
                                left: 5, right: 5, top: 5, bottom: 5,),
                            child: Text(
                              list[index]['title']
                                  ['rendered'], //sesuaikan dengan data api
                              style: TextStyle(
                                fontSize: 16,
                              ),
                              maxLines: 3,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              );
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ));
  }
}

6. Ok, sekarang semua tahapan sudah kita kerjakan. Coba kalian sekarang jalankan dengan emulator. Jika berhasil maka tampilannya tampak seperti gambar di bawah ini.

Sekian tutorial singkat kita kali ini tentang cara membuat aplikasi berita dengan grid view flutter dan api wordpress. Semoga tutorial singkat ini bermanfaat, sekian dan terima kasih.