How to display a screen which contains of an Icon on top half and ListView on bottom half? - flutter

Question

I want to display a mock-up streaming screen like this:
Top half is the video player (showing the speaker), and bottom half is a ListView displaying participants/subscribers list.
Here's my code:
import 'package:flutter/material.dart';
import 'common.dart';
class StreamingView extends StatelessWidget {
// Display a Participant item
Widget getParticipantView(Participant item) {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
item.name,
style: TextStyle(fontSize: 14, color: Colors.black54),
),
),
Expanded(
child: CircleAvatar(backgroundColor: Colors.blue),
),
],
));
}
// Display the participants list on a ListView
Widget getParticipantsListView(List<Participant> participantsList){
//#override
// Widget build(BuildContext context) {
return Container (
//Expanded()
height: 40,
child: ListView.builder(
itemCount: participantsList.length,
itemBuilder: (context, index){
return getParticipantView(participantsList[index]);
}
)
);
//}
}
#override
Widget build(context) {
List<Participant> theList = [
Participant(name: "Jack", description:"Away"),
Participant(name:"Paul", description:"Available"),
Participant(name:"Clive", description:"Available"),
Participant(name:"Frank", description:"Available")
];
return Scaffold(
appBar: AppBar(),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('assets/generic_portrait.jpg'),
Expanded(
flex: 1,
child: getParticipantsListView(theList)
),
],
)),
floatingActionButton: FloatingActionButton(
onPressed: () async {
print("The button is clicked...");
},
child: Icon(Icons.video_call)));
}
}
I ran it, and the result is this:
The speaker can be seen, but the participants list isn't. Turns out there's an exception:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during performLayout(): RenderFlex
children have non-zero flex but incoming height constraints are
unbounded. When a column is in a parent that does not provide a finite
height constraint, for example if it is in a vertical scrollable, it
will try to shrink-wrap its children along the vertical axis. Setting
a flex on a child (e.g. using Expanded) indicates that the child is to
expand to fill the remaining space in the vertical direction. These
two directives are mutually exclusive. If a parent is to shrink-wrap
its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using
FlexFit.loose fits for the flexible children (using Flexible rather
than Expanded). This will allow the flexible children to size
themselves to less than the infinite remaining space they would
otherwise be forced to take, and then will cause the RenderFlex to
shrink-wrap the children rather than expanding to fit the maximum
constraints provided by the parent. ... ... The relevant error-causing
widget was: Column
file:///C:/Users/anta40/Flutter/streamingtest/streaming.dart:11:16
That refers to child: Column( inside Widget getParticipantView().
How to fix this?

Answer 1

you can use stack , the parent maybe use column after that the stack will be the first , after that use a listview which can hold all the participants

Answer 2

Have you tried using Shrink-wrap in ListView.builder and remove the container with Static height.

Answer 3

The hight is unbound because you're using Expanded widget in the column. Remove the Expanded widget that is wrapping the CircleAvatar. Here's your code:
// Display a Participant item
Widget getParticipantView(Participant item) {
return Container(
padding: EdgeInsets.all(10.0),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
item.name,
style: TextStyle(fontSize: 14, color: Colors.black54),
),
),
CircleAvatar(backgroundColor: Colors.blue),
],
));
}