'What to do when listview.builder does not fit screen width in Flutter
The following is what is returned from a Flutter widget:
return Center(
child: Column(
children: [
SizedBox(
height: 250,
child: ListView.builder(
shrinkWrap: true,
itemCount: annualFinancialReportList.length,
itemBuilder: (context, index) {
FinancialReport annualReport =
annualFinancialReportList[index];
return Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
const SizedBox(width: 3),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 20,
child: Text(
"Start Date",
style: Theme.of(context)
.textTheme
.headline5,
),
),
SizedBox(
height: 20,
child: Text(
annualReport.startDate ?? "N/A",
style: Theme.of(context)
.textTheme
.headline3,
),
),
],
),
const SizedBox(width: 5),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 20,
child: Text(
"End Date",
style: Theme.of(context)
.textTheme
.headline5,
),
),
SizedBox(
height: 20,
child: Text(
annualReport.endDate ?? "N/A",
style: Theme.of(context)
.textTheme
.headline3,
),
),
],
),
const SizedBox(width: 5),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 20,
child: Text(
"Filing Date",
style: Theme.of(context)
.textTheme
.headline5,
),
),
SizedBox(
height: 20,
child: Text(
annualReport.filingDate ?? "N/A",
style: Theme.of(context)
.textTheme
.headline3,
),
),
],
),
const SizedBox(width: 5),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 20,
child: Text(
"Filing Date",
style: Theme.of(context)
.textTheme
.headline5,
),
),
SizedBox(
height: 20,
child: Text(
annualReport.filingDate ?? "N/A",
style: Theme.of(context)
.textTheme
.headline3,
),
),
],
),
const SizedBox(width: 5),
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(
height: 20,
child: Text(
"Filing Date",
style: Theme.of(context)
.textTheme
.headline5,
),
),
SizedBox(
height: 20,
child: Text(
annualReport.filingDate ?? "N/A",
style: Theme.of(context)
.textTheme
.headline3,
),
),
],
),
],
);
},
),
),
],
),
);
The list appears on the screen within the specified height by the SizedBox. The listview is vertically scrollable by default. However, the content in each Row widget in the listview does not fit the screen width. Wrapping it with a SingleChildScrollView widget is not an option because it makes each row scrollable separately. Since the content is fairly large (in horizontal axis), I want the user to be able to scroll the screen in the horizontal axis as well.
How do I solve this?
Solution 1:[1]
Can you try nesting ListView.builder within a ListView that scrolls horizontally? Something like -
Container(
height: height,
width: width,
child: ListView(
scrollDirection: Axis.horizontal,
child: Container(
height: height,
width: width,
child: ListView.builder(
scrollDirection : Axis.vertical
)
)
)
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Delwinn |