Issue
In my app, i am trying to create a comments section. In this section, i want a user to be able to reply to another user’s comment in a fashion akin to the YouTube app. I have managed to create a modal bottom sheet showing the top level comments and it is working quite well, withthe aid of several stream builders. However, the problem im facing is the second level comments (replies to people’s comments.). I want to make it so that user taps on a comment and is taken to a page (still in the modal bottom sheet) where he sees all replies to the comment and can also comment on his own, and if he presses back, he goes right back to where he was and can continue scrolling through the top level comments.
Akin to how the YouTube app looks.
I had the idea of using Navigator.push inside the bottom sheet, to overlay a new page on top of the currently existing page in the modal bottom sheet and in this new page, the second level comments (replies) for a particular comment are to be displayed. But, when i call Navigator.push, the entire page changes. The whole parent page shifts to the new page, instead of just the stuff in the bottom sheet. So, that’s my problem. I’m open to ideas.
the code behind my comment bottom sheet:
showModalBottomSheet(
context: context,
builder: (context) {
return
Container(
child: StatefulBuilder(
builder: (BuildContext context, setTheModalState) {
setModalState = setTheModalState;
return Container(
child: Column(
children: <Widget>[
Expanded(
child: StreamBuilder(listview))])}))}
This is what i have designed so far. The tricky bit now is making a new page in the modal sheet on press of the reply button (the message icon)
This is what a YouTube comment system looks like.
The code for the comment section:
showModalBottomSheet(
context: context,
builder: (context) {
return
Container(
child: StatefulBuilder(
builder: (BuildContext context, setTheModalState) {
setModalState = setTheModalState;
return Container(
child: Column(
children: <Widget>[
Expanded(
child: StreamBuilder(
stream: Firestore.instance
.collection("Replies")
.document(dream.documentID)
.collection(dream.documentID)
.orderBy('time', descending: true)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: SpinKitDoubleBounce(
color: Colors.blue,
),
);
} else {
dynamic replies = snapshot.data.documents;
return ListView.builder(
itemCount: replies.length,
reverse: true,
itemBuilder: (context, index) {
if (replies[index]["text"] != "" &&
replies[index]["images"] == null) {
return _buildStringCommment(
replies[index], true);
} else {
if (replies[index]["images"].length == 1) {
return _buildCommentFromOneImage(
replies[index], true);
} else {
if (replies[index]["images"].length == 2) {
return _buildCommentFromTwoImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
3) {
return _buildCommentFromThreeImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
4) {
return _buildCommentFromFourImages(
replies[index], true);
} else {
if (replies[index]["images"].length ==
5) {
return _buildCommmentFromFiveImages(
replies[index], true);
} else {
return _buildMessageFromMoreThanFiveImages(
replies[index], true);
}
}
}
}
}
}
},
);
}
},
),
),
theTypeReplyThingie(dream, context, true)
],
),
);
},
),
);
},
);
"the type reply thingie" is the widget that has the text input form and the send button.
Solution
hi there i think you need navigation inside the bottomsheet as it happens in normal pages one way you can proceed is by using the below code just test out this code once i hope it will work thanks.
call the openbottomsheet whenever you need to open the sheet
void opensheet() async {
showModalBottomSheet(
context: (context),
enableDrag: true,
isDismissible: true,
builder: (context) {
return Page1();
});
}
}
class Page1 extends StatefulWidget {
@override
_Page1State createState() => _Page1State();
}
class _Page1State extends State<Page1> {
int currentview = 0;
List<Widget> pages;
@override
void initState() {
pages = [
page1(),
page2(),
];
super.initState();
}
@override
Widget build(BuildContext context) {
return pages[currentview];
}
Widget page1() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: InkWell(
onTap: () {
setState(() {
currentview = 1;
});
},
child: RaisedButton(
child: Text("click to navigate"),
),
),
),
);
}
Widget page2() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(60), topLeft: Radius.circular(60))),
height: 400,
width: double.maxFinite,
child: Center(
child: InkWell(
onTap: () {
setState(() {
currentview = 0;
});
},
child: Text("click to move back"),
),
),
);
}
}
to control the back button on your parent page in which bottom sheet lies enclose the scaffold with willpopscope
willpopscope(
onwillpopscope:(){
//check if bottomsheet is open or not this may be hard to listen the state of bottomsheet let me try it
if(bottomsheetisopen){
//set the bottomsheet currentindex to 0 for initial page
return Future.value(false);
}else{
return Future.value(true);
}
}
child:Scaffold()
)
try both bottomsheet and modalbottom sheet one of them provide a listener to listen the state of sheet weather it is open or closed
Answered By – Azad Prajapat
Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)