quick start for english

Quick start

A simple and quick way to apply PlutoGrid to flutter applications.

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final myData = MyGridData();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: const Text('PlutoGrid Demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(30),
        child: PlutoGrid(
          columns: myData.columns,
          rows: myData.rows,
        ),
      ),
    );
  }
}

class MyGridData {
  List<PlutoColumn> columns;
  List<PlutoRow> rows;

  MyGridData() {
    columns = [
      PlutoColumn(
        title: 'Text',
        field: 'text_field',
        type: PlutoColumnType.text(),
      ),
      PlutoColumn(
        title: 'Number',
        field: 'number_field',
        type: PlutoColumnType.number(),
      ),
      PlutoColumn(
        title: 'Select',
        field: 'select_field',
        type: PlutoColumnType.select(['item1', 'item2', 'item3']),
      ),
      PlutoColumn(
        title: 'Date',
        field: 'date_field',
        type: PlutoColumnType.date(),
      ),
    ];

    rows = [
      PlutoRow(
        cells: {
          'text_field': PlutoCell(value: 'Text cell value1'),
          'number_field': PlutoCell(value: 2020),
          'select_field': PlutoCell(value: 'item1'),
          'date_field': PlutoCell(value: '2020-08-06'),
        },
      ),
      PlutoRow(
        cells: {
          'text_field': PlutoCell(value: 'Text cell value2'),
          'number_field': PlutoCell(value: 2021),
          'select_field': PlutoCell(value: 'item2'),
          'date_field': PlutoCell(value: '2020-08-07'),
        },
      ),
      PlutoRow(
        cells: {
          'text_field': PlutoCell(value: 'Text cell value3'),
          'number_field': PlutoCell(value: 2022),
          'select_field': PlutoCell(value: 'item3'),
          'date_field': PlutoCell(value: '2020-08-08'),
        },
      ),
    ];
  }
}