Issue
Basically, I'm trying to replicate a UI design for a video call screen and I want to
to know how I can make the photos to appear by default
for example, this is the screen I have for one person call only
Currently i can reach the UI Layout i want by after launching the multiple participants screen, scrolling down and it will go under the AppBar
body.dart Code:
final List<String> images = const [
"assets/images/girl 1.jpg",
"assets/images/girl 2.jpg",
"assets/images/boy 2.jpg",
"assets/images/boy 1.jpg",
];
Body({
Key key,
this.isMultipleParticipants = false,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: [
if (!isMultipleParticipants)
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/girl 1.jpg"),
fit: BoxFit.cover,
),
),
),
if (isMultipleParticipants)
LayoutBuilder(
builder: (context, constraint) {
return new GridView.builder(
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: constraint.maxWidth / constraint.maxHeight,
),
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(images[index]),
fit: BoxFit.cover,
),
),
);
},
);
},
),
if (!isMultipleParticipants) buildOwnVideo(),
buildBottomButtons(),
],
);
}
call_screen.dart Code:
class CallScreen extends StatefulWidget {
@override
State<CallScreen> createState() => _CallScreenState();
}
class _CallScreenState extends State<CallScreen> {
bool _isMultiParticipant = false;
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: buildAppBar(),
body: Body(
isMultipleParticipants: _isMultiParticipant,
),
);
}
AppBar buildAppBar() {
return AppBar(
backgroundColor: Color(0x22000000),
elevation: 0,
title:
Text("Kristin Watson" + (_isMultiParticipant ? " and 4 others" : "")),
actions: [
IconButton(
icon: Icon(_isMultiParticipant
? Icons.person_remove_alt_1_outlined
: Icons.person_add_alt_1_outlined),
onPressed: () {
_toggleMode();
},
)
],
);
}
void _toggleMode() {
setState(() {
_isMultiParticipant = !_isMultiParticipant;
});
}
}
Solution
I found a solution while I was messing around which works for me, I added padding of EdgeInsets.zero
and it fixed my problem.
This is the final code for the method to build widget related to multiple people:
Widget buildMultiplePhotos() {
return LayoutBuilder(
builder: (context, constraint) {
return new GridView.builder(
padding: EdgeInsets.zero,
itemCount: 4,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: constraint.maxWidth / constraint.maxHeight,
),
physics: NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(images[index]),
fit: BoxFit.cover,
),
),
);
},
);
},
);
}
Answered By - Ahmad Abbas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.