Flutter Staggered Grid View

Staggered Grid View adalah jenis tata letak yang digunakan untuk menampilkan gambar dan postingan, seperti yang sering kita lihat di berbagai platform sosial seperti Pinterest dan sebagainya. Fitur utama dari Staggered Grid View adalah tampilan layout yang menarik dan memberikan pengalaman pengguna yang baik. Staggered Grid View terdiri dari container yang tersusun dalam baris dan kolom dengan ukuran yang berbeda-beda, sehingga dapat menampilkan gambar dan postingan dengan ukuran yang bervariasi.

Beberapa fitur yang dapat diatur pada Grid view termasuk crossAxiscount, minAxiscount, main_axis extent dari tile, margin pada main-axis dan cross-axis, serta tata letak grid Staggered dan Spannable. Selain itu, SliverStaggeredGrid juga tersedia untuk digunakan pada CustomScrollView.

Menggunakan Staggered Grid View

Pada artikel ini, kita akan mempelajari cara mengimplementasikan Staggered Grid View pada aplikasi Flutter. Untuk membuatnya, ikuti langkah-langkah berikut ini.

Menambahkan dependensi pada file pubspec.yaml.

dependencies:
    flutter_staggered_grid_view: ^0.4.0

Import dependency ke file main.dart

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

Sekarang, mari kita lihat implementasi Staggered Grid View. Untuk melakukannya, ikuti langkah-langkah di bawah ini:

Langkah 1: Untuk mengimplementasikan Staggered Grid View di proyek Anda, pertama-tama Anda harus menambahkan dependensi di file pubspec.yaml di folder lib. Sekarang klik pub.get dan tunggu sampai dikonfigurasikan.

Langkah 2: Return Material App pada file main.dart(). Pertama, buatlah class MyApp() sebagai StatelessWidget dan di dalamnya terdapat fungsi build yang mengembalikan MaterialApp(). Sekarang pada MaterialApp(), berikan judul aplikasi dan tambahkan debugShowCheckModeBanner sebagai false yang akan menghapus banner debug pada aplikasi. Selanjutnya tambahkan tema sebagai Dark theme dan setelah itu tentukan halaman awal dengan menambahkan home: Homepage().

import 'package:flutter/material.dart';

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

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

// Widget ini merupakan dasar dari aplikasi Anda.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      //Judul atau Title dari App
      title: 'Nextgen App',

      //Tema dari App
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark(),

      // Halaman Pertama dari App
      home: HomePage(),
    );
  }
}

Langkah 3: Sekarang impor dependensi untuk Staggered Grid View di HomePage. Setelah mengimpor dependensi, buat AppBar di dalam Scaffold. Selanjutnya, buat Container baru di dalam body. Di dalam Container tersebut, implementasikan Staggered Grid View seperti yang ditunjukkan dalam kode di bawah ini. Di dalam Staggered Grid View, terdapat staggeredTiles. Untuk itu, kita mendeklarasikan List _cardTile yang menentukan ukuran Card. Setelah itu, kita telah membuat class BackGroundTile di StatelessWidget. Di dalam class tersebut, kita mendeklarasikan dua variabel final, yaitu backgroundColor dan icondata. Setelah itu dibuat constructor untuk kedua variabel tersebut, dan mengembalikan Card yang terdiri dari backgroundColor dan icondata. Di dalam Staggered Grid View, deklarasikan children sebagai _listTile. Untuk itu, dibuat List yang mewarisi sifat dari class BackGroundTile, yang terdiri dari backgroundColor dan icondata.

//List ukuran card
List _cardTile = const [
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
];

//List Cards dengan color dan icon
List _listTile = const [
  BackGroundTile(backgroundColor: Colors.red, icondata: Icons.home),
  BackGroundTile(backgroundColor: Colors.orange, icondata: Icons.ac_unit),
  BackGroundTile(backgroundColor: Colors.pink, icondata: Icons.landscape),
  BackGroundTile(backgroundColor: Colors.green, icondata: Icons.portrait),
  BackGroundTile(
      backgroundColor: Colors.deepPurpleAccent, icondata: Icons.music_note),
  BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.access_alarms),
  BackGroundTile(
      backgroundColor: Colors.indigo, icondata: Icons.satellite_outlined),
  BackGroundTile(backgroundColor: Colors.cyan, icondata: Icons.search_sharp),
  BackGroundTile(
      backgroundColor: Colors.yellowAccent, icondata: Icons.adjust_rounded),
  BackGroundTile(
      backgroundColor: Colors.deepOrange, icondata: Icons.attach_money),
];

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen App"),
      ),
      body: StaggeredGridView.count(
        crossAxisCount: 4,
        staggeredTiles: _cardTile,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        children: _listTile,
      ),
    );
  }
}

class BackGroundTile extends StatelessWidget {
  final Color backgroundColor;
  final IconData icondata;

  const BackGroundTile(
      {super.key, required this.backgroundColor, required this.icondata});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: Icon(icondata, color: Colors.white),
    );
  }
}

Berikut ini adalah source code lengkap setelah mengikuti langkah-langkah di atas.

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

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

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

// Widget ini merupakan dasar dari aplikasi Anda.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,

      //Judul atau Title dari App
      title: 'Nextgen App',

      //Tema dari App
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData.dark(),

      // Halaman Pertama dari App
      home: const HomePage(),
    );
  }
}

//List ukuran card
List _cardTile = const [
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
  StaggeredTile.count(2, 3),
  StaggeredTile.count(2, 2),
];

//List Cards dengan color dan icon
List _listTile = const [
  BackGroundTile(backgroundColor: Colors.red, icondata: Icons.home),
  BackGroundTile(backgroundColor: Colors.orange, icondata: Icons.ac_unit),
  BackGroundTile(backgroundColor: Colors.pink, icondata: Icons.landscape),
  BackGroundTile(backgroundColor: Colors.green, icondata: Icons.portrait),
  BackGroundTile(
      backgroundColor: Colors.deepPurpleAccent, icondata: Icons.music_note),
  BackGroundTile(backgroundColor: Colors.blue, icondata: Icons.access_alarms),
  BackGroundTile(
      backgroundColor: Colors.indigo, icondata: Icons.satellite_outlined),
  BackGroundTile(backgroundColor: Colors.cyan, icondata: Icons.search_sharp),
  BackGroundTile(
      backgroundColor: Colors.yellowAccent, icondata: Icons.adjust_rounded),
  BackGroundTile(
      backgroundColor: Colors.deepOrange, icondata: Icons.attach_money),
];

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen App"),
      ),
      body: StaggeredGridView.count(
        crossAxisCount: 4,
        staggeredTiles: _cardTile,
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
        children: _listTile,
      ),
    );
  }
}

class BackGroundTile extends StatelessWidget {
  final Color backgroundColor;
  final IconData icondata;

  const BackGroundTile(
      {super.key, required this.backgroundColor, required this.icondata});

  @override
  Widget build(BuildContext context) {
    return Card(
      color: backgroundColor,
      child: Icon(icondata, color: Colors.white),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Progress Indicator
Tutorial setelahnya : Flutter Custom Font
Semua Tutorial Flutter : Tutorial Flutter

Menggunakan Staggered Grid View

Tinggalkan Balasan