Himanshu Flutter
Reputation: 11
how to show multiple comment_tree: ^0.3.0 in flutter , I want to show multiple comment in comment page Pleas help me
'here is comment widget i want to show this multiple comment widget in comment page and i also trying to lot of trying to put this comment widget in listview when i put this widget in listview my screeen is not rendered. but when i put this in gridview it is showing all comment properly plese help me'
import 'package:comment_tree/comment_tree.dart';
import 'package:comment_tree/widgets/comment_tree_widget.dart';
import 'package:ecllipsenew/data/repository/post_repo.dart';
import 'package:ecllipsenew/provider/PostProvider.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';
import '../../../../util/app_constants.dart';
class Comments extends StatefulWidget {
final List<Comment> commentList;
Comments({this.commentList});
@override
State<Comments> createState() => _CommentsState();
}
class _CommentsState extends State<Comments> {
bool reply = false;
final List<Comment> commentLi = [
Comment(
avatar: 'nukkll',
userName: 'njjull',
content: 'I mkk interested',
),
Comment(
avatar: 'null',
userName: 'null',
content: 'I mjjj interested',
),
];
@override
Widget build(BuildContext context) {
return Column(
children: [
Expanded(
child: Container(
child: CommentTreeWidget<Comment, Comment>(
commentLi[0],
[
commentLi[0],
commentLi[1],
],
treeThemeData:
TreeThemeData(lineColor: Colors.blue, lineWidth: 3),
avatarRoot: (context, data) => const PreferredSize(
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(AppConstants.User_Url)),
preferredSize: Size.fromRadius(18),
),
avatarChild: (context, data) => const PreferredSize(
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(AppConstants.User_Url)),
preferredSize: Size.fromRadius(12),
),
contentChild: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${data.userName}',
style: Theme.of(context)
.textTheme
.caption
?.copyWith(
fontWeight: FontWeight.w600,
color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'${data.content}',
style: Theme.of(context)
.textTheme
.caption
?.copyWith(
fontWeight: FontWeight.w300,
color: Colors.black),
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: EdgeInsets.only(top: 4),
child: Row(
children: [
SizedBox(
width: 8,
),
Text('5d'),
SizedBox(
width: 8,
),
Text('Like'),
SizedBox(
width: 24,
),
Text('Reply'),
],
),
),
)
],
);
},
contentRoot: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Tina Chuhan',
style: Theme.of(context).textTheme.caption.copyWith(
fontWeight: FontWeight.w600,
color: Colors.black),
),
SizedBox(
height: 4,
),
Text(
'${data.content}',
style: Theme.of(context).textTheme.caption.copyWith(
fontWeight: FontWeight.w300,
color: Colors.black),
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: EdgeInsets.only(top: 4),
child: Row(
children: const [
SizedBox(
width: 8,
),
Text('5d'),
SizedBox(
width: 8,
),
Text('Like'),
SizedBox(
width: 24,
),
Text('Reply'),
],
),
),
)
],
);
},
),
padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
),
),
],
);
// }
// );
// });
}
}
and here is my comment show page
import 'package:comment_tree/comment_tree.dart';
import 'package:ecllipsenew/screen/home/pages/comment/Comments.dart';
import 'package:ecllipsenew/screen/home/pages/comment/new_message.dart';
import 'package:ecllipsenew/util/app_constants.dart';
import 'package:flutter/material.dart';
class CommentPage extends StatefulWidget {
static const routeName = '/Comment_Page';
const CommentPage({Key key}) : super(key: key);
@override
State<CommentPage> createState() => _CommentPageState();
}
class _CommentPageState extends State<CommentPage> {
// final List<Comments> commentList = [
// Comments(
// commentId: "3",
// commentUserId: "11",
// commentUserName: "Himanshu",
// commentUserProfileImage: AppConstants.User_Url,
// commentType: "text",
// commentFile: "jjjj",
// commentDate: "12/12/12",
// commentTime: "12:30",
// commentReacts: "hhh",
// letestReplys: "jjjj")
// ];
final List<Comment> commentLi = [
Comment(
avatar: 'null',
userName: 'null',
content: 'I m interested',
),
Comment(
avatar: 'null',
userName: 'null',
content: 'I m interested',
),
];
@override
Widget build(BuildContext context) {
return
// Scaffold(
// appBar: AppBar(
// title: Text("Comment"),
// ),
// body:
SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
//when I add this line my screen is not rendered
for (int i = 0; i < 3; i++) Comments(commentList: commentLi),
Expanded(
child: Comments(commentList: commentLi),
),
NewMessage()
],
),
),
);
// );
}
}
Upvotes: 0
Views: 1346
Answers (2)
Saurab Ghimire
Reputation: 61
Please find full code as you have asked for in previous answer. Still, I recommend you to know the basic of flutter-layout to understand working with Expanded widget before using this code.
import 'package:flutter/material.dart';
import 'package:test/view.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const CommentPage());
}
}
Comments page code
import 'package:comment_tree/comment_tree.dart';
import 'package:flutter/material.dart'; import 'package:test/test.dart';
class CommentPage extends StatefulWidget {
static const routeName = '/Comment_Page';
const CommentPage({Key? key}) : super(key: key);
@override
State<CommentPage> createState() => _CommentPageState();
}
class _CommentPageState extends State<CommentPage> {
// final List<Comments> commentList = [
// Comments(
// commentId: "3",
// commentUserId: "11",
// commentUserName: "Himanshu",
// commentUserProfileImage: AppConstants.User_Url,
// commentType: "text",
// commentFile: "jjjj",
// commentDate: "12/12/12",
// commentTime: "12:30",
// commentReacts: "hhh",
// letestReplys: "jjjj")
// ];
final List<Comment> commentLi = [
Comment(
avatar: 'null',
userName: 'null',
content: 'I m interested',
),
Comment(
avatar: 'null',
userName: 'null',
content: 'I m interested',
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Comment"),
),
body: SingleChildScrollView(
child: Container(
child: Column(
children: <Widget>[
for (int i = 0; i < 3; i++) Comments(commentList: commentLi),
// Comments(commentList: commentLi),
// NewMessage()
],
),
),
),
);
// );
}
}
Comments tree page
import 'package:comment_tree/comment_tree.dart';
import 'package:flutter/material.dart';
class Comments extends StatefulWidget {
final List<Comment> commentList;
const Comments({Key? key, required this.commentList}) : super(key: key);
@override
State<Comments> createState() => _CommentsState();
}
class _CommentsState extends State<Comments> {
bool reply = false;
final List<Comment> commentLi = [
Comment(
avatar: 'nukkll',
userName: 'njjull',
content: 'I mkk interested',
),
Comment(
avatar: 'null',
userName: 'null',
content: 'I mjjj interested',
),
];
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
child: CommentTreeWidget<Comment, Comment>(
commentLi[0],
[
commentLi[0],
commentLi[1],
],
treeThemeData:
const TreeThemeData(lineColor: Colors.blue, lineWidth: 3),
avatarRoot: (context, data) => const PreferredSize(
preferredSize: Size.fromRadius(18),
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(
"https://i.pinimg.com/736x/6f/de/85/6fde85b86c86526af5e99ce85f57432e.jpg")),
),
avatarChild: (context, data) => const PreferredSize(
preferredSize: Size.fromRadius(12),
child: CircleAvatar(
radius: 12,
backgroundColor: Colors.grey,
backgroundImage: NetworkImage(
"https://i.pinimg.com/736x/6f/de/85/6fde85b86c86526af5e99ce85f57432e.jpg")),
),
contentChild: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${data.userName}',
style: Theme.of(context).textTheme.caption?.copyWith(
fontWeight: FontWeight.w600, color: Colors.black),
),
const SizedBox(
height: 4,
),
Text(
'${data.content}',
style: Theme.of(context).textTheme.caption?.copyWith(
fontWeight: FontWeight.w300, color: Colors.black),
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption!.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: const [
SizedBox(
width: 8,
),
Text('5d'),
SizedBox(
width: 8,
),
Text('Like'),
SizedBox(
width: 24,
),
Text('Reply'),
],
),
),
)
],
);
},
contentRoot: (context, data) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding:
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(12)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Tina Chuhan',
style: Theme.of(context).textTheme.caption!.copyWith(
fontWeight: FontWeight.w600, color: Colors.black),
),
const SizedBox(
height: 4,
),
Text(
'${data.content}',
style: Theme.of(context).textTheme.caption!.copyWith(
fontWeight: FontWeight.w300, color: Colors.black),
),
],
),
),
DefaultTextStyle(
style: Theme.of(context).textTheme.caption!.copyWith(
color: Colors.grey[700], fontWeight: FontWeight.bold),
child: Padding(
padding: const EdgeInsets.only(top: 4),
child: Row(
children: const [
SizedBox(
width: 8,
),
Text('5d'),
SizedBox(
width: 8,
),
Text('Like'),
SizedBox(
width: 24,
),
Text('Reply'),
],
),
),
)
],
);
},
),
),
],
);
}
}
Upvotes: 0
Saurab Ghimire
Reputation: 61
The main cause of render error is using Expanded widget inside Column, without having a fixed height for that Column.
If you want to use Expanded widget inside Column, you should wrap the column with a sizedbox and give it a fixed height as shown below:
SizedBox(
height: MediaQuery.of(context).size.height * 0.8,
child: Column(
children: [
Text('Header'),
Expanded(
child: Container(
child: Center(
child: Text('I take the remaining space'),
),
),
)
],
)
I could render the same code by removing the Expanded widgets wherever you have used them. They seem unnecessary too.
Screenshot of commentPage by removing Expanded widget everywhere
Upvotes: 0
Related Questions
- Flutter expandable list tree
- How to add code reference in comments line in android studio?
- How to create Tree View Layout in Flutter?
- how to modify flutter_tree package for select all children?
- How to link to another methods in dart comments
- How to create facebook like comment structure in flutter?
- The argument type 'CommentBox' can't be assigned to the parameter type 'Widget'
- How to create a bottom comment widget in Flutter?
- Comment Box as Facebook in flutter
- Overflowing comment text not in alignment