is it possible to using InkWell in CustomScrollView in flutter - flutter

When I am embedded InkWell in CustomScrollView like this:
child: SizedBox(
height: 500.0,
child: CustomScrollView(slivers: <Widget>[
InkWell(
onTap: () => {},
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
child: Text(
item.subName == "" ? "Comment" : item.subName,
style: Theme.of(context).textTheme.headline5.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
sliver: viewService.buildComponent("articlelist"),
)
]),
),
),
shows this error:
======== Exception caught by widgets library =======================================================
'package:flutter/src/widgets/framework.dart': Failed assertion: line 4345 pos 14: 'owner._debugCurrentBuildTarget == this': is not true.
The relevant error-causing widget was:
CustomScrollView file:///Users/dolphin/Documents/GitHub/cruise-open/lib/src/page/channel/channeldetail_component/view.dart:96:24
====================================================================================================
should I use InkWell in CustomScrollView? CustomScrollView could only use sliver component? what should I do to fix it?

Try wrapping InkWell in SliverToBoxAdapter

Related

Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on the bottom

I am need to create to Material Widget per row, but when i create it i wanted to add padding when i do so for the column the yellow error appears with this error:
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
Another exception was thrown: A RenderFlex overflowed by 4.1 pixels on
the bottom.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:134:25
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-1305
The overflowing RenderFlex has an orientation of Axis.horizontal. The
edge of the RenderFlex that is overflowing has been marked in the
rendering with a yellow and black striped pattern. This is usually
caused by the contents being too big for the RenderFlex. Consider
applying a flex factor (e.g. using an Expanded widget) to force the
children of the RenderFlex to fit within the available space instead
of being sized to their natural size. This is considered an error
condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space,
consider clipping it with a ClipRect widget before putting it in the
flex, or using a scrollable container rather than a Flex, like a
ListView. The specific RenderFlex in question is: RenderFlex#164c6
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Semantics ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#020b0 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom. Another exception was thrown: A RenderFlex overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Another exception
was thrown: A RenderFlex overflowed by 0.200 pixels on the right.
Another exception was thrown: A RenderFlex overflowed by 12 pixels
on the bottom. Another exception was thrown: A RenderFlex
overflowed by
0.200 pixels on the right. Another exception was thrown: A RenderFlex overflowed by 12 pixels on the bottom. Performing hot
reload... Reloaded 1 of 1166 libraries in 4,534ms. Performing hot
reload... Reloaded 1 of 1166 libraries in 3,199ms. ══╡ EXCEPTION
CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 0.200 pixels on the right. The relevant error-causing widget was:
Row
Row:file:///E:/work/nabaa_mobile-main/lib/ui/screens/home/widgets/bottom_home_page/home.dart:140:27
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:9101/#/inspector?uri=http%3A%2F%2F127.0.0.1%3A56940%2FUjrL2FntShg%3D%2F&inspectorRef=inspector-2705
The overflowing RenderFlex has an orientation of Axis.horizontal. The
edge of the RenderFlex that is overflowing has been marked in the
rendering with a yellow and black striped pattern. This is usually
caused by the contents being too big for the RenderFlex. Consider
applying a flex factor (e.g. using an Expanded widget) to force the
children of the RenderFlex to fit within the available space instead
of being sized to their natural size. This is considered an error
condition because it indicates that there is content that cannot be
seen. If the content is legitimately bigger than the available space,
consider clipping it with a ClipRect widget before putting it in the
flex, or using a scrollable container rather than a Flex, like a
ListView. The specific RenderFlex in question is: RenderFlex#4f67e
relayoutBoundary=up1 OVERFLOWING: creator: Row ← Column ← Padding ←
DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#c9285 ink renderer] ← NotificationListener ← CustomPaint ←
_ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← ⋯ parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use
size) constraints: BoxConstraints(0.0<=w<=135.2, 0.0<=h<=Infinity)
size: Size(135.2, 40.0) direction: horizontal mainAxisAlignment:
start mainAxisSize: max crossAxisAlignment: center textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: A RenderFlex overflowed by 12 pixels on
the bottom.
========================================================================
the code is
GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4.w,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: whiteColor,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: blackColor.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: blackColor,
child: ClipOval(
child:
Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4.w),
child: Text(
"company_name".tr,
// textAlign: TextAlign.end,
style: Get.textTheme.headline3!
.copyWith(color: faddenGreyColor),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3.h,
child: Text(
"opportunity_title".tr,
style: Get.textTheme.headline4,
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: faddenGreyColor,
size: 13.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"date".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: faddenGreyColor,
size: 15.sp,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2.w),
child: Text(
"location".tr,
style: Get.textTheme.headline3!.copyWith(
color: faddenGreyColor,
),
),
),
],
),
SizedBox(height: 2.h),
],
),
);
}),
),
-> Use Can Use For This Code SingleChildScrollView
import 'package:flutter/material.dart';
class Data extends StatefulWidget {
const Data({Key? key}) : super(key: key);
#override
_DataState createState() => _DataState();
}
class _DataState extends State<Data> {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: GridView.count(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
color: Colors.white,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
shadowColor: Colors.black.withOpacity(0.5),
child: Column(
children: [
Row(
children: [
CircleAvatar(
foregroundColor: Colors.black,
child: ClipOval(
child: Image.asset('assets/images/meta-logo.png'),
),
),
Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
style: TextStyle(),
),
),
],
),
Align(
alignment: AlignmentDirectional.centerStart,
child: Text(
"opportunity_title",
style: TextStyle(),
),
),
Row(
children: [
Icon(
Icons.calendar_today_outlined,
color: Colors.red,
size: 13,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
Row(
children: [
Icon(
Icons.location_on_outlined,
color: Colors.red,
size: 15,
),
Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
style: TextStyle(),
),
),
],
),
SizedBox(height: 2),
],
),
);
}),
),
);
}
}
Expanded all your widget in Column
GridView.count(
shrinkWrap: true,
physics: const ScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 4,
scrollDirection: Axis.vertical,
crossAxisSpacing: 4,
// padding: EdgeInsets.all(9),
children: List.generate(4, (index) {
return Material(
// padding: const EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
// side: ,
borderRadius: BorderRadius.circular(18.0),
),
type: MaterialType.button,
elevation: 5,
// clipBehavior: Clip.antiAliasWithSaveLayer,
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: CircleAvatar(
child: ClipOval(
child: Image.asset('images/profile.png'),
),
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 4),
child: Text(
"company_name",
// textAlign: TextAlign.end,
),
),
),
],
),
),
Expanded(
child: Align(
alignment: AlignmentDirectional.centerStart,
heightFactor: 0.3,
child: Text(
"opportunity_title",
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.calendar_today_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"date",
),
),
),
],
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Icon(
Icons.location_on_outlined,
),
),
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(start: 2),
child: Text(
"location",
),
),
),
],
),
),
],
),
),
);
}),
),
output:

