Search code examples
listviewflutterexpandablelistview

ExpansionTile in flutter


I am trying to build an expansion tile from the data I get from backend and the data from backend looks like

var sampleresponse = [ 
   {"Total Income": 500.0},
   {"Total Expense": 1000.0},
   {"Maintenance": 500.0},
   {"Tank Water": 100.0, "truck Charges": 900.0},
];

var sampletotalIncome = sampleresponse[0];
var sampletotalExpense = sampleresponse[1];
var sampledetailIncome = sampleresponse[2];
var sampledetailExpense = sampleresponse[3];

var sampletotalIncomeKeys = sampletotalIncome.keys;
var sampletotalExpenseKeys = sampletotalExpense.keys;
var sampledetailIncomeKeys = sampledetailIncome.Keys;
var sampledetailExpenseKeys = sampledetailExpense.keys;

var sampletotalIncomevalue = sampletotalIncome.value;
var sampletotalExpensevalue = sampletotalExpense.value;
var sampledetailIncomevalue = sampledetailIncome.value;
var sampledetailExpensevalue= sampledetailExpense.value;

//sampletotalIncomeKeys is [Total Income] 
//sampletotalIncomevalue is [500.0] 
//sampletotalExpenseKeys is [Total Expense] 
//sampletotalExpensevalue is [1000.0] 
//sampledetailIncomeKeys is [Maintanence] 
//sampledetailIncomevalue is [500.0] 
//sampledetailExpenseKeys is [Tank Water, truck Charges] 
//sampledetailedExpensevalue is [100.0, 900.0]

where "Maintenance":500.0 should be placed under "Total Income" and the "Total Expense" should contain the "Tank Water" and "truck Charges". Here is my code:

Snippet from ExpansionTile.dart:

import 'package:flutter/material.dart';

class StuffInTiles extends StatelessWidget {
final MyTile myTile;

StuffInTiles(this.myTile);

@override
Widget build(BuildContext context) {
  return _buildTiles(myTile);
}

Widget _buildTiles(MyTile t) {
  if (t.children.isEmpty)
    return new ListTile(
      title: new Text(
        t.title,
        style: new TextStyle(color: Colors.white),
      ),
      trailing: new Text(
        t.value,
        style: new TextStyle(color: Colors.white),
      ),
    );
  return new ExpansionTile(
    key: new PageStorageKey<MyTile>(t),
    title: new Text(
      t.title,
      style: new TextStyle(color: Colors.white),
    ),
    trailing: new Text(
      t.value,
      style: new TextStyle(color: Colors.white),
    ),
    children: t.children.map(_buildTiles).toList(),
  );
}

}

class MyTile {
 final String title;
 final String value;
 final List<MyTile> children;

 MyTile(this.title, this.value, [this.children = const <MyTile>[]]);

}

}

Snippet from Main.dart:

List<MyTile> itemList = <MyTile>[

          new MyTile(
            sampletotalIncomeKeys.toString(),
            sampletotalIncomevalue.toString(),
            sampledetailIncomeKeys
                .map(
                  (items) => new 
            MyTile(sampledetailIncomeKeys.toString(),
                      sampledetailIncomevalue.toString()),
                )
                .toList(),
          ),
          new MyTile(
            sampletotalExpenseKeys.toString(),
            sampletotalExpensevalue.toString(),
            sampledetailedExpense.map((items, value) => 
            MyTile(items.toString(), value.toString()).toString(),
              ).toString()

          ),
        ];

 ...........
new Expanded(
   child: new ListView.builder(
     itemBuilder: (BuildContext context, int index) {
       return new StuffInTiles(itemList[index]);
     },
   itemCount: itemList.length,
  ),

)

With this I am getting an error as

"The argument type "String" cannot be assigned to parameter type List. I am not understanding this. Can some please help me with the logic for this?

Thank you!


Solution

  • Your code is wrong on this part:

        List<MyTile> itemList = <MyTile>[
    
                  new MyTile(
                    sampletotalIncomeKeys.toString(),
                    sampletotalIncomevalue.toString(),
                    sampledetailIncomeKeys
                        .map(
                          (items) => new 
                    MyTile(sampledetailIncomeKeys.toString(),
                              sampledetailIncomevalue.toString()),
                        )
                        .toList(),
                  ),
                  new MyTile(
                    sampletotalExpenseKeys.toString(),
                    sampletotalExpensevalue.toString(),
                    sampledetailedExpense.map((items, value) => 
                    MyTile(items.toString(), value.toString()).toString(),
                      ).toString()
    
                  ),
                ];
    

    The last parameter of your second object is wrong, it should be a List not a String, replace by this code:

              List<MyTile> itemList = <MyTile>[
                new MyTile(
                  sampletotalIncomeKeys.toString(),
                  sampletotalIncomevalue.toString(),
                  sampledetailIncomeKeys
                      .map(
                        (items) => new MyTile(sampledetailIncomeKeys.toString(),
                            sampledetailIncomevalue.toString()),
                      )
                      .toList(),
                ),
                new MyTile(
                sampletotalExpenseKeys.toString(),
                sampletotalExpensevalue.toString(),
                sampledetailedExpense.keys
                    .map(
                      (key) =>
                          MyTile(key, sampledetailedExpense[key].toString()),
                    )
                    .toList()),
             ];
            }