Nikita
Nikita

Reputation: 765

How to change header when opening an ExpansionPanel flutter

Good evening ),

so I have an ExpansionPanelList inside an ExpansionTile. I want that the header changes, when a Panel of the ExpansionPanelList is opened, but how do I do that?

return ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: isExpanded == null?
                    Text('No position found') //code if above statement is true
                        :Text("N"),
                  );
                },

I figured out that I need something like this, but the checked condition has to be wrong, because when I open a ExpansionPanel in the ExpansionPanelList part, nothing happens.

So all in all my structure is like this:

ExpansionTile -ExpansionPanelList -ExpansionPanel

and Im wondering how can I find out weather the ExpansionPanel in the ExpansionPanelList is open & when I have this info I should be able to simply pass it in into the condition

If you want to recreate: (line 55 begins the code that I posted above)

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          child: ExpansionTile(
            title: Text("Generelles Vorgehen"),
            children: [ExpansionList()],
          ),
        ),
      ),
    );
  }
}

class ExpansionList extends StatefulWidget {
  final Info info;
  const ExpansionList({
    Key key,
    this.info,
  }) : super(key: key);
  @override
  _ExpansionListState createState() => _ExpansionListState();
}

class _ExpansionListState extends State<ExpansionList> {
  Widget _buildListPanel() {
    return ExpansionPanelList(
      expansionCallback: (int index, bool isExpanded) {
        setState(() {
          infos[index].isExpanded = !isExpanded;
        });
      },
      children: infos.map<ExpansionPanel>((Info info) {
        return ExpansionPanel(
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                title: isExpanded == null?
                Text('No position found') //code if above statement is true
                    :Text("N"),
              );
            },
                body:ListView.builder(
                    shrinkWrap: true,
                    itemCount: info.expandedValueData.length,
                    itemBuilder: (context, index) {
                      return CheckboxListTile(
                          title: Text(info.expandedValueData[index].title,
                              style: TextStyle(
                                  decoration:
                                      info.expandedValueData[index].completed
                                          ? TextDecoration.lineThrough
                                          : null)),
                          value: info.expandedValueData[index].completed,
                          onChanged: (value) {
                            setState(() {
// Here you toggle the checked item state
                              infos.firstWhere(
                                  (currentInfo) => info == currentInfo)
                                ..expandedValueData[index].completed = value;
                            });
                          });
                    }),
            isExpanded: info.isExpanded);
      }).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildListPanel(),
      ),
    );
  }
}

class expandedValue {
  int id;
  String title;
  bool completed;

  expandedValue({
    this.id,
    this.title,
    this.completed = false,
  });
}

class Info {
  String headerValue;
  bool isExpanded;
  final List<expandedValue> expandedValueData;

  Info({this.headerValue, this.isExpanded = false, this.expandedValueData});
}

List<Info> infos = [
  Info(
    headerValue: "Außenansicht",
    expandedValueData: <expandedValue>[
      expandedValue(id: 1,  title: "Roststellen"),
      expandedValue(
          id: 2,

          title:
              "Farbunterschiede im Lack, Unregelmäßigkeiten [Problemstellen übermalt]"),
      expandedValue(
          id: 3,
          title: "kleine Kratzer [hinter Karosserie größere Folgeschäden?]"),
      expandedValue(
          id: 4,
          title: "Dichtungen an Scheiben & Türen [porös, rissig]"),
      expandedValue(
          id: 5,
          title:
              "Vorallem Windschutzscheibe auf Kratzer untersuchen [Gefahr größerer Rissbildung ]"),
      expandedValue(
          id: 6,
          title:
              "Lampen untersuchen, funktionsfähig? Innen beschlagene Scheinwerfer [Gefahr durch Wasserschaden]"),
      expandedValue(
          id: 7,
          title: "Reifen [Risse o. abgefahrenes Profil?]"),
    ],
  ),
  Info(
    headerValue: "Innenraum",
    expandedValueData: <expandedValue>[
      expandedValue(
          id: 1,
          title: "klappern Türen oder deren Seitenverkleidung beim Schließen?"),
      expandedValue(id: 2,  title: "funktionierende Elektrik"),
      expandedValue(id: 3,  title: "Sitze"),
      expandedValue(id: 4, title: "Rest"),
    ],
  ),
  Info(
    headerValue: "Motorraum",
    expandedValueData: <expandedValue>[
      expandedValue(
          id: 1,
          title:
              "Motor schon vom Verkäufer warmgelaufen? [eventuell sollen Startprobleme vertuscht werden]"),
      expandedValue(
          id: 2,
          title: "Batteriepole angerostet? [Gefahr vorzeitiger Entladung]"),
      expandedValue(
          id: 3,
          title: "Gibt es Öl oder Bremsflüssigkeitsspuren an:"),
      expandedValue(
          id: 4,
          title:
              "Sprudelt Kühlswasser bei laufendem Motor [eventuell Zylinderkopfdichtung defekt]"),
      expandedValue(id: 5, title: "Ölstand prüfen"),
    ],
  ),
  Info(
    headerValue: "Unterboden",
    expandedValueData: <expandedValue>[
      expandedValue(id: 1, title: "Roststellen?"),
      expandedValue(
          id: 2,
          title:
              "neuer Unterbodenschutz? [möglicher Versuch Problemstellen zu verdecken (z.B Schweißnähte etc.)]"),
      expandedValue(
          id: 3,
          title: "sitzt der Auspuff fest, arbeitet der Motor leise?"),
    ],
  ),
  Info(
    headerValue: "Dokumenten- & Zahlencheck",
    expandedValueData: <expandedValue>[
      expandedValue(
          id: 1, title: "Reperaturenabrechnungen vorhanden?"),
      expandedValue(
          id: 2,
          title:
              "macht Laufleistung Sinn? Mögliche Lufleistungen im Bereich von über 150 000 km, wenn:"),
      expandedValue(
          id: 3,  title: "Zulassungsbescheinigung Teil 1&2 "),
      expandedValue(id: 4,  title: "Wartungen & Rechnungen"),
    ],
  ),
  Info(
    headerValue: "Probefahrt",
    expandedValueData: <expandedValue>[
      expandedValue(id: 1,  title: "vor der Fahrt:"),
      expandedValue(id: 2,  title: "bei der Fahrt"),
      expandedValue(id: 3,  title: "nach der Fahrt"),
    ],
  ),
  Info(
    headerValue: "Garantie, Gewehrleistung und Vertrag ",
    expandedValueData: <expandedValue>[
      expandedValue(
          id: 1,
          title:
              "auf Rechmäßigkeit prüfen, wegen Haftungsgründen verweisen wir hier auf andere Seiten, wie die der Allianz oder Cosmosdirekt o. ä. "),
    ],
  ),
];

Upvotes: 0

Views: 619

Answers (1)

Tirth Patel
Tirth Patel

Reputation: 5726

Instead of isExpanded == null use !isExpanded in the ternary condition.

Upvotes: 1

Related Questions