CODEWITHSUNDEEP
flutter
Praveen Kumar
Praveen Kumar

Reputation: 1727

Flutter - Embed Expansion Panel within card widget

In flutter, I want to embed an expansion panel within a card widget as in the image. I tried to add the expansion panel within a card but it did not work out and also was not able to change the border radius of the card widget.

enter image description here

Upvotes: 1

Views: 3733

Answers (1)

Jason
Jason

Reputation: 2695

You have not really asked a question but stated two problems:

  • I tried to add the expansion panel within a card but it did not work out.
  • Was not able to change the border radius of the card widget.

I will try and address both.

Issue 1

Please could you elaborate regarding it did not work out? An expansion panel can be added to a card. As follows:

Widget build(BuildContext context) {
  return Card(
          child: ExpansionPanelList(
            children: <ExpansionPanel>[
              new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) =>
                    const Text("header data"),
                body: const Text("Body data"),
                isExpanded: false,
              ),
            ],
          ),);
}

The expansion list will display the header in this example, but will not do anything when the arrow on the right is clicked. For this to do something the containing widget must be a stateful widget. When the header is tapped, the state of isExpanded should change. This is implemented as follows:

class MyWidget extends StatefulWidget {
  MyWidgetState createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  bool isExpanded;

  @override
  void initState() {
    this.isExpanded = false;
    super.initState();
  }

  Widget build(BuildContext context) {
    return Card(child: ExpansionPanelList(
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                this.isExpanded = !isExpanded;
              });
            },
            children: <ExpansionPanel>[
              new ExpansionPanel(
                headerBuilder: (BuildContext context, bool isExpanded) =>
                    const Text("header data"),
                body: const Text("Body data"),
                isExpanded: this.isExpanded,
              ),
            ],
        );
  }
}

Please understand that this is an expandable panel ontop of a card. Both the card and the expandable panel have elevation.

Issue 2

You can change the border radius of the card as follows:

Card(shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),),
     child: child),
);

However, if the expandable panel is on top of the card, its radius will almost be square (default) and so the bottom part of the card will be square and not round. The reason is the bottom part of the card is showing the expandable panel. Remove the panel and you will see the rounded corners

Upvotes: 1

Related Questions