Unlimited vertical space

Hi I'm working on a project that requires a ListView builder sadly when ever I try to put in that ListView builder this the error I get:
════════ Exception caught by rendering library ═════════════════════════════════
Vertical viewport was given unbounded height.
The relevant error-causing widget was
ListView
lib\screens\questionScreen.dart:50
════════════════════════════════════════════════════════════════════════════════
════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderViewport#18955 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1940 pos 12: 'hasSize'
here is my code:
Scaffold(
body: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 20,
padding: EdgeInsets.fromLTRB(20, 120, 20, 50),
child: Column(
children: [
Text(
questions[question.getListNumber()].soru,
style: TextStyle(fontSize: 40),
),
ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: Colors.white,
);
},
),
],
),
));
just set shrinkWrap: true property and wrap the ListView.builder with an Expanded, it will solve everything, or if you have any fixed size for the ListView.builder wrap in a SizedBox/Container with the fixed size.
You are giving infinite space to an unbounded widget. Your ListView is inside of the Column should be wrapped with a finite space widget such as container.
Scaffold(
body: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width - 20,
padding: EdgeInsets.fromLTRB(20, 120, 20, 50),
child: Column(
children: [
Text(
questions[question.getListNumber()].soru,
style: TextStyle(fontSize: 40),
),
Container(
child: ListView.builder(
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return ListTile(
tileColor: Colors.white,
);
},
),
),
],
),
));

Flutter bottom Overflow

Can anyone help me with this exception that I keep running into? I am not sure what attempt next in order to fix the overflow as the panel expands. I've tried wrapping it into a flexible widget but that doesn't seem to fix the issue.
Here is my exception:
════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 68 pixels on the bottom.
The relevant error-causing widget was:
Column file:///Users/selorm/AndroidStudioProjects/flutter_master/lib/src/widgets/weather_widget.dart:17:14
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.
The specific RenderFlex in question is: RenderFlex#8829e relayoutBoundary=up1 OVERFLOWING
... needs compositing
... parentData: offset=Offset(0.0, 0.0) (can use size)
... constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=410.6)
... size: Size(411.4, 410.6)
... direction: vertical
... mainAxisAlignment: center
... mainAxisSize: max
... crossAxisAlignment: center
... verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Here is my code:
#override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
//flex: 2,
//fit: FlexFit.loose,
child: Text(
this.weather.cityName.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w900,
letterSpacing: 5,
color: AppStateContainer.of(context).theme.accentColor,
fontSize: 25),
),
),
SizedBox(
height: 20,
),
Flexible(
//flex: 1,
child:Text(
this.weather.description.toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.w100,
letterSpacing: 5,
fontSize: 20,
color: AppStateContainer.of(context).theme.accentColor),
),
),
WeatherSwipePager(weather: weather),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
ForecastHorizontal(weathers: weather.forecast),
Padding(
child: Divider(
color:
AppStateContainer.of(context).theme.accentColor.withAlpha(50),
),
padding: EdgeInsets.all(10),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ValueTile("wind speed", '${this.weather.windSpeed} m/s'),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunrise",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunrise * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile(
"sunset",
DateFormat('h:m a').format(DateTime.fromMillisecondsSinceEpoch(
this.weather.sunset * 1000))),
Padding(
padding: const EdgeInsets.only(left: 15, right: 15),
child: Center(
child: Container(
width: 1,
height: 30,
color: AppStateContainer.of(context)
.theme
.accentColor
.withAlpha(50),
)),
),
ValueTile("humidity", '${this.weather.humidity}%'),
]
),
],
),
);
}
}
You have to two quick options:
use ListView() with shrinkWrap set to true
#override
Widget build(BuildContext context) {
return ListView(
shrinkWrap: true,
children: <Widget>[
// Children
],
);
}
wrap Column() with singleChildScrollView()
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// Children
],
),
);
}
That's it

