Customizing the clickable part of an ExpansionTile in Flutter

51 views Asked by At

Hello I am pretty new to Flutter and I have read the documentation for ExpansionTile but seem to be running into some difficulties as I need to customize the clicking part of the expansion tile.

In my code I am trying to make an "option" button that the user can click to show a detail of a certain item. I want the button to be 116*32 and the table of the option to be rendered to the width of the screen.

The current code that I have looks something like this

Center(
                          child: ExpansionTile(
                            title: Text("Options"),
                            controlAffinity: ListTileControlAffinity.trailing,
                            children: [
                              Container(
                                color: Color(0xFFEBEBEB),
                                child: Table(
                                  border: TableBorder.symmetric(
                                    inside: BorderSide.none,
                                    outside: BorderSide.none,
                                  ),
                                  children: [
                                    // Brand
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Brand"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['brand']),
                                        ),
                                      ],
                                    ),
                                    // Type
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Type"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['type']),
                                        ),
                                      ],
                                    ),
                                    // Condition
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Condition"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['condition']),
                                        ),
                                      ],
                                    ),
                                    // Size
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Size"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['size']),
                                        ),
                                      ],
                                    ),
                                    // Color
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Color"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['color']),
                                        ),
                                      ],
                                    ),
                                    // Material
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("Material"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text(item['material']),
                                        ),
                                      ],
                                    ),
                                    // International Shipping
                                    TableRow(
                                      children: [
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child: Text("International Shipping"),
                                        ),
                                        Padding(
                                          padding: const EdgeInsets.all(8.0),
                                          child:
                                          Text(item['internationalShipping']),
                                        ),
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),

Any sort of feedback would be much appreciated! Thank you in advance

0

There are 0 answers