crud_table 0.0.6 copy "crud_table: ^0.0.6" to clipboard
crud_table: ^0.0.6 copied to clipboard

CRUD Table Flutter is a package for crating CURD-UI for your entity/object/class easily. It consists of a Lazy loading function, resizable columns, and integrated CRUD Form.

example/lib/main.dart

import 'package:crud_table/crud_table.dart';
import 'package:crud_table_example/user_task.dart';
import 'package:crud_table_example/user_tasks_service.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
            child: CrudTable<UserTask>(
              crudViewSource: createCrudSource(),
              onTap: (t) {
                t as UserTask;
              },
            ),
          ),
        ],
      ),
    );
  }

  CrudViewSource createCrudSource() {
    return CrudViewSource(
      columns: ["id", "code", "description", "active"],
      pageLimit: 20,
      rowHeight: 30,
      emptyEntityFactory: () =>
          UserTask(), // here we provide the empty object, which we get back when click on the submit button of the form
      createRows: (data, index) {
        data as UserTask;
        List<Widget> rows = [];
        rows.add(
            Text(data.id.toString(), style: const TextStyle(fontSize: 16)));
        rows.add(Text(data.taskCode.toString(),
            style: const TextStyle(fontSize: 16)));
        rows.add(Text(data.description.toString(),
            style: const TextStyle(fontSize: 16)));
        rows.add(
            Text(data.active.toString(), style: const TextStyle(fontSize: 16)));
        return rows;
      },
      createForm: (data) {
        data as UserTask;

        List<FormSection> fields = [];

        FormSection section1 = FormSection(
            sectionTitle: "System Tasks",
            formRows: () {
              List<FormRow> r = [];
              FormRow r1 = FormRow(formItems: () {
                List<FormItem> items = [];
                items.add(FormItem(
                  ratio: 1,
                  item: TextFormField(
                    key: CrudTableUtil.formFieldKey(data.id),
                    initialValue: CrudTableUtil.formFieldInitValue(data.id),
                    decoration: const InputDecoration(
                      labelText: 'Id',
                      border: OutlineInputBorder(),
                    ),
                    enabled: false,
                  ),
                ));
                items.add(FormItem(
                  ratio: 1,
                  item: TextFormField(
                    key: CrudTableUtil.formFieldKey(data.taskCode),
                    initialValue:
                        CrudTableUtil.formFieldInitValue(data.taskCode),
                    onSaved: (v) {
                      data.taskCode = v;
                    },
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Enter The Task Code!';
                      }
                      return null;
                    },
                    decoration: const InputDecoration(
                      labelText: 'Code',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ));
                return items;
              });
              r.add(r1);
              return r;
            });

        FormSection section2 = FormSection(
            sectionTitle: "System Tasks Section 02",
            formRows: () {
              List<FormRow> r = [];
              FormRow r1 = FormRow(formItems: () {
                List<FormItem> items = [];

                items.add(FormItem(
                  ratio: 1,
                  item: TextFormField(
                    key: CrudTableUtil.formFieldKey(data.description),
                    initialValue:
                        CrudTableUtil.formFieldInitValue(data.description),
                    validator: (value) {
                      if (value!.isEmpty) {
                        return 'Enter a Description!';
                      }
                      return null;
                    },
                    onSaved: (v) {
                      data.description = v;
                    },
                    decoration: const InputDecoration(
                      labelText: 'Description',
                      border: OutlineInputBorder(),
                    ),
                  ),
                ));

                return items;
              });
              FormRow r2 = FormRow(formItems: () {
                return [
                  (FormItem(
                    ratio: 1,
                    item: CheckboxListTile(
                      title: const Text("Active"),
                      controlAffinity: ListTileControlAffinity.leading,
                      value: data.active ?? false,
                      onChanged: (bool? value) {
                        setState(() {
                          data.active = value!;
                        });
                      },
                    ),
                  ))
                ];
              });

              r.add(r1);
              r.add(r2);
              return r;
            });

        fields.add(section1);
        fields.add(section2);
        return fields;
      },
      crudActionListener: CrudActionListener<UserTask>(
        add: (data) async {
          UserTasksService userS = UserTasksService.instance!;
          return userS.addTask(data);
        },
        edit: (data) async {
          data as UserTask;
          UserTasksService userS = UserTasksService.instance!;
          return userS.updateTask(data, data.id!.toInt());
        },
        delete: (data) async {
          data as UserTask;
          UserTasksService userS = UserTasksService.instance!;
          return userS.deleteTask(data.id!.toInt());
        },
      ),
      onPageChange: (pagination) async {
        UserTasksService userS = UserTasksService.instance!;
        return userS.getTasks(pagination.pageNumber, pagination.limit);
      },
    );
  }
}
47
likes
140
points
35
downloads

Publisher

unverified uploader

Weekly Downloads

CRUD Table Flutter is a package for crating CURD-UI for your entity/object/class easily. It consists of a Lazy loading function, resizable columns, and integrated CRUD Form.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

fluid_kit, flutter, flutter_riverpod, split_view, visibility_detector

More

Packages that depend on crud_table