Home > Mobile >  Flutter - Icon moves down when expansiontile expands
Flutter - Icon moves down when expansiontile expands

Time:06-06

There's a Row with 2 children:

  1. ExpansionTile
  2. Icon

Now when the Expansion Tile expands, why should the icon move down with it?!

                       return Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [

                       ///first child

                          Expanded(
                            flex: 85,
                            child: Column(
                              children: [
                                ExpansionTile(
                                  key: UniqueKey(),
                                  initiallyExpanded: isExpandAll,
                                  leading: ...
                                  title: Row(
                                  children: [
                                    ListView.builder(
                                      shrinkWrap: true,
                                      itemBuilder: ((context, innerListIndex) {
                                      
                                        return ListTile(
                                          leading: StatefulBuilder(
                                            builder: ...

                                        );
                                      }),
                                      itemCount: 3,
                                    ),
                                ),
                              ],
                            ),
                          ),

                          ///second child  <--- this moves down into the expanded area.
                          Expanded(
                            flex: 15,
                            child: IconButton(
                              icon: const Icon(
                                Icons.arrow,
                                color: Colors.blue,
                              ),
                              onPressed: () => () {},
                            ),
                          ),
                        ],
                      );

CodePudding user response:

Default crossAxisAlignment is center in row widget. That's why it shifts to center while ExpansionTile is on expanded.

You can use crossAxisAlignment: CrossAxisAlignment.start, to fixed at top.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.start, //this
  children: [

More about Row.

  • Related