I am trying to retrieve data from database ..in question contain 128 word which is showing me overflow by 533 pl...how can i resolved that ..below is my code
#
text code
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
my full code
new GestureDetector(
child: new Card(
elevation: 2.0,
margin: const EdgeInsets.all(5.0),
child:
new Stack(
alignment: Alignment.center,
children: <Widget>[
new Align(
child: new Row(
children: <Widget>[
Column(
children: <Widget>[
Text(questonnd.rate.toString()),
Stack(
children: <Widget>[
Padding(padding: EdgeInsets.all(6.0),
child: new Container(
child: Center(
child: Text("${questonnd.comment}"),
),
width: 20.0,
height: 20.0,
decoration: new BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: new AssetImage("assets/comment.png")),
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
),)
//
],
),
],
),
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 2.0,),
child:Text(questonnd.question,textAlign: TextAlign.justify,overflow: TextOverflow.fade, style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.blueGrey,),),
),
Row(
children: <Widget>[
questonnd.releventTag!=null?new Container(
decoration: new BoxDecoration(
color: Colors.greenAccent,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(6.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag2!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag2,style: TextStyle(color: Colors.white),),),
):questonnd.releventTag3!=null?new Container(
decoration: new BoxDecoration(
color: Colors.black54,
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(2.0)
),
margin: const EdgeInsets.symmetric(
horizontal: 20.0),
child: Padding(padding: EdgeInsets.all(3.0),
child: Text(questonnd.releventTag3,style: TextStyle(color: Colors.white),),),
):new Container(),
questonnd.releventTag4!=null?Row(
children: <Widget>[
Icon(Icons.message),
Text(questonnd.releventTag4.toString())
],
):new Container()
],
),
questonnd.releventTag5!=null?Padding(padding: EdgeInsets.all(2.0),
child: Row(
children: <Widget>[
Icon(Icons.remove_red_eye),
Text(questonnd.releventTag5.toString())
],
),):new Container()
],
)
],
),
alignment: Alignment.bottomCenter,
),
],
),
),
onTap: () {
Navigator.of(context).push(new MaterialPageRoute(builder: (context)=>new Fullscreenquestion(questionNd: questonnd,)));
},
);
}
}
You should try wrapping your child into a Container with a fixed width. It happened to me here: Flutter- wrapping text and while it requires some workaround to set width in a platform-independent way it also works.
Related
i got overflow when textformfield opens in showModalBottomSheet, i tried to wrap my first column widget with SingleChildScrollView but it gives me a hidden modalBottomSheet same as ListView i tried to wrap it but all the data disappeared (empty white sheet)
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
context: context,
builder: (context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Expanded(
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 22,
backgroundImage: NetworkImage(
'${SocialCubit.get(context).userModel!.image}'),
),
SizedBox(
width: 15,
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.grey[350],
),
child: Padding(
padding:
const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'${SocialCubit.get(context).userModel!.name}',
style: TextStyle(
fontSize: 15,
fontWeight:
FontWeight
.bold),
),
SizedBox(
width: 7,
),
Text(
'2 minutes ago',
style: TextStyle(
fontSize: 11),
),
],
),
SizedBox(
height: 5,
),
Text(
'whats up broo i need to ask you something'),
],
),
),
),
],
),
if (model.postImage != '')
Padding(
padding: const EdgeInsetsDirectional.only(top: 15,start: 67),
child: Container(
height: 140,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
image: DecorationImage(
image: NetworkImage('${model.postImage}'),
fit: BoxFit.cover,
),
)),
),
],
),
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context)
.viewInsets
.bottom),
child: Row(
children: [
CircleAvatar(
radius: 18,
backgroundImage: NetworkImage(
'${SocialCubit.get(context).userModel!.image}'),
),
SizedBox(
width: 15,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(30),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Write your comment ...'
),
),
),
),
),
IconButton(
onPressed: () {},
icon: Icon(IconBroken.Send)),
],
),
),
],
),
);
});
my problem (overflow)
i tried to wrap the column with ListView but i got no data as shown
this one with SingleChildScrollView,
If you like to use SingleChildScrollView, remove Expanded from Column widget, You can think like, SingleChildScrollVew provides infinite height and Exapanded widget is trying to get infinite and this cause issue.
You can follow this way
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
context: context,
builder: (context) {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Column(
children: [
Row(
children: [
// CircleAvatar(
// radius: 22,
// backgroundImage: NetworkImage(
// '${SocialCubit.get(context).userModel!.image}'),
// ),
SizedBox(
width: 15,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey[350],
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
children: [
// Text(
// '${SocialCubit.get(context).userModel!.name}',
// style: TextStyle(
// fontSize: 15,
// fontWeight:
// FontWeight
// .bold),
// ),
SizedBox(
width: 7,
),
Text(
'2 minutes ago',
style: TextStyle(fontSize: 11),
),
],
),
SizedBox(
height: 5,
),
Text(
'whats up broo i need to ask you something'),
],
),
),
),
],
),
],
),
Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Row(
children: [
SizedBox(
width: 15,
),
Expanded(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
color: Colors.grey[300],
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: TextFormField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Write your comment ...'),
),
),
),
),
],
),
),
],
),
),
);
});
Also there is DraggableScrollableSheet you may like it.
you can directly install pub library to use modal
https://pub.dev/packages/modal_bottom_sheet/install
Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
height: 100,
width: MediaQuery.of(context).size.width * 1,
color: const Color(0xFF722a8c),
child: ListView(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"COLORS ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(left: 28),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFFf44136),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: const Color(0xFF2295f6),
borderRadius: BorderRadius.circular(20),
),
),
const SizedBox(
width: 5,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color: Color(0xFF4daf52),
borderRadius: BorderRadius.circular(20),
),
),
],
),
)
],
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"CLEAR ALL ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(
children: [
Padding(
padding: EdgeInsets.only(left: 50),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.clear,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"ERASER",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
const SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 60),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: Image.asset(
'assets/icon.png',
color: Colors.white,
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"UNDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 10),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 20),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.undo,
color: Colors.white,
size: 45,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"REDO ",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 100),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
),
child: const Padding(
padding: EdgeInsets.only(left: 50),
child: Icon(
Icons.redo,
color: Colors.white,
size: 50,
),
),
),
),
]),
)
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 20),
child: Text(
"SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(right: 0),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 0),
child: Container(
height: 40,
width: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
border:
Border.all(color: Colors.white, width: 3),
),
child: const Icon(
Icons.check,
color: Colors.white,
),
),
),
],
),
),
]),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.only(top: 30),
child: Text(
"DO NOT SAVE",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
Padding(
padding: const EdgeInsets.only(
left: 28,
),
child: Row(children: [
Padding(
padding: const EdgeInsets.only(
right: 10,
),
child: Container(
child: const Text(
"Cancel",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
)),
),
]),
)
]),
]),
],
)),
);
As for inner row's children, there will different screen-size devices. While you've used Row you can make it horizontal scrollable by wrapping Row with a scrollable widget like ListView. For theses few buttons, we can use SingleChildScrollView
body: Container(
height: 100,
width: MediaQuery.of(context).size.width,
color: const Color(0xFF722a8c),
child: ListView(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal, ///make sure to use horizontal
child: Row(children: [
Column(
Also you can try Wrap, or ListView (+with builder) widgets.
Flutter i have a column i am showing widgets in this. But there is one issue that container isn't showing in full screen there is some white black space remaining.
My code
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: mainHeading(podcastInfo.trackName ?? ""),
),
//Group
Padding(
padding: const EdgeInsets.all(10.0),
child: Text(
// "Overhaul Media Group",
podcastInfo.artistName,
style: TextStyle(
fontSize: 14,
color: Color(0xFF969696),
fontFamily: "Product Sans",
),
),
),
model.loading
? Container(
height: 150,
child: Center(
child: SpinKitWave(
color: Color(0xffe7ad29),
type: SpinKitWaveType.center),
),
)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Subscribe button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: model.isSubscribed
? () {
model.unsubPodcast();
}
: () {
model.subscribePodcast();
},
child: Text(
model.isSubscribed
? "UNSUBSCRIBE"
: "SUBSCRIBE",
style: TextStyle(
color: Colors.white,
),
),
),
///
///Share Button
RaisedButton(
color: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
side: BorderSide(
color: Color(0xffe7ad29)),
),
onPressed: () {
model.sharePodcast();
},
child: Text(
"SHARE",
style: TextStyle(
color: Colors.white,
),
),
),
],
),
),
//Body text
Padding(
padding: const EdgeInsets.only(
left: 8, right: 8, bottom: 8),
child: Container(
child: Text(
// "Podcast Overhaul was created to provide you with helpful hints, tips, & strategies you need to help you get the most out of your podcast every episode...ALL in 10 minutes or less.",
model.podcast.description ?? "",
style: TextStyle(
color: Color(0xFFB0ABAB),
fontSize: 15,
fontFamily: "Sogoe UI",
),
),
),
),
///Season
Container(
decoration: BoxDecoration(
color: Color(0xffe7ad29),
borderRadius: BorderRadius.only(
topRight: Radius.circular(20),
topLeft: Radius.circular(20)),
),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
children: [
SizedBox(
height:
MediaQuery.of(context).size.height *
0.02,
),
Container(
width:
MediaQuery.of(context).size.width,
padding: EdgeInsets.only(bottom: 6),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: mainHeading("EPISODES"),
),
Column(
children: model.podcast.episodes
.map<Widget>(
(e) => Container(
width: MediaQuery.of(context)
.size
.width,
padding: EdgeInsets.only(
bottom: 6, top: 10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Color(0xFF707070),
),
),
),
child: GestureDetector(
onTap: () {
print('test');
print(podcastInfo);
print('debug');
print(e);
Navigator.pushNamed(
context,
'player',
arguments: new PlayerInfo(
item: podcastInfo,
episode: e,
),
);
},
child: mainHeading(e.title),
),
),
)
.toList(),
),
],
),
),
)
],
),
],
),
)
],
),
You can see in the screenshot its showing white empty space I try to wrap my yellow container in expanded but it's not working. I think I can sole by height but then it will scroll or some related issue will come.
Container(
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//Header Image
Container(
width: double.infinity,
height: 300,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(podcastInfo.artworkUrl600),
fit: BoxFit.fill,
),
),
child: Container(
margin: EdgeInsets.only(left: 10, top: 15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CustomAppBar(),
Spacer(),
],
),
),
),
You can wrap column in in container and give a height using media query. On overflow you can use SinglechildScrollView also.
Hello everyone i want to use a bottom navigator in product details file but I have two containers inside my row widget. I want to set my first container(which is Old Price and New Price Column) at the left, and also want to set my second container(which is Add to cart btn) at the right. how can I achieve this?
Here is code:
bottomNavigationBar: Material(
elevation: 7.0,
color: Colors.white,
child: Container(
height: 60.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width - 280.0,
decoration: BoxDecoration(
color: Color(0xfff40725),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'Add to cart',
style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Container(
child: Column(
children: <Widget>[
Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
],
),
),
),
],
),
),
),
Try this :
bottomNavigationBar: Material(
elevation: 7.0,
color: Colors.white,
child: Container(
height: 60.0,
width: MediaQuery.of(context).size.width,
color: Colors.white,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 10.0),
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width - 280.0,
decoration: BoxDecoration(
color: Color(0xfff40725),
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: Text(
'Add to cart',
style: TextStyle(color: Colors.white,fontSize: 20.0,fontWeight: FontWeight.bold),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left:8.0),
child: Container(
child: Column(
children: <Widget>[
Text("\$${widget.prod_old_price}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0,color: Color(0xff989898),decoration: TextDecoration.lineThrough),),
Text("\$${widget.prod_price}",style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold)),
],
),
),
),
],
),
),
),
Set proper mainAxisAlignment in the Row. You can refer this
I would have set it to mainAxisAlignment: MainAxisAlignment.spaceAround
I'm trying to put a horizontal line(currently Divider but could be changed as a CustomPaint) as a background of a Row. However, regardless of the order of children, the line always goes front of the Row. I can't figure out what's wrong. Here's the code.
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Ink(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
),
and here's the result image.
Use Container instead of Ink
Stack(
children: <Widget>[
Positioned.fill(
child: const Divider(color: Colors.black),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.arrow_forward, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.location_on, size: 32)
),
),
Container(
decoration: ShapeDecoration(
color: Colors.grey[350],
shape: CircleBorder(),
),
child: Padding(
padding: const EdgeInsets.all(4),
child: Icon(Icons.flag, size: 32)
),
),
],
),
],
);