Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART2

by Faisal Ridwan in Dart
flutter-pemula-4-isallab.com.jpg

ISALLAB.COM – Halo teman-teman, di postingan kali ini saya akan membahas seputar tentang Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView. Dan sebelum kamu belajar Flutter saya saranin kamu belajar bahasa pemrograman Dart dahulu, sebab dasar dari Flutter sendiri adalah bahasa pemrograman Dart. Untuk linknya silahkan kamu ikuti link di bawah ini. Lengkap !

Baca semua partnya ya agar kamu paham semua dan gampang saat belajar Flutter ini 🙂

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 1

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 2

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 3

BACA DISINI : Pengenalan Bahasa Pemrograman Dart Untuk Pemula – Part 4

Beberapa hal yang akan saya bahas dalam Scrolling Widget , yaitu :

Kita akan mencoba membuat halaman menggunakan ( klik untuk ke halaman langsung )

  1. SingleChildScrollView
  2. ListView,
  3. ListView.builder,
  4. ListView.separated,
  5. GridView,
  6. GridView.count,
  7. GridView.builder, dan
  8. GridView.extent.

Pastikan kalian sudah pernah menginstal Flutter pada laptop kalian dan pelajari semuanya disini, jika belum kalian dapat membaca artikel berikut :

Langsung ke materinya yaa :

5. GridView

GridView ​membuat tampilan secara grid atau biasa digunakan ​untuk menampilkan data yang berbentuk gambar seperti pada galeri. ​GridDelegate ​pada GridView ​berfungsi untuk mengatur jumlah widget secara horizontal​, ada ​2 gridDelegate yang biasa digunakan yaitu, SliverGridDelegateWithMaxCrossAxisExtent ​digunakan ​untuk mengatur ukuran pixel maksimal pada 1 item​, contoh pada layar yang mempunyai lebar 700 pixel dan kita atur maxCrossAxisExtent ​dengan 150 pixel, maka akan terdapat 5 item secara horizontal dimana tiap item mempunyai lebar masing masing 140 pixel (700 / 5 = 140), dan SliverGridDelegateWithFixedCrossAxisCount ​digunakan untuk mengatur nilai tetap jumlah item secara horizontal. Untuk item disini kita gunakan widget ​GridTile​, itu adalah widget bawaan untuk ​GridView ​yang dimana didalamnya terdapat beberapa komponen yang biasa kita gunakan yaitu, ​child ​untuk menampung widget utama, ​header ​untuk di paling atas item, dan ​footer ​untuk di paling bawah item.

a. GridView dengan DelegateMax

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView bersama ISALLAB.COM"),
        ),
        body: GridView(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 256,
          ),
          children: [
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            )
          ],
        ),
      ),
    );
  }
}

b. GridView dengan DelegateFixed

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView bersama ISALLAB.COM"),
        ),
        body: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 6,
          ),
          children: [
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            )
          ],
        ),
      ),
    );
  }
}

6. GridView.count

GridView.count sama seperti GridView biasa hanya saja pada GridView.count kita hanya dapat mengatur nilai ​crossAxisCount ​untuk jumlah item secara horizontal.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView.count bersama ISALLAB.COM"),
        ),
        body: GridView.count(
          crossAxisCount: 3,
          children: [
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            )
          ],
        ),
      ),
    );
  }
}

7. GridView.builder

GridView.builder ​digunakan ketika widget atau data yang kita punya sangat banyak atau tidak diketahui banyaknya​. Cukup buat satu widget pada nilai balik di builder tersebut. Untuk nilai data yang sudah ditetapkan (bukan unlimited count), tambahkan atribut ​itemCount​.

a. GridView.builder dengan DelegateMax

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView.count bersama ISALLAB.COM"),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 256,
          ),
          itemBuilder: (BuildContext context, int index) {
            return GridTile(
              child: FlutterLogo(),
            );
          },
        ),
      ),
    );
  }
}

b. GridView.builder dengan DelegateFixed

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView.count bersama ISALLAB.COM"),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
          ),
          itemBuilder: (BuildContext context, int index) {
            return GridTile(
              child: FlutterLogo(),
            );
          },
        ),
      ),
    );
  }
}

8. GridView.extent

GridView.extent sama seperti pada GridView.count hanya saja ini kita hanya bisa ​untuk maxCrossAxisExtent untuk mengatur lebar maksimal pada tiap item​.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Belajar GridView.extent bersama ISALLAB.COM"),
        ),
        body: GridView.extent(
          maxCrossAxisExtent: 256,
          children: [
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            ),
            GridTile(
              child: FlutterLogo(),
            ),
          ],
        ),
      ),
    );
  }
}

Sampai disini tutorial Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView – PART2 silahkan di link pelajari lagi Flutter Pemula #4 – Scrolling Widget SingleChildScrollView ListView GridView -PART 1,  ikuti terus website ini untuk mendapatkan tutorial dan artikel menarik lainya. Semoga bermanfaat, jangan lupa berkomentar dan bagikan artikel ini jika menurut kamu berguna. 🙂

Tagged with: , , , , , , , ,

Silahkan Berkomentar :