Membuat Tabel menggunakan Flutter

Halo semuanya, Berjumpa dengan Miniblog dari Inzaghi's Blog! Jika sebelumnya, sudah membuat Baris dan Kolom menggunakan Flutter, kali ini kita akan membuat Tabel menggunakan Flutter.

Sumber : Javatpoint.com, Codingninjas.com, Fluttercampus.com, dan juga menggunakan ChatGPT

Widget tabel dapat digunakan ketika kita ingin menyimpan beberapa baris dengan lebar kolom yang sama, dan setiap kolom (tabel) berisi data yang sama. Flutter menyediakan pendekatan lain untuk hal yang sama menggunakan widget GridView.

Untuk membuat tabel, kita harus menggunakan hal-hal berikut :

• Pertama, kita perlu menambahkan widget Tabel di dalam body.
• Selanjutnya, kita harus menambahkan TableRow(s) di dalam children dari widget tabel. Karena widget tabel memiliki beberapa baris, kita menggunakan children, bukan child.
• Terakhir, kita perlu menambahkan TableCell(s) di dalam children dari widget TableRow. Sekarang, kita dapat menulis widget apa pun di tempat ini seperti kita akan menggunakan widget Teks.

1. Menggunakan Container

Berikut ini adalah Program Flutter untuk membuat Tabel :

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('Contoh Flutter dengan Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Contoh Row:',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 8),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Container(
                    color: Colors.blue,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'A',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.green,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'B',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.orange,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        'C',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(height: 16),
              Text(
                'Contoh Column:',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
              SizedBox(height: 8),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Container(
                    color: Colors.red,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '1',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.purple,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '2',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  Container(
                    color: Colors.yellow,
                    width: 50,
                    height: 50,
                    child: Center(
                      child: Text(
                        '3',
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output :

2. Menggunakan DataTable

Dan inilah adalah Contoh lainnya untuk membuat Tabel yang sedikit kompleks dan menggunakan DataTable :

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('Daftar Tabel'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.all(20),
                child: Text(
                  'Daftar Tabel',
                  style: TextStyle(fontSize: 25),
                ),
              ),
              DataTable(
                columns: [
                  DataColumn(label: Text('No.')),
                  DataColumn(label: Text('Header 1')),
                  DataColumn(label: Text('Header 2')),
                  DataColumn(label: Text('Header 3')),
                  DataColumn(label: Text('Header 4')),
                ],
                rows: [
                  DataRow(cells: [
                    DataCell(Text('1.')),
                    DataCell(Text('Data 1A')),
                    DataCell(Text('Data 2A')),
                    DataCell(Text('Data 3A')),
                    DataCell(Text('Data 4A')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('2.')),
                    DataCell(Text('Data 1B')),
                    DataCell(Text('Data 2B')),
                    DataCell(Text('Data 3B')),
                    DataCell(Text('Data 4B')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('3.')),
                    DataCell(Text('Data 1C')),
                    DataCell(Text('Data 2C')),
                    DataCell(Text('Data 3C')),
                    DataCell(Text('Data 4C')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('4.')),
                    DataCell(Text('Data 1D')),
                    DataCell(Text('Data 2D')),
                    DataCell(Text('Data 3D')),
                    DataCell(Text('Data 4D')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('5.')),
                    DataCell(Text('Data 1E')),
                    DataCell(Text('Data 2E')),
                    DataCell(Text('Data 3E')),
                    DataCell(Text('Data 4E')),
                  ]),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output :

Untuk melihat Project ini di Web, silakan lihat di sini :

• https://zapp.run/edit/flutter-zya6068xya70?entry=lib/main.dart&file=lib/main.dart
• https://zapp.run/edit/flutter-zdg806d9dg90?entry=lib/main.dart&file=lib/main.dart
  

Mohon maaf apabila ada kesalahan sedikitpun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)