mercredi 24 novembre 2021

How to collapsed element in child widget when parent widget is resized

I have a list where tags appear side by side on a row. When I resize main window to the point where it starts hovering over the items on the list, I want to hide last item, show only the button/icon that informs that more tags have been hidden - just like in the photo - e.g. 3 dots.

fullscreen resized

Here is full code:

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

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

//My example object with json field
class MyObject {
  int id;
  String json =
      '{"year":1850,"1 name":"Zuzanna","names":"Stefania","surname":"Zabłocka","sex":"W","city":"Warsaw","date":"1850.01.02","father":"Piotr","mothers_anme":"Józefa","mothers_surname":"Wojnicz","info":"Szlachetni"}';
  MyObject(this.id);
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyTableWidget(),
        theme: ThemeData(
          primarySwatch: Colors.lightGreen,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ));
  }
}

class MyTableWidget extends StatefulWidget {
  const MyTableWidget({Key key}) : super(key: key);

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

class _MyTableWidgetState extends State<MyTableWidget> {
  MyDataTableSource _data = MyDataTableSource([]);

  List<MyObject> list = [];

  //Generating 50 same elements for testing
  getData() {
    for (int i = 0; i < 50; i++) {
      list.add(MyObject(i));
    }
    _data = MyDataTableSource(list);
  }

  @override
  Widget build(BuildContext context) {
    getData();
    return Scaffold(
        backgroundColor: Colors.white.withOpacity(0.8),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: PaginatedDataTable(
            source: _data,
            columns: [
              DataColumn(label: Container()),
              DataColumn(
                  label: ConstrainedBox(
                      constraints: BoxConstraints.expand(
                          width: MediaQuery.of(context).size.width))),
            ],
            columnSpacing: 50,
            horizontalMargin: 10,
            rowsPerPage: 50,
            showCheckboxColumn: false,
          ),
        ));
  }
}

class MyDataTableSource extends DataTableSource {
  List<MyObject> _data;
  MyDataTableSource(this._data);

  bool get isRowCountApproximate => false;
  int get rowCount => _data.length;
  int get selectedRowCount => 0;
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text("ID")),
      DataCell(
        JsonWidget(_data[index]
            .json), //  Here is my widget to convert json field - it slows all list
        // Text(_data[index].json), //  Here is simple json field for testing - it works fast
        onTap: () => {},
      ),
    ]);
  }
}

//Widget to convert json to nice looking "tags"
class JsonWidget extends StatelessWidget {
  String jdata;
  Map<String, dynamic> data;
  JsonWidget(String jdata) {
    this.jdata = jdata;
  }
  var containers = <Tooltip>[];
  @override
  Widget build(BuildContext context) {
    this.data = json.decode(this.jdata);
    data.entries.forEach((element) {
      containers.add(new Tooltip(
          message: element.key, //tag's fieldname
          textStyle: TextStyle(color: Colors.white),
          child: Container(
            margin: const EdgeInsets.all(3),
            padding: const EdgeInsets.all(4),
            child: Text(element.value.toString()), //tag's fieldvalue
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent, width: 0.7),
                borderRadius: BorderRadius.all(Radius.circular(20))),
          )));
    });
    return Row(children: this.containers);
  }
}




Aucun commentaire:

Enregistrer un commentaire