I want this screen to be scrollable so the ExpansionTile widgets can be scrolled whether they are collapsed or not. Maybe I made a mistake that I can not find because I had something similar working on another project. Thanks in advance!
code:
@override
Widget build(BuildContext context) {
return Scaffold(
/*appBar: AppBar(actions: [IconButton(onPressed: (){Navigator.of(context).push(MaterialPageRoute(
builder: (context) => addNewCar_screen(),
));}, icon: Icon(Icons.add))],),*/
backgroundColor: Colors.blueGrey.shade100,
body: SingleChildScrollView(
child: Center(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 10,
height: 10,
),
isLoading
? Column(
children: [
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => addNewCar_screen(),
));
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Colors.grey.shade600),
),
child: Icon(Icons.add),
),
//SizedBox(width: 50,height:50,child: CircularProgressIndicator()),
],
)
: mycars.isEmpty
? Column(
children: [
Text(
'keine Autos hier, erstelle eines',
style: TextStyle(
color: Colors.black87, fontSize: 30),
),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => addNewCar_screen(),
));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey.shade600),
),
child: Icon(Icons.add),
),
],
)
: buildMyCars(),
],
),
),
),
),
);
}
This is the Widget building the expansion tiles:
Widget buildMyCars() =>
ListView(
shrinkWrap: true,
children: <Widget>[
ListView.builder(
shrinkWrap: true,
itemCount: mycars.length,
itemBuilder: (context, index) {
return ExpansionTile(
leading: SizedBox(
height: 40,
width: 40,
child: Image(
image: AssetImage('LOGOS/BMWLOGO.svg.png'),
),
),
title: Text('${mycars[index].marke}' ': ' '${mycars[index].modell}' ' (' '${mycars[index].baujahr}' ')'),
backgroundColor: Colors.transparent,
collapsedBackgroundColor: Colors.transparent,
textColor: Colors.deepOrangeAccent,
collapsedIconColor: Colors.black87,
iconColor: Colors.deepOrangeAccent,
collapsedTextColor: Colors.black87,
children: [
Text(
mycars[index].modell,
style: TextStyle(color: Colors.black87, fontSize: 25),
),
Image(
image: AssetImage('Images/250px-BMW_M5_E39_(Blue).jpg'),
),
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Daten:',
style:
TextStyle(color: Colors.black87, fontSize: 20),
),
],
),
SizedBox(
height: 2,
width: 300,
child: Container(
decoration:
BoxDecoration(color: Colors.grey.shade700),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 150,
//color: Colors.grey,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text('Marke:',
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text('Modell:',
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text('Baujahr:',
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text('Motortype:',
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text('Hubraum:',
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text('KM:',
style: TextStyle(
color: Colors.black87,
)),
]),
),
],
),
),
SizedBox(
width: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
//color: Colors.blue,
width: 150,
child: Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
Text(mycars[index].marke,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text(mycars[index].modell,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text(mycars[index].baujahr,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text(mycars[index].motor,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text(mycars[index].hubraum,
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
SizedBox(
height: 1,
width: 150,
child: Container(
decoration: BoxDecoration(
color: Colors.grey.shade700),
),
),
Text(
mycars[index].kilometer.toString(),
textAlign: TextAlign.end,
style: TextStyle(
color: Colors.black87,
)),
]),
),
],
),
),
],
),
ElevatedButton(
onPressed: () async {
await Navigator.of(context).push(MaterialPageRoute(
builder: (context) =>
CarDetail_screen(CarId: mycars[index].id!),
));
refreshMyCars();
},
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Colors.grey.shade600),
),
child: Text(
'Details',
style: TextStyle(color: Colors.deepOrangeAccent),
))
],
);
}),
ElevatedButton(
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => addNewCar_screen(),
));
},
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey.shade600),
),
child: Icon(Icons.add),
),
],
);
}
Result at the moment is:
- not scrollable
- no RenderFlex issues
CodePudding user response：
Just wrap your code inside Expanded widget like:
Scaffold(
body: Column(
children: [
Expanded(
child: //your scrolling or non-scrolling Widgets
),
],
),
)
CodePudding user response：
I think because of the shrinkWrap property in your ListView builder, it made the content fit and it's not scrollable. Can you just put your buildMyCars(), as a child, inside a SingleChildScrollView widget ?