Posts

Bismillah, data table merupakan sebuah widget untuk menampilkan data dalam berbentuk table yang terdiri dari kolom dan baris.

Ukuran lebar dari tiap kolom berubah otomatis tergantung isi tiap selnya

sebagai contoh kita akan membuat table seperti berikut :

Nutrition
	Dessert (100g serving)	Calories	Fat (g)	Protein (g)
[ ]	Frozen Yogurt	159	6.0	4.0
[ ]	Ice Cream Sandwich	237	9.0	4.3
[ ]	Eclair	262	16.0	6.0

Buat sebuah project baru :

Sekarang kita tinggal membuatnya seperti berikut:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Data Table Example"),
      ),

      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: <DataColumn>[
            DataColumn(label: Text("Dessert (100g serving)")),
            DataColumn(label: Text("Calories")),
            DataColumn(label: Text("Fat (g)")),
            DataColumn(label: Text("Protein (g)")),
          ],
          rows: <DataRow>[
            DataRow(
                cells: <DataCell>[
                  DataCell(Text("Frozen Yogurt")),
                  DataCell(Text("159")),
                  DataCell(Text("6.0")),
                  DataCell(Text("4.0")),
                ],
            ),
            DataRow(
                cells: <DataCell>[
                  DataCell(Text("Ice Cream Sandwich")),
                  DataCell(Text("237")),
                  DataCell(Text("9.0")),
                  DataCell(Text("4.3")),
                ],
            ),
            DataRow(
                cells: <DataCell>[
                  DataCell(Text("Eclair")),
                  DataCell(Text("262")),
                  DataCell(Text("16.0")),
                  DataCell(Text("6.0")),
                ],
            ),
          ],
        ),
      ),
    );
  }
}

Dan hasilnya :