Listview inside a row not working in Flutter - flutter

Question

I need a listview inside a row.
class Profiles extends StatelessWidget {
const Profiles({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
SideBar(),
Expanded(
child: ListView(
children: [
Wrap(
children: [
Padding(
padding: const EdgeInsets.only(top: 40.0, left: 45),
child: Container(
width: MediaQuery.of(context).size.width / 1.75,
decoration: BoxDecoration(
border: Border.all(color: Color(0xffEBEBEB)),
color: Color(0xfffbfbfa),
),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Positioned(
right: 0,
top: 0,
child: Align(
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () {
// Get.toNamed('/events',arguments: 0);
},
child: Padding(
padding:
const EdgeInsets.only(top: 0.0),
child: SvgPicture.asset(
allowDrawingOutsideViewBox: true,
Images.avatar,
),
)),
),
SizedBox(
width: 20,
),
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'FirstName',
textAlign: TextAlign.left,
),
SizedBox(
height: 6,
),
Text("Update your role"),
SizedBox(
height: 20,
),
Row(
children: [
Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Email',
textAlign: TextAlign.left,
),
SizedBox(
height: 10,
),
Text(
'Organization',
textAlign: TextAlign.left,
),
],
),
SizedBox(
width: 30,
),
Column(
mainAxisSize: MainAxisSize.min,
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'email',
textAlign: TextAlign.left,
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
SizedBox(
height: 10,
),
Text(
"NA",
),
],
)
],
)
],
),
],
),
],
)
],
),
),
),
],
)
],
))
],
),
);
}
}
SideBar() is a Column widget having multiple elements. Code of the sidebar is,
class SideBar extends StatefulWidget {
#override
State<SideBar> createState() => _SideBarState();
}
class _SideBarState extends State<SideBar> {
#override
Widget build(BuildContext conText) {
return Material(
elevation: 1,
child: Container(
width: 70,
color: Color(0xFAFAFB),
child: Padding(
padding: const EdgeInsets.only(top: 15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
),
SvgPicture.asset(
Images.topStoriesIcon,
)
],
),
],
),
),
),
);
}
}
I got an error: Assertion failed: constraints.hasBoundedWidth is not true.
But listview is working when I wrap with Expanded widget like this,
Row(
children: [
SideBar(),
Expanded(
child: ListView(
shrinkWrap: true,
children: [
],
),
)
],
).
But at that time I got Incorrect ParentWidget error
I tried many ways but didn't get results.
The expected result is attached below,
enter image description here

Answer 1

You can use Positioned widget as Stack child, you dont need to have on Column
child: Stack(
children: [
Positioned( // if needed put it here
top: 0,
right: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align( /// not here
alignment: Alignment.topRight,
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: Text(
"Edit",
),
),
),
Row(
mainAxisSize: MainAxisSize.min,