Develop Reference

How to dynamic height set horizontal list view and grid view in flutter?

/*Grid layout*/
Container(
height: 225.h,
width: double.infinity,
padding: EdgeInsets.zero,
child: GridView.builder(
scrollDirection: Axis.horizontal,
primary: false,
shrinkWrap: true,
padding: EdgeInsets.only(left: 16.w,top: 8.h,right: 16.w),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 0.5,
mainAxisSpacing: 16.0,
crossAxisSpacing: 0.0),
itemCount: drConsultationModelList.length,
itemBuilder: (context, i) {
return Container(
width: 210.w,
margin: EdgeInsets.only(bottom: 15.h),
padding: EdgeInsets.only(left: 16.w,bottom: 10.h,right: 20.h,top: 10.h),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.r),
color: Colors.white,
boxShadow: [
BoxShadow(
color:
Color(0x14000000),
offset: const Offset(
0.0,
4.0,
),
blurRadius: 14.0,
spreadRadius: 0.0,
), //BoxShadow
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(drConsultationModelList[i].tvTitle,style: TextStyle(fontFamily: fontInterSemibold,fontSize: 15.sp,color: blackes_1a1b25),),
SizedBox(height: 6.h,),
Text(drConsultationModelList[i].tvSubTitle,style: TextStyle(fontFamily: fontInterRegular,fontSize: 11.sp,color: dark_silver_6a7382),)
],
),
),
Stack(
alignment: Alignment.center,
children: [
Container(
height: 50.h,width: 50.w,
decoration: BoxDecoration(
color: Color(0xffe7f5f0),
borderRadius: BorderRadius.circular(8.r),
),
),
SvgPicture.asset(drConsultationModelList[i].imgLogo,width: 34.w,height: 34.h,fit: BoxFit.fill,),
],
)
],
),
);
},
),
),
I used container fixed height but I am trying to set dynamic height so please give me proper suggestion.
Now the problem is that, to show layout in listview I have to pass fixed height in sizebox. If I remove height then layout will be gone. So, How do I display item layout without giving fixed height in sizebox.
Fixed height problem issued when we increased device default font size. So, cant fixed layout height. Plz give solution, Thanks in advance

How to remove text overflow while using text in column in flutter

I am using a row, inside it, each text is a column and I want that whenever my text overflows, it should automatically go to next line, I tried everything, but it won't work. When I tried to use expanded or flexible, it gave error. I tried to make maxlines 2 and then use expanded/flexible, I also gave it a container as a parent widget and made it's height big enough, still error.
Here is the code snippet -
class RouteItems extends StatelessWidget {
final int index;
final NodeElement data;
RouteItems({required this.index, required this.data});
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
SvgPicture.asset(
'assets/icons/road-straight-line-top-view.svg',
height: 15,
width: 80,
),
SvgPicture.asset(
filterRoutesIcon("${data.node?.type}"),
height: 30,
width: 30,
),
SvgPicture.asset(
'assets/icons/road-straight-line-top-view.svg',
height: 15,
width: 80,
),
],
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Container(
//height: 60,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
Text(
data.eta!.getFormattedDate('hh:mm a, d MMM'),
style: TextStyle(fontSize: 10.0, color: colorDarkGrey),
)
],
),
),
),
],
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.timer,
),
),
],
);
}
}

This Row can be removed, what is the purpose of it ?
Row(
children: [
Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
)
You can try removing the maxLines: 1, and adding width constraints to your Text e.g wrapping it with a SizedBox, this way the text will wrap to the next line :
SizedBox(
width: 200,
child: Text(
'${data.node?.name}',
style: TextStyle(fontSize: 12.0),
),
)

Try below code hope its helpful to you. Just wrap your Text widget inside Expanded of Flexible
Refer Expanded here
Refer Flexible here
Or
Try to add your Inside Row widgets wrap it with Expanded or Flexible refer my answer here or here or here hope its helpful to you
Row(
children: [
Expanded(
child: Text(
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}{data.node?.name}{data.node?.name}'
'{data.node?.name}{data.node?.name}',
style: TextStyle(fontSize: 12.0),
),
),
],
),
Your result Screen->

Try wrapping the text you want to not overflow in a Flexible() widget. That will make sure it doesn't take up more space in the row than is available.

You can also add or replace width paramater of SizedBox widget with
width: MediaQuery.of(context).size.width,
to constraint the Text child to the device screen width.

You can try this aproach
Expanded(
Row(
children: [
Card(
child: Text(" My awseome no overflow text"),),
..Other Widgets
]
),
);

Stack Widget Error when using SingleChildScrollView

I have this code as profile screen which I need it to be able to fill a text like "HELLO" on this code example. But when I put a lot of text in it, the screen become overflow.
The problem is everytime I put SingleChildScrollView to avoid the overflow, I got another error instead.
Please tell me how I can fix this problem.
#override
Widget build(BuildContext context) {
return Container(
child: SafeArea(
child: FutureBuilder<Profile>(
future: dataService.getHttp(),
builder: ...
),
),
);
}
Widget _buildView(detail) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Column(
children: <Widget>[
Container(
height: 200.0,
child: Center(
child: Image.network(
'https://i.imgur.com/2F3Al82.jpg',
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
),
Expanded(
child: Container(
color: Colors.white,
child: Column(
children: <Widget>[
Text('HELLO'),
]
),
)
),
],
),
Positioned(
top: 150.0,
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: new DecorationImage(
fit: BoxFit.fill,
image: NetworkImage('https://i.imgur.com/2F3Al82.jpg'),
),
),
),
)
],
);
}
this is the error

