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
:
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(),),]
),
);
}