Home Mobile Show Gridview Basic

Show Gridview Basic

0

Jika anda pengguna Instagram tentu tidak asing dengan tampilan instagram feed. Bentuk tampilan kotak-kotak dan dapat di scroll seperti itulah yang dinamakan grid view. Pada flutter untuk membuat tampilan grid view dapat menggunakan GridView widget. Penggunaan GridView di Flutter seperti penggabungan antara penggunaan ListView widget serta penggunaan row dan column widget. Berikut contoh sederhana Penggunaan GridView di flutter framework.

Code main.dart :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final title = 'Grid View';
    return MaterialApp(
      title: title,
      debugShowCheckedModeBanner: false,

      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          backgroundColor: Colors.black12,
        ),
        body: GridView.count(crossAxisCount: 3,
        children: List.generate(12, (index){
          return Center(
            child:Text('Data Ke - $index', style: Theme.of(context).textTheme.headline,
            ),
          );
        }),
      ),
    ),
    );
  }
}