Cara menggunakan grid view html

How to create a list grid view.

Click on a button to choose list view or grid view.

Try it Yourself »

List Grid View

Step 1) Add HTML:

Example

<!-- Load Font Awesome Icon Library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Buttons to choose list or grid view -->
<button onclick="listView()"><i class="fa fa-bars"></i> List</button>
<button onclick="gridView()"><i class="fa fa-th-large"></i> Grid</button>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
</div>

<div class="row">
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
    <p>Some text..</p>
  </div>
</div>

Step 2) Add CSS:

Example

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Step 3) Add JavaScript:

Example

// Get the elements with class="column"
var elements = document.getElementsByClassName("column");

// Declare a loop variable
var i;

// List View
function listView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "100%";
  }
}

// Grid View
function gridView() {
  for (i = 0; i < elements.length; i++) {
    elements[i].style.width = "50%";
  }
}

Try it Yourself »

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menggunakan GridView Builder dan data api di flutter. Penasaran?, ayo ikuti selengkapnya di bawah ini.

Sebelum artikel ini, saya sudah menulis tutorial tentang cara menggunakan ListView Builder dengan data api di link berikut ini https://www.sahretech.com/2022/02/menggunakan-list-view-builder-get-data.html. Cara menggunakan ListView Builder dan GridView Builder hampir sama, perbedaannya hanya pada layout yang ditampilkan.

Jika kalian membaca artikel ini lebih dulu, dibangdingkan artikel saya tentang tutorial ListView Builder sebelumnya, tidak jadi masalah. Karena penggunaanya sama saja. Diharapkan kalian bisa menggunakan keduanya sesuai dengan kebutuhan.

GridView.Count dan GridView.Builder

Sama seperti ListView, GridView juga memiliki beberapa jenis widget yang bisa kita gunakan, diantaranya GridView.Count dan GridView.Builder. Fungsinya sama-sama digunakan untuk membuat data list dalam sebuah aplikasi. Namun, tetap memiliki perbedaan.

GridView.Count biasa digunakan untuk membuat daftar/list data yang tidak besar dan biasanya data-data tersebut bersifat statis. Fitur ini biasa digunakan untuk membuat kategori, kategori apa saja, bisa kategori berita, kategori produk, atau kategori makanan. Biasa digunakan pada GridView.Count, karena kategori memiliki jumlah terbatas dan datanya tidak berubah-ubah.

GridView.Builder digunakan untuk membuat list data yang sangat besar dan dinamis. Fitur ini bisa kita temui di aplikasi e-commerce seperti shopee, tokopedia, atau bukalapak. Biasanya digunakan untuk menampilkan list produk. Penggunaan GridView.Builder ini lebih efektif dan efisien dibandingkan GridView biasa, karena data yang ditampilkan hanya yang terlihat di layar saja, sisa data yang lain akan ditampilkan saat discroll ke atas atau ke bawah.

1. Buka website newsapi.org, lalu daftar sebagai akun baru. Setelah berhasil mendaftar, silahkan menuju ke halaman account atau profil. Disana kalian akan menemukan api key. Api key ini akan kita gunakan nantinya.

Registrasi Akun newsapi.org

2. Buat sebuah project baru di visual studio code dengan menekan key ctrl + shift + P bersamaan. Lalu pilih Flutter: New Project → pilih folder bebas → dan beri nama project dengan grid_news_app.

3. Setelah project flutter kalian sudah dibuat, buka file pubspec.yaml. Lalu copy script di bawah ini dan paste di bawah cupertino_icons: ^1.0.2. Kemudian save file pubspec.yaml agar package, di download ke dalam project.

4. Buka file main.dart lalu ganti isi di dalamnya dengan script yang ada di bawah ini. Untuk penjelasan ada di dalam script dan di dalam tabel penjelas. Tapi jika masih kurang, silahkan tanya langsung di kolom komentar atau tanya di fanspage sahretech.

    

    import 'dart:convert';
    import 'package:http/http.dart' as http;
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      
      List _get = [];
    
      
      var apikey = 'ISI DENGAN API KEY YANG KALIAN DAPATKAN';
    
      @override
      void initState() {
        super.initState();
        _getData();
      }
    
      
      Future _getData() async {
        try {
          final response = await http.get(Uri.parse(
              "https://newsapi.org/v2/top-headlines?country=id&category=business&apiKey=${apikey}"));
    
          
          if (response.statusCode == 200) {
            final data = jsonDecode(response.body);
    
            setState(() {
              
              _get = data['articles'];
            });
          }
        } catch (e) {
          
          print(e);
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          
          debugShowCheckedModeBanner: false,
          home: Scaffold(
    
              
              appBar: AppBar(
                backgroundColor: Colors.white,
                title: Builder(builder: (context) {
                  return Center(
                    child: Text(
                      "Apk Berita",
                      style: TextStyle(color: Colors.black38),
                    ),
                  );
                }),
              ),
              body: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(
                        top: 15,
                        left: 15
                      ),
                      child: Text(
                        "List Berita"
                      ),
                    ),
                    
                    GridList(get: _get),
                  ],
                ),
              )),
        );
      }
    }
    
    class GridList extends StatelessWidget {
      const GridList({
        Key? key,
        required List get,
      }) : _get = get, super(key: key);
    
      final List _get;
    
      @override
      Widget build(BuildContext context) {
        return GridView.builder(
    
          
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
    
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            
            crossAxisCount: 2
          ),
          itemBuilder: (_, index) => Padding(
            padding: EdgeInsets.all(10),
            child: Card(
              child: Column(
                children: [
                  Image(
                    image: NetworkImage(_get[index]['urlToImage'] ??
                        "https://cdn.pixabay.com/photo/2018/03/17/20/51/white-buildings-3235135__340.jpg"),
                    fit: BoxFit.cover,
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text(
                      _get[index]['title'] ?? "No Title",
                      maxLines: 3,
                      overflow: TextOverflow.ellipsis,
                    ),
                  )
                ],
              ),
            ),
          ),
         
         
         itemCount: _get.length,
        );
      }
    }

Tabel Penjelas

5. Selanjutnya cari script var apikey = "ISI DENGAN API KEY YANG KALIAN DAPATKAN", di dalam file main.dart. Lalu gantilah isinya dengan apikey yang kalian dapatkan dari website newsapi.org sebelumnya.

6. Ok, semua tahap sudah kita kerjakan, saatnya melakukan uji coba. Silahkan jalankan emulator kesayangan kalian. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Hasil Akhir

Mantap!, sekarang kalian sudah bisa menggabungkan tampilan grid dengan data dinamis dari internet. Sekarang kalian bisa melakukan improvisasi dengan menambahkan detail atau dengan menambahkan widget flutter lainnya sesuai dengan keinginan. Berikut ini list artikel flutter yang sudah saya tulis. Dan bisa kalian pelajari secara mendiri di rumah.

Ok, sekian tutorial kali ini tentang cara menggunakan GridView.Builder dengan data api. Semoga bermanfaat. Jika ada kesulitan bisa tanya saya langsung di kolom komentar di bawah ini, atau tanya langsung di fanspage. Sekian dan saampai jumpa. :)

Apa itu grid dalam HTML?

Apa itu grid di CSS?

Apa itu grid template Column?

Apa itu class Row?