How to extract a widget that sets the state

0

I have a DataTable, and I want to extract the widget because I use it all across my app. The DataTable has the functionality to order the column pressing on the column name.

I am able to make work all perfectly, but I am not able to understand how can I extract the widget and at the same time maintain the funcitonallity. I am getting an approach with callback but I can not solve it.

My code

 Column(
    crossAxisAlignment: CrossAxisAlignment.center,
                                         // this int and bool I need to pass, but it is onlyh in setState() 
    children: <Widget>[GetTable(true, 0, quantityPressed(1, true), [], getListItemsAccount())]
  )

Get Table Class

import 'package:flutter/material.dart';

class GetTable extends StatefulWidget {
  int indexCol;
  bool as;

  final void Function(int, bool) callback;
  final List<String> columns;
  final List<DataRow> rows;

  GetTable(this.as, this.indexCol, this.callback, this.columns, this.rows);

  @override
  _GetTableState createState() => _GetTableState();
}

class _GetTableState extends State<GetTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columnSpacing: 30,
      horizontalMargin: 0,
      sortColumnIndex: widget.indexCol,
      sortAscending: widget.as,
      columns: createColumns(),
      rows: widget.rows,
    );
  }

  List<DataColumn> createColumns() {
    var list = List<DataColumn>();
    for (var i = 0; i < widget.columns.length; i++) {
      list.add(DataColumn(
        numeric: true,
        label: Text(
          widget.columns[i],
          style: TextStyle(fontFamily: 'Comfortaa'),
        ),
        onSort: (index, bool) {
          widget.callback(index, bool);
        },
      ));
    }
    return list;
  }
}

The complete code without extracting the widget inside the screen is:

  var colTable = 0;


var asTable = true;
  List<ItemShopModel> items;
  var total = 0.0;
  var currency = getKenya();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CALCULATOR'),
      ),
      body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          Center(
            child: Form(
              key: _formKey,
              child: Padding(
                padding: EdgeInsets.all(16.0),
                // Extract this Widget
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    DataTable(
                      columnSpacing: 30,
                      horizontalMargin: 0,
                      sortColumnIndex: colTable,
                      sortAscending: asTable,
                      columns: [
                        DataColumn(
                          numeric: true,
                          label: Text(
                            'Quantity',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) =>
                                    a.getQuantity().compareTo(b.getQuantity()));
                              } else {
                                items.sort((a, b) =>
                                    b.getQuantity().compareTo(a.getQuantity()));
                              }
                            });
                          },
                        ),
                        DataColumn(
                          label: Text(
                            'Item',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) => a
                                    .getItem()
                                    .getName()
                                    .compareTo(b.getItem().getName()));
                              } else {
                                items.sort((a, b) => b
                                    .getItem()
                                    .getName()
                                    .compareTo(a.getItem().getName()));
                              }
                            });
                          },
                        ),
                        DataColumn(
                          label: Text(
                            'Total price',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) => a
                                    .getFinalPrice()
                                    .compareTo(b.getFinalPrice()));
                              } else {
                                items.sort((a, b) => b
                                    .getItem()
                                    .getName()
                                    .compareTo(a.getItem().getName()));
                              }
                            });
                          },
                        ),
                      ],
                      rows: getListItemsAccount(),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Container(
                      height: 76.00,
                      width: 252.00,
                      decoration: BoxDecoration(
                        color: Color(0xff48a999),
                        border: Border.all(
                          width: 3.00,
                          color: Color(0xff00796b),
                        ),
                        borderRadius: BorderRadius.circular(21.00),
                      ),
                      child: Center(
                        child: Text(
                          total.toString(),
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: "Indie Flower",
                            fontSize: 54,
                            color: Color(0xffffffff),
                          ),
                        ),
                      ),
                    ),
                    getChange(),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

How can I effectively extract the Widget?

flutter
dart
asked on Stack Overflow May 8, 2020 by kike • edited May 8, 2020 by Genchi Genbutsu

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0