My drawer is throwing " Incorrect use of ParentDataWidget." using a list

I'm trying to implement a ListView inside my drawer so when the screen orientation change i don't get an overflow error.
But as soon i add my ListView to the drawer it do not render anymore and i'm getting the errors :
I/flutter (13071): Another exception was thrown: Incorrect use of ParentDataWidget.
I/flutter (13071): Another exception was thrown: RenderBox was not laid out: RenderShrinkWrappingViewport#91f4f relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
And i couldn't figure out hwy my code do not work. Doew someone has an idea why ?
Thank you !
This is my code :
Widget build(BuildContext context) {
return Drawer(
child: Container(
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Padding(
padding: const EdgeInsets.only(left: 40, bottom: 20),
child: Text(
"test",
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
color: Colors.white,
fontSize: 25,
),
),
),
),
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[],
),
)
],
),
),
);
}

How to make your text wrap inside a row?

I have a text widget inside of a row, who's text I'm retrieving from API, and can tend to get long sometimes. I want the text to wrap and move to next line when it gets too long, however its overflowing.
Is there a way to fix this ?
Thanks
My code
return ListView.builder(
itemCount: values == null ? 0 : values.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
.......
Row(children: <Widget>[Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize: 15.0), maxLines: 2, overflow: TextOverflow.clip,), //TEXT HERE
)],),
.....
],
),
),
),
),
);
},
);
Edit:
I tried using Expanded (and Flexible ) to wrap my row, however it gives the following error:
I/flutter (16255): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (16255): The following assertion was thrown during performLayout():
I/flutter (16255): RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (16255): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (16255): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (16255): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter (16255): space in the vertical direction.
I/flutter (16255): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (16255): cannot simultaneously expand to fit its parent.
I/flutter (16255): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter (16255): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter (16255): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter (16255): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum
I/flutter (16255): constraints provided by the parent.
It's owing to the fact that I have my column inside a ListView Card.
Is there any other alternative to fix this ?
I tried the suggestion given in the console, but it didn't work.
I have same question and solved!
check this, it has example code and screenshots
https://gist.github.com/yamarane/9269513a3c21eafb93a782fc387b9785
UPDATE(Working!):
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(body: Some()),
);
}
}
var values = [
"111111111111111111111111111qqqqqqqqqqqqqqqqqqqqqqq",
"222222222222222222222222222222222",
"333333333333333333333333333",
"4"
];
class Some extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: values == null ? 0 : values.length,
itemBuilder: (BuildContext context, int index) {
return Ink(
child: InkWell(
child: Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: <Widget>[
Icon(Icons.account_balance, size: 13.0, color: Colors.grey),
Container(
padding: const EdgeInsets.only(left: 10.0),
width: MediaQuery.of(context).size.width * 0.8,
child: Text(
values[index],
style: TextStyle(color: Colors.grey, fontSize: 15.0),
), //TEXT HERE
)
],
),
),
),
),
);
},
);
}
}
That's because the Row, which wraps your Text, is wrapped inside a Column, and therefore it does not have a defined width. Wrap your Row with Expanded to give a predefined width to fill the remaining space.
Expanded(
child: Row(
children: <Widget>[
Icon(
Icons.account_balance,
size: 13.0,
color: Colors.grey
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
values[index].societyName,
style: TextStyle(color: Colors.grey, fontSize: 15.0),
maxLines: 2,
overflow: TextOverflow.clip,
), //TEXT HERE
),
],
),
try Expanded property
Expanded(
child: Text(values[index].societyName, style: TextStyle(color: Colors.grey, fontSize:
15.0), maxLines: 2, overflow: TextOverflow.clip,),
)
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(values[index].societyName,
style: TextStyle(color: Colors.grey, fontSize: 15.0),
maxLines: 2,
overflow: TextOverflow.clip,), //TEXT HERE
)
)