Flutter: Class for listview and expansionTile

Question

i am following the suggested solution from How to create Expandable ListView in Flutter as below:

void main() => runApp(new MaterialApp(home: new MyApp(), debugShowCheckedModeBanner: false,),);

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new ListView.builder(
        itemCount: vehicles.length,
        itemBuilder: (context, i) {
          return new ExpansionTile(
            title: new Text(vehicles[i].title, style: new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
            children: <Widget>[
              new Column(
                children: _buildExpandableContent(vehicles[i]),
              ),
            ],
          );
        },
      ),
    );
  }

  _buildExpandableContent(Vehicle vehicle) {
    List<Widget> columnContent = [];

    for (String content in vehicle.contents)
      columnContent.add(
        new ListTile(
          title: new Text(content, style: new TextStyle(fontSize: 18.0),),
          leading: new Icon(vehicle.icon),
        ),
      );

    return columnContent;
  }
}

class Vehicle {
  final String title;
  List<String> contents = [];
  final IconData icon;

  Vehicle(this.title, this.contents, this.icon);
}

List<Vehicle> vehicles = [
  new Vehicle(
    'Bike',
    ['Vehicle no. 1', 'Vehicle no. 2', 'Vehicle no. 7', 'Vehicle no. 10'],
    Icons.motorcycle,
  ),
  new Vehicle(
    'Cars',
    ['Vehicle no. 3', 'Vehicle no. 4', 'Vehicle no. 6'],
    Icons.directions_car,
  ),
];

How to modify the "class Vehicle" to add info like year and color? The year and color info will be use "onTap" to show/use in new screen

Thanks

score 0 · Answer 1 · answered Dec 29 '20 at 06:07

To Add year and Color to the class Modify Your Vehicle Class like below,

class Vehicle {
  final String title;
  List<String> contents = [];
  final IconData icon;
  int year;
  Color vehicleColor;

  Vehicle({this.title, this.contents, this.icon, this.year, this.vehicleColor});
}

It is good to Make your Constructor Parameters Named Parameters to avoid confusion later, or You can also make them Positional parameters.

For More Info on Named Parameters and Optional Parameters check this.

Now You Can Easily Add data to your list

List<Vehicle> vehicles = [
  new Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2018,
    vehicleColor: Colors.blue,
  ),
  new Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2019,
    vehicleColor: Colors.red,
  ),
];

And When You Want to add the data into the list then simply call this line of code, in the onTap method

  vehicles.add(Vehicle(
    title: 'Bike',
    contents: [
      'Vehicle no. 1',
      'Vehicle no. 2',
      'Vehicle no. 7',
      'Vehicle no. 10'
    ],
    icon: Icons.motorcycle,
    year: 2018,
    vehicleColor: Colors.blue,
  ));

Flutter: Class for listview and expansionTile

1 Answers1