UDACODING

Posts

Membuat Data Table pada Flutter

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)CaloriesFat (g)Protein (g)
[ ]Frozen Yogurt1596.04.0
[ ]Ice Cream Sandwich2379.04.3
[ ]Eclair26216.06.0

Buat sebuah project baru :

image-5 Membuat Data Table pada Flutter

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 :

datatable Membuat Data Table pada Flutter

1 Comment :

  1. […] Membuat Data Table pada Flutter […]

    Reply

Leave a Reply :

* Your email address will not be published.