Related
'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()
],
),
),
);
// );
}
}
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
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'),
],
),
),
)
],
);
},
),
),
],
);
}
}
I'm trying to make a chat app UI, and thought of using TextOverflow to fix the problem where the last sent message exceedes the size of the screen and causes Render Overflow. So I simply modified my Text widget, adding these 3 lines-
Text(
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
However, this made no difference-
Here's the code-
Main ListView-
import 'package:project_name/widgets/chat_preview_tile_widget.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileCard extends StatefulWidget {
const ChatPreviewTileCard({Key? key}) : super(key: key);
#override
_ChatPreviewTileCardState createState() => _ChatPreviewTileCardState();
}
class _ChatPreviewTileCardState extends State<ChatPreviewTileCard> {
#override
Widget build(BuildContext context) {
return Expanded(
child: ListView.builder(
itemCount: 10,
itemBuilder: (context, n) {
//Individual List Tile
return const ChatPreviewTileWidget(
username: "Person",
imageUrl:
"https://www.nme.com/wp-content/uploads/2021/07/RickAstley2021.jpg",
time: "9:30PM",
hasUnreadMessage: true,
lastMessage:
"i am susssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssSSSSSSSSSSs",
);
},
),
);
}
}
Individual Tile Widget-
import 'package:airing/screens/chat_screen/user_chat/user_chat_screen.dart';
import 'package:airing/utils/color_themes.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileWidget extends StatefulWidget {
final String username;
final String imageUrl;
final String time;
final bool hasUnreadMessage;
final String lastMessage;
const ChatPreviewTileWidget({
Key? key,
required this.username,
required this.imageUrl,
required this.time,
required this.hasUnreadMessage,
required this.lastMessage,
}) : super(key: key);
#override
_ChatPreviewTileWidgetState createState() => _ChatPreviewTileWidgetState();
}
class _ChatPreviewTileWidgetState extends State<ChatPreviewTileWidget> {
static int widgetsInScreen = 12;
static int pfpPadding = 10;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return UserChatScreen(
imageUrl: widget.imageUrl, username: widget.username);
},
),
);
},
child: Column(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height / widgetsInScreen,
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2.5),
//main row
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Pfp, username and last message row
Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: secondaryColor,
backgroundImage: NetworkImage(
widget.imageUrl,
),
radius: ((MediaQuery.of(context).size.height /
widgetsInScreen) -
(2 * pfpPadding)) /
2,
),
Padding(
padding: const EdgeInsets.only(
left: 10,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryMainThemeColor),
),
Text( //Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),
)
],
),
//sent and notification Column
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
widget.time,
style: TextStyle(
color: secondaryMainThemeColor,
fontWeight: FontWeight.w200),
),
Icon(
Icons.circle_rounded,
color: mainThemeColor,
size: 15,
)
],
)
],
),
),
const Divider()
],
));
}
}
How do I fix this? Thanks in advance!
Wrap your Text Column with Expanded widget like this:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold, color: secondaryMainThemeColor),
),
Text(
//Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),
),
Hope It Works!
Change your code to this:
import 'package:airing/screens/chat_screen/user_chat/user_chat_screen.dart';
import 'package:airing/utils/color_themes.dart';
import 'package:flutter/material.dart';
class ChatPreviewTileWidget extends StatefulWidget {
final String username;
final String imageUrl;
final String time;
final bool hasUnreadMessage;
final String lastMessage;
const ChatPreviewTileWidget({
Key? key,
required this.username,
required this.imageUrl,
required this.time,
required this.hasUnreadMessage,
required this.lastMessage,
}) : super(key: key);
#override
_ChatPreviewTileWidgetState createState() => _ChatPreviewTileWidgetState();
}
class _ChatPreviewTileWidgetState extends State<ChatPreviewTileWidget> {
static int widgetsInScreen = 12;
static int pfpPadding = 10;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return UserChatScreen(
imageUrl: widget.imageUrl, username: widget.username);
},
),
);
},
child: Column(
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height / widgetsInScreen,
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2.5),
//main row
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//Pfp, username and last message row
Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(
backgroundColor: secondaryColor,
backgroundImage: NetworkImage(
widget.imageUrl,
),
radius: ((MediaQuery.of(context).size.height /
widgetsInScreen) -
(2 * pfpPadding)) /
2,
),
**//here is the changes**
Expanded(child: Padding(
padding: const EdgeInsets.only(
left: 10,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.username,
style: TextStyle(
fontWeight: FontWeight.bold,
color: secondaryMainThemeColor),
),
Text( //Here is the text message widget.
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
)
],
),),
)
],
),
//sent and notification Column
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
widget.time,
style: TextStyle(
color: secondaryMainThemeColor,
fontWeight: FontWeight.w200),
),
Icon(
Icons.circle_rounded,
color: mainThemeColor,
size: 15,
)
],
)
],
),
),
const Divider()
],
));
}
}
Nevermind! Wrapping my text widget with a SizedBox with a defined width fixed it-
SizedBox(
width: MediaQuery.of(context).size.width / 2,
child: Text(
widget.lastMessage,
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: true,
style: const TextStyle(
fontWeight: FontWeight.w200,
),
),
),
I've created an expansiontile and I've changed the original trailing icon to an svg icon which I customized. Anytime I click the expansion tile... everything works but the new svg trailing icon doesnt spin like the original trailing icon. Please how do I fix this?
code below
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
class ExpansionTileCard extends StatelessWidget {
final String toptitle;
final List<Widget> children;
const ExpansionTileCard({Key key, this.toptitle, this.children})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
decoration: new BoxDecoration(
border:
new Border(bottom: new BorderSide(color: Colors.green))),
child: new Row(
children: [
new Expanded(
flex: 9,
child: new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ExpansionTile(
title: Text(
toptitle,
style: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 19,
fontWeight: FontWeight.bold),
),
children: children,
childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
iconColor: Colors.green,
trailing: SvgPicture.asset(
'assets/icons/textmessage.svg',
height: 30,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
While we don't provide trailing on ExpansionTile it uses the default behavior of it.
We are passing a widget into trailing and we need to control it. In order to do that, we need to check if ExpansionTile is expanded or not, the onExpansionChanged call back will provide this value. To handle animation we can use many widgets like Transform, RotatedBox, AnimatedRotation... In this ExpansionTileCard widget will be extended from StatefulWidget .
Steps
convert to StatefulWidget
create a bool inside state class to check the Expanded-state.
bool _isExpanded = false;
change value on onExpansionChanged
onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},
assign your widget on trailing by wrapping animation widget or just check the state return two widget
_isExpanded? ExpandedWidget:NormalViewWidget()
trailing: AnimatedRotation( /// you can use different widget for animation
turns: _isExpanded ? .5 : 0,
duration: Duration(seconds: 1),
child: CustomWidget()// your svgImage here
),
Widget State
class _ExpansionTileCardState extends State<ExpansionTileCard> {
bool _isExpanded = false;
#override
Widget build(BuildContext context) {
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: Colors.green))),
child: Row(
children: [
Expanded(
flex: 9,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ExpansionTile(
onExpansionChanged: (value) {
setState(() {
_isExpanded = value;
});
},
title: Text(
widget.toptitle,
style: TextStyle(
color: Colors.black,
letterSpacing: -1,
fontSize: 19,
fontWeight: FontWeight.bold),
),
children: widget.children,
childrenPadding: EdgeInsets.fromLTRB(0, 0, 0, 20),
iconColor: Colors.green,
trailing: AnimatedRotation(
turns: _isExpanded ? .5 : 0,
duration: Duration(seconds: 1),
child: SvgPicture.asset(
'assets/icons/textmessage.svg',
height: 30,
),
),
],
),
),
)
],
),
),
],
),
);
}
}
I want to use Marquee Where is my Text Widget.
When I am using marquee by removing text widget After using marquee then my text is disappearing and getting more error in console.
so please help me to use marquee.
import 'package:flutter/material.dart';
import 'package:hospital/CartIcon/cart_icon.dart';
import 'package:hospital/Drawer/dropdown_menu.dart';
import 'package:hospital/MyOrderPage/MyOrderDetailsViewPage/myOrderDetailsView.dart';
import 'package:hospital/constant.dart';
import 'package:intl/intl.dart';
import 'package:marquee/marquee.dart';
class MyOrderPage extends StatefulWidget {
const MyOrderPage({Key key}) : super(key: key);
#override
_MyOrderPageState createState() => _MyOrderPageState();
}
class _MyOrderPageState extends State<MyOrderPage> {
// final DateTime orderDate = DateTime.now();
final DateTime orderDate = DateTime.now();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kGreen,
title: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"My Order",
style: TextStyle(fontStyle: FontStyle.italic),
),
],
),
actions: [CartIcon(), DropDownMenu()],
),
body: Column(
children: [
Container(
// height: 200,
padding: EdgeInsets.all(8),
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Theme.of(context).primaryColor.withOpacity(0.3),
blurRadius: 8,
)
],
borderRadius: BorderRadius.circular(8),
color: Colors.white,
),
child: Padding(
padding: EdgeInsets.all(15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Flexible(
//I want to use marquee user instead of text widget here
//Marquee(
// text: 'GeeksforGeeks is a one-stop destination for programmers.',
// style: TextStyle(fontWeight: FontWeight.bold),
//scrollAxis: Axis.horizontal,
// crossAxisAlignment: CrossAxisAlignment.start,
// blankSpace: 20.0,
// velocity: 100.0,
// pauseAfterRound: Duration(seconds: 1),
//showFadingOnlyWhenScrolling: true,
// fadingEdgeStartFraction: 0.1,
// fadingEdgeEndFraction: 0.1,
// numberOfRounds: 3,
//startPadding: 10.0,
// accelerationDuration: Duration(seconds: 1),
// accelerationCurve: Curves.linear,
// decelerationDuration: Duration(milliseconds: 500),
// decelerationCurve: Curves.easeOut,
//)
child: Text(
'Spondylolysis,Pittasnadhanak,D_stone,Natural Tulsi',
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
],
),
SizedBox(
height: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text('20-07-2021',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
],
),
SizedBox(
height: 6,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Delivery Status',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Text('Delivered',
style: Theme.of(context)
.textTheme
.headline6
.copyWith(color: Colors.green)),
],
)
],
),
SizedBox(
height: 4,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Text('Quantity: ',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Padding(
padding: const EdgeInsets.only(left: 4),
child: Text('3',
style: TextStyle(
color: Colors.black,
// fontWeight: FontWeight.bold,
fontSize: 18)),
),
],
),
Row(
children: <Widget>[
Text('Totat Amount: ',
style: TextStyle(
color: Colors.black54,
// fontWeight: FontWeight.bold,
fontSize: 20)),
Padding(
padding: const EdgeInsets.only(left: 15),
child: Text('324' + '\$',
//total amount
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20)),
),
],
)
],
)
],
),
),
)),
SizedBox(
height: 5,
),
],
),
);
}
}
I want to use Marquee Where is my Text Widget.
When I am using marquee by removing text widget After using marquee then my text is disappearing and getting more error in console.
class MarqueeWidget extends StatefulWidget {
final Widget child;
final Axis direction;
final Duration animationDuration, backDuration, pauseDuration;
MarqueeWidget({
#required this.child,
this.direction: Axis.horizontal,
this.animationDuration: const Duration(milliseconds: 3000),
this.backDuration: const Duration(milliseconds: 800),
this.pauseDuration: const Duration(milliseconds: 800),
});
#override
_MarqueeWidgetState createState() => _MarqueeWidgetState();
}
class _MarqueeWidgetState extends State<MarqueeWidget> {
ScrollController scrollController;
#override
void initState() {
scrollController = ScrollController(initialScrollOffset: 50.0);
WidgetsBinding.instance.addPostFrameCallback(scroll);
super.initState();
}
#override
void dispose(){
scrollController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: widget.child,
scrollDirection: widget.direction,
controller: scrollController,
);
}
void scroll(_) async {
while (scrollController.hasClients) {
await Future.delayed(widget.pauseDuration);
if(scrollController.hasClients)
await scrollController.animateTo(
scrollController.position.maxScrollExtent,
duration: widget.animationDuration,
curve: Curves.ease);
await Future.delayed(widget.pauseDuration);
if(scrollController.hasClients)
await scrollController.animateTo(0.0,
duration: widget.backDuration, curve: Curves.easeOut);
}
}
}
class MarqueeText extends StatefulWidget {
#override
_MarqueeTextState createState() => _MarqueeTextState();
}
class _MarqueeTextState extends State<MarqueeText> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Marquee Text"),
),
body: Center(
child: SizedBox(
width: 200.0,
child: MarqueeWidget(
direction: Axis.horizontal,
child: Text(
"your text"))),
));
}
}
I am developing this UI in flutter (1st attached picture). Fetching chips from DB and dynamically creating their list. When rendering them on the UI, I am getting overflowed error (2nd attached picture). I want chips to move to the next line if there is no space available. Following is my code:
Container(
padding: EdgeInsets.only(left: 5.0, right: 5.00),
child: Card(
elevation: 4,
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.only(
top: 10.0, bottom: 10.00, left: 10.0, right: 10.00),
child: Column(children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
child: Text('Every Month',
style: TextStyle(
fontSize: 14,
color: Color(0xFF0d1b41),
fontFamily: 'Poppins',
fontWeight: FontWeight.bold)),
),
new Container(
child: Text('Every 28th of month',
style: TextStyle(
fontSize: 12,
color: Color(0xFFb1b1b1),
fontFamily: 'Poppins',
fontWeight: FontWeight.bold)),
),
],
),
Column(
children: <Widget>[
new Container(
padding: EdgeInsets.only(
bottom: 20.0,
),
child: Text('Scheduled',
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 12,
color: Color(0xFFfbb450),
fontFamily: 'Poppins',
fontStyle: FontStyle.italic,
)),
),
],
),
],
),
SizedBox(height: 10),
Divider(
color: Colors.grey[500],
thickness: 1.0,
),
Row(children: <Widget>[
Column(
children: <Widget>[
new Container(
width: 60,
height: 70,
padding: EdgeInsets.only(
top: 10.0,
bottom: 40.00,
left: 10.0,
right: 8.00),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
image: DecorationImage(
image: new NetworkImage(
'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80'),
fit: BoxFit.fill,
),
),
),
],
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
width: 220,
child: new Text(
"Coca Cola Zero",
style: new TextStyle(
fontSize: 18.0,
color: Color(0xff8c8c8c),
fontWeight: FontWeight.bold,
fontFamily: 'Poppins'),
textAlign: TextAlign.left,
),
)
],
),
SizedBox(height: 10.0),
generateTags(tagList),
SizedBox(height: 10.0),
]),
]),
])),
],
),
));
static Widget generateTags(List<String> productTagList) {
tagList = productTagList;
return Wrap(
children: tagWidgets.toList(),
);
}
Kindly guide me to create this UI
not exact... but you can modify ...
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
// This makes the visual density adapt to the platform that you run
// the app on. For desktop platforms, the controls will be smaller and
// closer together (more dense) than on mobile platforms.
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var list1 = ["abc", "sdf", "ags", "qwe","eded","ecc","fef","g4g","wev"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Row(
children: <Widget>[imgWidget(), content()],
),
],
));
}
imgWidget() {
return Container(
height: 40.0,
width: 40.0,
color: Colors.amber,
);
}
content() {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[_title(), _chips(), _actionBtns()],
);
}
_title() {
return Text("CocaCola Zero");
}
_chips() {
return Container(
width: MediaQuery.of(context).size.width-50,
child: Wrap(
children: list1.map((String e) => Chip(label: Text(e))).toList(),
),
);
}
_actionBtns() {
return Row(
children: <Widget>[
_customBTN(icon: Icons.edit, btnName: "Edit", onTap: () {}),
_customBTN(icon: Icons.delete, btnName: "Delete", onTap: () {})
],
);
}
_customBTN({Function onTap, String btnName, IconData icon}) {
return MaterialButton(
child: Row(
children: <Widget>[
Icon(icon),
Text(btnName),
],
),
onPressed: onTap);
}
}
Please use wrap your chips Wrap widget.
class MultiSelectChip extends StatefulWidget {
final List<String> reportList;
final Function(List<String>) onSelectionChanged; // +added
MultiSelectChip(
this.reportList,
{this.onSelectionChanged} // +added
);
#override
_MultiSelectChipState createState() => _MultiSelectChipState();
}
class _MultiSelectChipState extends State<MultiSelectChip> {
// String selectedChoice = "";
List<String> selectedChoices = List();
_buildChoiceList() {
List<Widget> choices = List();
widget.reportList.forEach((item) {
choices.add(Container(
padding: const EdgeInsets.all(2.0),
child: ChoiceChip(
label: Text(item),
selected: selectedChoices.contains(item),
onSelected: (selected) {
setState(() {
selectedChoices.contains(item)
? selectedChoices.remove(item)
: selectedChoices.add(item);
widget.onSelectionChanged(selectedChoices); // +added
});
},
),
));
});
return choices;
}
#override
Widget build(BuildContext context) {
return Wrap(
children: _buildChoiceList(),
);
}
}