Home > Software engineering >  Flutter: Scrollable row, alignment?
Flutter: Scrollable row, alignment?

Time:07-24

I am trying to create scrollable row that does not automatically center its items.

As you can see I have a row (that is scrollable via a SingleChildScrollView). However, the items are automatically centered by the SingleChildScrollView:

row

I want to be able to customize the alignment of the items to be either on the start or end. My code looks like this:

  Widget buildHorizontalRow(List entries) {
    var list = <Widget>[];

    for (var entry in entries) {
      list.add(Text(
        entry.name,
      ));
    }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: list,
      ),
    );
  }

Note that when I remove the SingleChildScrollView completely, the items start on the left as expected. How do I make them start on the left and scrollable?


Update #1:

The parents of this row look like this:

Padding(
          padding: const EdgeInsets.only(
          left: 16.0, right: 16.0, bottom: 8.0, top: 8.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [....

PS: Also please note that I do not want to use a ListView.

CodePudding user response:

While using Column the default is crossAxisAlignment: CrossAxisAlignment.center,, using CrossAxisAlignment.start, solves the issue.

 Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [

CodePudding user response:

You can try this, it working from my side.

  Widget buildHorizontalRow(List entries) {
    var list = <Widget>[];

    for (var entry in entries) {
      list.add(Text(
        entry.name,
      ));
    }

    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [Row(children:list),Expanded(child:Container(),),]
      ),
    );
  }
  • Related