Following up on the previous article, build the comments for the details page and the related article page
Problems encountered
The construction of the interface is relatively simple, the important thing is how to nest, the previous article used to load the details of the content markdown, looked at the source of flutter_markdown library, found such a code
@override
Widget build(BuildContext context, List<Widget> children) {
return ListView(
padding: padding,
controller: controller,
physics: physics,
shrinkWrap: shrinkWrap,
children: children,
);
}
Copy the codeThe ListView component is nested inside the ListView component, so you want to add content below the list, involving the ListView component. The biggest problem is sliding collisions. The powerful Flutter also has a solution for us. The child ListView component controls do not slide.
physics: NeverScrollableScrollPhysics()
Copy the codeFollowed by the shrinkWrap property: This property indicates whether the length of the ListView is set based on the total length of the child components. The default is false. By default, the ListView takes up as much space as possible in the scrolling direction. ShrinkWrap must be true when the ListView is in a container with no boundaries (scroll direction)
shrinkWrap: true.Copy the codeThis allows you to add these two attributes to the Markdown component and nest them using the previously encapsulated Common_list
Markdown(
key: listGlobalKey,
data: _markdownData,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
);
Expanded(
child: CommonListWiget(
scrollController: _scrollController,
networkApi: (currentPage) async {
return ['1'.'2'.'3'];
},
itemBuilder: (BuildContext context, int position) {
if (position == 0) {
return this.renderContent();
}
return Container(
height: 200, width: Get.width, decoration: BoxDecoration(color: Colors.red)); },))Copy the codeThat’s it. Implement ListView using ListView infinite height problem
Related article construction
renderArts() {
return Container(
width: Get.width,
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: [
Container(
height: 40,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
child: Text('Related Articles'),
),
Divider(
height: 1,
color: Colors.grey,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Step by step Complete Flutter App Development - Nuggets App Article details, Levitation, Title animation'),
Padding(padding: EdgeInsets.only(top: 10)),
Text(
'14 likes ·5 comments One morning ',
style: TextStyle(color: Colors.grey, fontSize: 12() [[() [[() [() [() [() [() }Copy the codeComment list building
It is divided into three parts to realize the basic information of the layout, comment content and reply content
renderComment() {
return Container(
width: Get.width,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
decoration: BoxDecoration(color: Colors.white),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Row(
children: [
Container(
margin: EdgeInsets.only(right: 10),
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(20),
)),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'One morning',
style: TextStyle(color: Colors.blue),
),
Container(
margin: EdgeInsets.only(left: 5),
padding: EdgeInsets.symmetric(
horizontal: 2, vertical: 2),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(4)),
child: Text(
'LV2',
style:
TextStyle(color: Colors.white, fontSize: 10),
),
)
],
),
Text('Big Front-end Development ·20 hours ago',
style: TextStyle(color: Colors.grey, fontSize: 10))
],
),
),
Container(
alignment: Alignment.topCenter,
width: 80,
height: 40.// decoration: BoxDecoration(color: Colors.red),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.ac_unit,
size: 18,
color: Colors.grey,
),
Icon(Icons.ac_unit, size: 18, color: Colors.grey)
],
),
),
],
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 10),
padding: EdgeInsets.only(left: 50),
child: Text('What are the comments about?',
style: TextStyle(color: Colors.black, fontSize: 14)),
),
Container(
margin: EdgeInsets.only(top: 10, bottom: 10, left: 50),
padding: EdgeInsets.symmetric(horizontal: 10),
width: Get.width - 50,
decoration: BoxDecoration(color: Colors.black.withOpacity(0.1)),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(padding: EdgeInsets.only(top: 5)),
RichText(
text: TextSpan(
text: 'One Morning (author)',
style: TextStyle(color: Colors.blue),
children: [
TextSpan(
text: ': ha ha ha ha ha ha ha',
style: TextStyle(color: Colors.black)),
])),
Padding(padding: EdgeInsets.only(top: 10)),
RichText(
text: TextSpan(
text: 'One Morning (author)',
style: TextStyle(color: Colors.blue),
children: [
TextSpan(
text: 'reply', style: TextStyle(color: Colors.black)),
TextSpan(
text: 'Who? Who?', style: TextStyle(color: Colors.blue)),
TextSpan(
text: ': ha ha ha ha ha ha ha',
style: TextStyle(color: Colors.black)),
])),
Padding(padding: EdgeInsets.only(top: 5() [() [() [() [() [() }Copy the codeover~~~