8.5 C
London
Thursday, April 25, 2024

android – Flutter: ListView with header


Created customized header

  Widget _listHeader({bool hideSelect = true}) {
    return Container(
      coloration: headerColor,
      padding: const EdgeInsets.solely(high: 8, backside: 8),
      baby: Row(
        youngsters: [
          Visibility(
            visible: hideSelect,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(
                    TcConstants.moduleId, TcTrKeys.kSelect, TcTrValues.kSelect),
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(TcConstants.moduleId, TcTrKeys.kDocumentType,
                    TcTrValues.kDocumentType),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(TcConstants.moduleId, TcTrKeys.kSurveyNo,
                    TcTrValues.kSurveyNo),
              ),
            ),
          ),
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.only(left: 5.0),
              child: Text(
                context.tr(
                    TcConstants.moduleId, TcTrKeys.kPageNo, TcTrValues.kPageNo),
              ),
            ),
          ),
        ],
      ),
    );
  }

ListView Merchandise builder widget

 Widget newItems(SelectedSurveyModel merchandise, bool showCheckBox, int index,
      {bool showDelete = false}) {
    return Column(youngsters: <Widget>[
      VP(size: Dimens.d10.responsive()),
      Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Visibility(
            visible: showCheckBox,
            child: QCheckBox(
              value: item.isSelected,
              onChanged: (value) {
                setState(
                  () {
                    if (widget.feeList == null) {
                      item.isSelected = value;
                    }
                  },
                );
              },
            ),
          ),
          Expanded(
            flex: 3,
            child: Padding(
                padding: showCheckBox
                    ? EdgeInsets.all(0)
                    : EdgeInsets.only(left: 10),
                child: Text(
                  '${item.documentName}',
                )),
          ),
          Expanded(
            flex: 2,
            child: Text(
              '${item.khasraNo}',
            ),
          ),
          Expanded(
            flex: 2,
            child: Text(
              ' ${item.pageNo}',
              textAlign: TextAlign.center,
            ),
          ),
          Visibility(
            visible: showDelete,
            child: IconButton(
              icon: const Icon(Icons.delete_outline_rounded),
              onPressed: () {
                if (widget.feeList == null) {
                  _onDeleteItem(index);
                }
              },
            ),
          ),
        ],
      ),
    ]);
  }

calling _header() widget simply above ListView.Builder however having alignment points

enter image description here

I additionally tried with DataTable.

With utilizing DataTable.

  Listing<DataColumn> _createColumns() {
    return [
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kSelect, TcTrValues.kSelect))),
      DataColumn(
          label: Text(context.tr(TcConstants.moduleId, TcTrKeys.kDocumentType,
              TcTrValues.kDocumentType))),
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kSurveyNo, TcTrValues.kSurveyNo))),
      DataColumn(
          label: Text(context.tr(
              TcConstants.moduleId, TcTrKeys.kPageNo, TcTrValues.kPageNo))),
    ];
  }

  Listing<DataRow> _createRows() {
    return tmpSelectedSurvey
        .map((merchandise) => DataRow(cells: [
              DataCell(QCheckBox(
                value: item.isSelected,
                onChanged: (value) {
                  setState(
                    () {
                      if (widget.feeList == null) {
                        item.isSelected = value;
                      }
                    },
                  );
                },
              )),
              DataCell(Text(
                ' ${item.documentName}',
                textAlign: TextAlign.center,
              )),
              DataCell(Text(
                ' ${item.khasraNo}',
                textAlign: TextAlign.center,
              )),
              DataCell(Text(
                ' ${item.pageNo}',
                textAlign: TextAlign.center,
              )),
            ]))
        .toList();
  }

Getting this..

enter image description here

Wish to obtain this with ListView.Builder

enter image description here

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here