Home Flutter Gridview and Container with Random Colors

Gridview and Container with Random Colors

0
Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa kabar semuanya ? Semoga semuanya dalam keadaan sehat ya. Kali ini saya akan membuat gridview dan container dengan warna yang random. Langsung saja ke kodingannya, buat projek flutter terlebih dahulu, namanya bebas, sesuka kalian. Kemudian buat class MyApp.

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

Kemudian buat class MyHomePage, di class tersebut buat List of container dan variable, kode nya seperti ini.

final List<Container> colorList = List.generate(50, (index) {
    return Container(
      color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256),
          Random().nextInt(256)),
    );
  });

List<Container> itu hanya memuat sebuah container saja, variable colorList untuk menampung data dari List.generate dengan banyak nya itu 50 container. Kemudian untuk menampilkan variable diatas pertama – tama kita buat sebuah Gridview terlebih dahulu, didalam gridview ini, kita akan memanggil variable yang sudah kita buat diatas, Kode nya seperti ini.

GridView(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
              mainAxisSpacing: 10,
              childAspectRatio: 3 / 4),
          children: colorList,
        )

Didalam widget GridView ini terdapat parameter penting, yaitu gridDelegate. Griddelegete ini membutuhkan widget SliverGridDelegateWithFixedCrossAxisCount. Didalam widget tersebut, untuk memuat berapa banyak kesamping, sebanyak 3 dengan menggunakan crossAxisCount, kemudian untuk memberi jarak kesamping, menggunakan parameter crossAxisSpacing, untuk jarak antar column nya menggunakan mainAxisSpacing, untuk membuat tinggi dan lebarnya, menggunakan childAspectRatio. Jika menggunakan gridview, high dan width pada container tidak akan ada pengaruh sama sekali. Ini hasil dari kodingan tersebut.

Hasil Gridview dan container dengan random color

Ini kode fullnya.

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:get_ip_address/get_ip_address.dart';
import 'package:intl/intl.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key}) : super(key: key);
  final List<Container> colorList = List.generate(50, (index) {
    return Container(
      color: Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256),
          Random().nextInt(256)),
    );
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("Gridview dan Container"),
        ),
        body: GridView(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
              crossAxisSpacing: 20,
              mainAxisSpacing: 10,
              childAspectRatio: 3 / 4),
          children: colorList,
        ));
  }
}

Terimakasih sudah membaca, semoga bermanfaat.