You are getting this error because of the Expanded widget. SingleChildScrollView allows for infinite height and expanded will take up as much space as it can these two thing are incompatible if you remove the Expanded widget it should work. If you want some space around that container I suggest the Containers margin property.

TextOverflow in Row which is inside a Column in Flutter

I'm trying to develop a Card with some text widget beneath it. Look at the image below.
The problem I'm facing is when the text next to location icon is large, it overflows. I've tried with Flex, but it throws an exception. There's also a star icon at the right bottom of the card.
Here's what I want :
I want the text to be single line ending with .. if it's too long.
star should be placed at the bottom right
The location icon doesn't consider the left padding I gave (Padding widget)
Please help! Thanks in advance.
Here's my code :
Scaffold buildOffersList(OfferModel offerModel) {
return Scaffold(
body: Stack(
children: <Widget>[
Center(
child: Image.network(
'https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg',
fit: BoxFit.cover,
width: size.width,
height: size.height,
color: Colors.black.withOpacity(.6),
colorBlendMode: BlendMode.darken
),
),
Column(
children: <Widget>[
Container(
child: PageHeader(pageTitle: 'Popular Offers', numberOfOffers: '20 venues', sortByText: 'Sort By: Location', filterText: 'Filter'),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 5.0,
crossAxisSpacing: 5.0,
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
children: List.generate(offerModel.payload.offers.length, (index) {
return Center(
child: offerCard3(offerModel.payload.offers[index]),
);
}),
),
),
],
),
],
)
);
}
Widget offerCard3(Offer offer) {
return GestureDetector(
child: Card(
elevation: 1.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(
aspectRatio: 18.0 / 8.0,
child: Image.network(
"https://b.zmtcdn.com/data/pictures/2/19250332/0fe23bee17b60d181fd43421ca3480d4_featured_v2.jpg",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.fromLTRB(7.0, 5.0, 4.0, 5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
getBrandName(offer),
getOfferTitle(offer),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
getLocationIcon(),
getOfferContactAddressView(offer),
],
),
getKmText(),
],
),
//Spacer(),
getStarIcon(),
],
),
],
),
),
],
),
),
);
}
Text getOfferContactAddressView(Offer offer) {
return Text(
offer.offerContactAddress,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.black38,
fontSize: 9.0,
),
);
}
Icon getStarIcon() {
return Icon(
Icons.star,
color: Colors.orange,
size: 25,
);
}

There is a flutter package for auto resize text to contain the full text.
auto_size_text 2.1.0 here

FIrst Solution Highly Recommend
First of all, you can use Listtile.
ListTile(title: Text("ListTile"),
subtitle: Text("Sample Subtitle. \nSubtitle line 3"),
trailing: Icon(Icons.home),
leading: Icon(Icons.add_box),
isThreeLine: true,
)
Second Solution
SizedBox(
width: 500,
child: new Text(
'Text largeeeeeeeeeeeeeeeeeeeeeee',
//Overflow: TextOverflow.ellipsis will make you large text end with ....
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontSize: 13.0,
),
),
),

I think you have to use like below code:-
Expanded(
child: Wrap(
direction: Axis.horizontal,
runAlignment: WrapAlignment.start,
children: <Widget>[
getOfferContactAddressView(offer),
],
),
flex: 1,
),

It happens because the Text Widget doesn't know how big the width of the Row.
Please try this code out DartPad to help you find where you went wrong with your code. I still believe, wrapping the Text Widget with Expanded and give overflow property will give what you want right away.
Here's the SS of it:

Placing text in the center of a CircularProgressIndicator

I'm trying to place a text countdown timer in the center of a CircularProgressIndicator. This is the code for the layout of the body:
return new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Stack(
children: <Widget>[
Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: value,
),
),
Align(
alignment: FractionalOffset.center,
child: Text("Test")
)
],
),
...
],
);
Adding the Align() widget changes the layout from this:
to this:
I've also tried
Align(
alignment: Alignment.center,
child: Text("Test")
)
and
Center(
child: Text("Test"),
)
instead of the Align() widget, but they all produce the same result

That's because your Stack doesn't have size, so to fix your issue, wrap your Stack inside SizedBox, set a height, and Center the Text.
Column(
children: <Widget>[
SizedBox(
height: 200.0,
child: Stack(
children: <Widget>[
Center(
child: Container(
width: 200,
height: 200,
child: new CircularProgressIndicator(
strokeWidth: 15,
value: 1.0,
),
),
),
Center(child: Text("Test")),
],
),
),
],
)

Use Positioned They are meant to be used with Stacks.
As per documentation:
A Positioned widget must be a descendant of a Stack, and the path from the Positioned widget to its enclosing Stack must contain only StatelessWidgets or StatefulWidgets (not other kinds of widgets, like RenderObjectWidgets).
Also, don't forget to wrap your Stack inside a Container or Center so as to put constraints to the box.

Column(
children: <Widget>[
SizedBox(
height: 40,
child: Stack(
children: <Widget>[
Container(
width: 40,
height: 40,
child:
new CircularProgressIndicator(
value: 10,
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
top: 15,
child: Text(
bytesDownload!,
textAlign:
TextAlign.center,
style: TextStyle(
fontSize: 10,
),
)),
],
),
),
],
)

Just Wrap it inside a SizedBox()
https://i.stack.imgur.com/fJfaL.png