Im very new to flutter and the dart language and I'm trying to build a dashboard with two scrollable columns (that's why I choose a ListView) side by side and each ListView should have a fixed header. Everything works fine, but every time I change something I get an "EXCEPTION CAUGHT BY RENDERING LIBRARY".
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Start first Column
Expanded(
child:ListView(
children: [
//Start Header for frist Column
Container(
width: double.infinity,
decoration: BoxDecoration( color: Colors.grey,
border: Border(
bottom: BorderSide(),
right: BorderSide(),
),
),
child: Text(
'First Column',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
fontFamily: 'Futura',
),
),
), //End Header for first Column
//Start Cards
OutlinedCardExample(),
OutlinedCardExample(),
//End LiveCards
],
),
),//End first Column
//Start second Column
Expanded(
child:ListView(
children: [
//Start Header for second Column
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.green,
border: Border(
bottom: BorderSide(),
right: BorderSide(),
),
),
child: Text(
'Second Column',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
fontFamily: 'Futura',
),
),
),//Start Header for second Column
//Start Cards
OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(), OutlinedCardExample(),
//End Cards
],
),
),//End second Column Bestellungen
],
),
),
enter image description here How can I fix the header of the Listview?
CodePudding user response:
The structure will be like
return Scaffold(
body: Row(
children: [
//Start first Column
Expanded(
child: Column(
children: [
buildHeader('First Column'),
Expanded(
child: ListView(
controller: controller1,
children: [
for (int i = 0; i < 44; i )
ListTile(
title: Text("item $i"),
)
],
),
),
],
),
),
//End first Column
You can follow this widget
class FAs4 extends StatefulWidget {
const FAs4({super.key});
@override
State<FAs4> createState() => _FAs4State();
}
class _FAs4State extends State<FAs4> {
final controller1 = ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
//Start first Column
Flexible(
flex: 1,
child: Column(
children: [
buildHeader('First Column'),
Expanded(
child: ListView(
controller: controller1,
children: [
for (int i = 0; i < 44; i )
ListTile(
title: Text("item $i"),
)
],
),
),
],
),
),
//End first Column
Flexible(
flex: 1,
child: Column(
children: [
buildHeader('Second Column'),
Expanded(
child: ListView(
children: [
for (int i = 0; i < 44; i ) Text("item $i"),
],
),
),
],
),
),
],
),
);
}
Container buildHeader(String label) {
return Container(
decoration: BoxDecoration(
color: Colors.grey,
border: Border(
bottom: BorderSide(),
right: BorderSide(),
),
),
child: Text(
label,
textAlign: TextAlign.center,
),
);
}
}