Flutter align widget in row in listview

Question

I have a listView with scrollDirection: Axis.horizontal and every item of the list is a column.

In every column there are some rows that contains various widgets.

I want to align the widgets in the row but I don't know how.

...
Expanded(
   child: ListView.separated(
      scrollDirection: Axis.horizontal,
      controller: scrollController,
      physics: BouncingScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int colIndex) {
         return Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
               Row(
                  children: [
                     Text(
                       "Some text",
                       textAlign: TextAlign.center,
                     ),
                     IconButton(
                        icon: Icon(Icons.settings_rounded),
                     ),
                  ],
               ),
               Text(
                  "Some other text",
                  textAlign: TextAlign.center,
               ),
            ],
         ),
      },
   ),
),
...

I'd like to have the Text("Some text") in the center of the row and the IconButton on the end (right) of the row.

I tried with Expanded, Align, Wrap, and other things that I found online but nothing helps me. The main problem seems to be that, due the the list not having a fixed width the row doesn't have one either, and this conflicts with the alignment tools that I tried.

Any idea?

Answer 1

You are looking for IntrinsicWidth to wrap your Column. It sizes its children to the maximum width. Then do whatewer needed in your Row. I tried a simple solution here in the code snippet, which is adding a SizedBox() as first child, and setting mainAxisAlignment: MainAxisAlignment.spaceBetween. But wrapping chlidren of the Row in Align would also work, as well as adding Spacer's. I'm sure there's more options.

ListView.separated(
     scrollDirection: Axis.horizontal,
     separatorBuilder: (_,__)=>const VerticalDivider(),
     itemCount: 10,
      itemBuilder: (BuildContext context, int colIndex) {
         return IntrinsicWidth(
            child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    const SizedBox(),
                    const Text(
                       "Some text",
                     ),
                     IconButton(
                        icon: const Icon(Icons.settings_rounded),
                       onPressed: (){},
                     ),
                  ],
               ),
               const Text(
                  "Some other text. It's longer so we can see row elements alignments",
               ),
            ],
         )
         ) ;
      },
);

Please read the IntrinsicWidth's description before using it. It's a rather heavy widget and affects performance.

Answer 2

Have you tried this?:

    ...
Expanded(
   child: ListView.separated(
      scrollDirection: Axis.horizontal,
      controller: scrollController,
      physics: BouncingScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (BuildContext context, int colIndex) {
         return Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
               Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween, // add this line
                  children: [
                     Text(
                       "Some text",
                       textAlign: TextAlign.center,
                     ),
                     IconButton(
                        icon: Icon(Icons.settings_rounded),
                     ),
                  ],
               ),
               Text(
                  "Some other text",
                  textAlign: TextAlign.center,
               ),
            ],
         ),
      },
   ),
),
...