Insert a Row inside a Column in Flutter - flutter

My UI screen is basically rendered using a Column Widget and inside this widget, I am inserting all the other UI components. One of these happens to be a Row ( consisting of 2 text fields). This is the Row Widget :
var phoneNumber = new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(20.0),
child: countryCodePicker,
),
new Padding(
padding: const EdgeInsets.all(20.0),
child: mobileNumber,
),
],
);
The Main UI Screen being :
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
customerName,
emailAddress,
// new Container(
// child: deliveryOptionRow,
// ),
mobileNumber,
countryCodePicker,
templateMessagesDropDown,
templateMessageTextField,
sendGoogleReview,
],
)
);
I see this exception when I add the Row to the Column
The following RenderObject was being processed when the exception was fired:
flutter: _RenderListTile#06b03 relayoutBoundary=up11 NEEDS-LAYOUT NEEDS-PAINT
flutter: creator: _ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← Listener ← _GestureSemantics ←
flutter: RawGestureDetector ← GestureDetector ← InkWell ← ListTile ← ListTileTheme ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0) (can use size)
flutter: constraints: BoxConstraints(unconstrained)
flutter: size: MISSING
flutter: This RenderObject had the following descendants (showing up to depth 5):
flutter: _RenderRadio#302a4 relayoutBoundary=up12 NEEDS-PAINT
flutter: RenderParagraph#58a45 NEEDS-LAYOUT NEEDS-PAINT
What would be the best way to add the row inside the main UI screen.

this should solve your problem,
var phoneNumber = new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: new Padding(
padding: const EdgeInsets.all(20.0),
child: countryCodePicker,
),
),
Expanded(
child: new Padding(
padding: const EdgeInsets.all(20.0),
child: mobileNumber,
),
),
],
);
hope it helps!

If your Row contains a TextField or TextFormField or any other widget which tries to grow to infinity, you need to provide an intrinsic width to it. You can do it in several ways:
Use Expanded:
Row(
children: [
Expanded(
child: TextField(), // <-- Wrapped in Expanded.
),
],
)
Use Flexible:
Row(
children: [
Flexible(
child: TextField(), // <-- Wrapped in Flexible.
),
],
)
Provide a fixed width:
Row(
children: [
SizedBox(
width: 200, // <-- Fixed width.
child: TextField(),
),
],
)

Related

TabBarView expanded inside a column error

I am getting this error from the TabBarView.
When I use a container with a specific height there are no errors.
but I don't want to set a specific height
I want it to take the rest of the column. So I tried using expanded and flexible but I am getting this error.
i really need to use TabBarView I can't use any other options.
Can any body help plz
Exception has occurred.
FlutterError (RenderFlex children have non-zero flex but incoming height constraints are unbounded.
When a column is in a parent that does not provide a finite height constraint, for example if it is in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the vertical direction.
These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child cannot simultaneously expand to fit its parent.
Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible children (using Flexible rather than Expanded). This will allow the flexible children to size themselves to less than the infinite remaining space they would otherwise be forced to take, and then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum constraints provided by the parent.
If this message did not help you determine the problem, consider using debugDumpRenderTree():
https://flutter.dev/debugging/#rendering-layer
http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
The affected RenderFlex is:
RenderFlex#c8da4 relayoutBoundary=up14 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯, parentData: <none> (can use size), constraints: BoxConstraints(0.0<=w<=363.4, 0.0<=h<=Infinity), size: MISSING, direction: vertical, mainAxisAlignment: start, mainAxisSize: min, crossAxisAlignment: center, verticalDirection: down)
The creator information is set to:
Column ← _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← ⋯
The nearest ancestor providing an unbounded width constraint is: _RenderSingleChildViewport#b15e8 relayoutBoundary=up13 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
needs compositing
creator: _SingleChildViewport ← IgnorePointer-[GlobalKey#a14ea] ← Semantics ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#45e38] ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#ecd8b] ← NotificationListener<ScrollMetricsNotification> ← RepaintBoundary ← CustomPaint ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=363.4, h=636.6)
size: MISSING
offset: Offset(0.0, -0.0)
See also: https://flutter.dev/layout/
If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
https://github.com/flutter/flutter/issues/new?template=2_bug.md)
import 'package:flutter/material.dart';
import 'package:news_app/helper/enum.dart';
import 'package:news_app/screens/home/home_top_bar.dart';
import 'package:news_app/screens/home/latest_widget.dart';
import 'package:news_app/screens/home/news_tile.dart';
import 'package:news_app/screens/home/see_all_widget.dart';
import 'package:news_app/screens/home/trending_widget.dart';
import 'package:news_app/widgets/text_fields/search_field.dart';
class HomeSection extends StatefulWidget {
const HomeSection({super.key});
#override
State<HomeSection> createState() => _HomeSectionState();
}
class _HomeSectionState extends State<HomeSection>
with TickerProviderStateMixin {
TextEditingController search = TextEditingController();
#override
Widget build(BuildContext context) {
final TabController tabController = TabController(
length: 2,
initialIndex: 1,
vsync: this,
);
return Column(
children: [
const HomeTopBar(),
SearchField(
controller: search,
onChanged: (value) {},
prefixIcon: Icon(
Icons.search,
size: 30,
color: Theme.of(context).secondaryHeaderColor,
),
suffixIcons: Image.asset(
'assets/icons/slider_menu.png',
color: Theme.of(context).secondaryHeaderColor,
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.0101,
),
Expanded(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SeeAllBar(heading: "Trending"),
TrendingWidget(
newsCategory: "Europe",
title: "Russian warship: Moskva sinks in Black Sea",
publishedTime: "4h ago",
image: Image.asset('assets/temp/trending1.png'),
publisher: "BBC",
publisherLogo: Image.asset('assets/temp/bbc.png'),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.0101,
),
const SeeAllBar(heading: "Latest"),
TabBar(
controller: tabController,
isScrollable: true,
tabs: const [
Text("All"),
Text("Politics"),
],
),
Expanded(
child: TabBarView(
controller: tabController,
children: const [
Text("All"),
Text("Politics"),
],
),
),
],
),
),
),
],
);
}
}
If you need scrolling only for TabBarView - wrap main Column with fixed height container. Then you can use Expanded inside without SingleChildScrollView.
return Container(
color: Colors.redAccent,
height: MediaQuery.of(context).size.height, //<<< your device height
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: _topHeight,
width: double.infinity,
color: Colors.orange,
child: Center(child: Text('TopBar')),
),
Container(
height: _searchHeight,
width: double.infinity,
color: Colors.yellowAccent,
child: Center(child: Text('Search Field')),
),
SizedBox(
height: _sizeBoxHeight,
),
Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text("Trending Bar"),
Container(
height: 210,
width: double.infinity,
color: Colors.blueAccent,
child: Center(child: Text('Trending widget')),
),
SizedBox(
height: _sizeBoxHeight,
),
const Text("Latest"),
TabBar(
controller: tabController,
isScrollable: true,
tabs: const [
Text("All"),
Text("Politics"),
],
),
Expanded(
child: TabBarView(
controller: tabController,
children: [
ListView.builder(itemBuilder: (context, index) {
return Text ('All $index');
}, itemCount: 100,),
ListView.builder(itemBuilder: (context, index) {
return Text ('Politics $index');
}, itemCount: 100,),
],
),
),
],
),
),
],
),
);

Flutter Web SingleChildScrollView Incorrect use of ParentDataWidget

This is how my code looks like, and to make it work correctly in web i have to do one part scrollable because of adapty.
Scaffold(
body: Row(
children: [
Column(
children: [
Expanded(
child: Container(
width: 200,
color: Colors.blue,
),
)
],
),
Expanded(
child: Column(
children: [
Row(
children: [
Expanded(
child: Container(
height: 108,
color: AppColors.bg.secondary,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Padding(
padding: EdgeInsets.only(left: 40),
child: Text(
'Contacts',
style: TextStyle(
fontSize: 40,
color: Colors.black,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 40),
child: InkWell(
onTap: () {},
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20), color: AppColors.bg.fields),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 77, vertical: 8),
child: Text('Save changes'),
),
),
),
)
],
),
),
),
],
),
Expanded(
child: SingleChildScrollView(
child: WidgetsContainer(
createNewManager: model.createNewManager,
managers: model.managers,
)),
)
],
),
),
],
),
);
You may see that i use Expanded widget to make SingleChildeScrollView fill all free space
and this is error
Incorrect use of ParentDataWidget.
The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a
RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically,
Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a _SingleChildViewport widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RepaintBoundary ← NotificationListener<ScrollNotification> ←
NotificationListener<ScrollMetricsNotification> ← _MaterialScrollbar ← Scrollbar ← Scrollable ←
SingleChildScrollView ← Expanded ← ShimmerWaiting ← FutureBuilder<dynamic> ← ⋯
this is how my screen looks like
also this is what futureBuilder in class WidgetsContainer returns me
Column(
children: [ManagerContainer(createNewManager: createNewManager), ServicesContainer()],
);

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:

A RenderFlex overflowed by 112 pixels on the bottom

I am using AnimatedContainer. it animate size from 0 to some size and it contain some text and all other things. on pressing one button animation is started and it shows flowing errors.
On the button press i just set value of sizeOfLevel. initially value of it is 0.
Code:
AnimatedContainer(
curve: Curves.bounceIn,
duration: Duration(milliseconds: 200),
width: sizeOfLevel,
height: sizeOfLevel,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
image: DecorationImage(
image: AssetImage('images/levelunlockScreen.jpg'),
fit: BoxFit.cover),
border: Border.all(
style: BorderStyle.solid, width: 4.0, color: Colors.white)),
child: Column(
children: <Widget>[
Center(
child: new Text(
"Unlock Level",
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
),
],
),
),
Errors:
I/flutter ( 4579): The following message was thrown during layout:
I/flutter ( 4579): A RenderFlex overflowed by 112 pixels on the bottom.
I/flutter ( 4579): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 4579): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 4579): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 4579): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 4579): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 4579): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 4579): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 4579): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 4579): like a ListView.
I/flutter ( 4579): The specific RenderFlex in question is:
I/flutter ( 4579): RenderFlex#4086c OVERFLOWING
I/flutter ( 4579): creator: Column ← Padding ← DecoratedBox ← ConstrainedBox ← Container ← AnimatedContainer ← Center
I/flutter ( 4579): ← Stack ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder
I/flutter ( 4579): ← ⋯
I/flutter ( 4579): parentData: offset=Offset(4.0, 4.0) (can use size)
I/flutter ( 4579): constraints: BoxConstraints(w=115.7, h=115.7)
I/flutter ( 4579): size: Size(115.7, 115.7)
I/flutter ( 4579): direction: vertical
I/flutter ( 4579): mainAxisAlignment: start
I/flutter ( 4579): mainAxisSize: max
I/flutter ( 4579): crossAxisAlignment: center
I/flutter ( 4579): verticalDirection: down
" Warping your parent Column into - SingleChildScrollView" works to me, I'm animate the height of the AnimatedContainer.
Older code
return new AnimatedContainer(
curve: Curves.easeInOutCubic,
height: showSearchBar ? 350 : 0,
duration: new Duration(seconds: 3),
child: Container(
margin: EdgeInsets.all(10),
child: Card(
child: Padding(
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text('Busque por pacientes'),
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
child: Column(
children: this.children,
),
),
RaisedButton(
color: themeSecondary,
onPressed: () {
print('raised clicked');
},
child: Text('Buscar'),
)
]),
),
),
),
);
And the newer, warping the SingleChildScrollView
return new AnimatedContainer(
curve: Curves.easeInOutCubic,
height: showSearchBar ? 350 : 0,
duration: new Duration(seconds: 3),
child: Container(
margin: EdgeInsets.all(10),
child: Card(
child: Padding(
padding: EdgeInsets.all(20),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Text('Busque por pacientes'),
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 0, vertical: 20),
child: Column(
children: this.children,
),
),
RaisedButton(
color: themeSecondary,
onPressed: () {
print('raised clicked');
},
child: Text('Buscar'),
)
]),
),
),
),
),
);

Flutter RenderFlex overflowed by 15 pixels on the right inside Column Widget

I created a custom ListTile which should have two score centered in the middle and information on the left and right of this (screenshot).
The information on the left can have arbitrary length and should use TextOverflow.ellipsis when it's too long.
I cannot get this to work since the Text does not seem to know the width it is supposed to have and overflows.
I have tried wrapping the Text widgets into SizedBox, Expanded, etc. This has not worked.
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following message was thrown during layout:
flutter: A RenderFlex overflowed by 15 pixels on the right.
flutter:
flutter: The overflowing RenderFlex has an orientation of Axis.horizontal.
flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
flutter: This is considered an error condition because it indicates that there is content that cannot be
flutter: seen. If the content is legitimately bigger than the available space, consider clipping it with a
flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
flutter: like a ListView.
flutter: The specific RenderFlex in question is:
flutter: RenderFlex#c64e4 relayoutBoundary=up11 OVERFLOWING
flutter: creator: Row ← Expanded ← Row ← Column ← ConstrainedBox ← Container ← Listener ← _GestureSemantics
flutter: ← RawGestureDetector ← GestureDetector ← InkWell ← ScopedModelDescendant<BaseballModel> ← ⋯
flutter: parentData: offset=Offset(0.0, 0.0); flex=1; fit=FlexFit.tight (can use size)
flutter: constraints: BoxConstraints(w=143.0, 0.0<=h<=Infinity)
flutter: size: Size(143.0, 70.0)
flutter: direction: horizontal
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: textDirection: ltr
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
My Code is the following:
#immutable
class GameTile extends StatelessWidget {
final Game game;
Color highligtColor = Colors.red;
GameTile({this.game});
#override
Widget build(BuildContext context) {
return InkWell(
child: Container(
height: 70.0,
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Container(
width: 8.0,
height: 70.0,
color: highligtColor,
),
Padding(
padding: EdgeInsets.only(left: 15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
game.awayTeam.name,
overflow: TextOverflow.ellipsis,
),
Text(
game.homeTeam.name,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Column(
children: [
Text(
game.awayRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
Text(
game.homeRuns,
style: TextStyle(fontWeight: FontWeight.w900),
),
],
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]),
Padding(
padding: EdgeInsets.only(left: 8.0, right: 10.0),
child: Container(),
)
],
),
)
],
)
],
),
),
);
}
}
Just wrap the overflowed widget with Flexible
new Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Checkbox(
onChanged: (bool){},
),
Flexible(
child: new Text(
"This text can be so loooooooooooooong",
),
),
],
),
Explanation of Flexible or Expanded Solution
Inside a Row, a Text widget will never line-wrap nor show ellipses when not inside an Expanded or Flexible widget (or another widget which constrains width).
When Flutter performs layout for Row or Column, any non-flex factor widgets get laid out in unbounded space. i.e. without any constraints. (Flexible, Expanded and Spacer are the only flex-factor widgets.)
So when Text is being laid out inside the Row, it will never be so wide as to hit a width constraint and get wrapped because...
... there are no constraints during Row layout for non-flex factor widgets.
Placing the Text widget inside a Flexible or Expanded will cause Flutter to calculate remaining space during Row layout and impose that constraint. This will cause wrapping if needed & ellipses if specified: Text("blahblah", overflow: TextOverflow.ellipsis).
More details in a related RenderFlex overflowed question.
Example Code
import 'package:flutter/material.dart';
class FlexTextWrapPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flex Text Wrap'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Text("This should easily wrap, but doesn't because I'm in INFINITE SPACE"),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE")),
MySpacer(width: 100),
],
),
),
SizedBox(
width: 400,
child: Row(
children: [
MySpacer(width: 100),
Expanded(
child: Text("This should easily wrap, and DOES because I'm in BOUNDED SPACE",
overflow: TextOverflow.ellipsis, // default is .clip
maxLines: 2,),// default is 1
),
MySpacer(width: 100),
],
),
),
],
),
);
}
}
class MySpacer extends StatelessWidget {
final double width;
MySpacer({this.width});
#override
Widget build(BuildContext context) {
return Container(child: SizedBox(width: width, height: 16,), color: Colors.lightBlueAccent,);
}
}
Result
If you want the child content to just fit the content without being expanded. You must use Flexible in combination with MainAxisSize.min inside Row:
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 2),
child: Text("abc",
style: TextStyle(
color: Colors.white,
fontSize: 13),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
),
Icon(Icons.arrow_drop_down, size: 10, color: Colors.white,)
],
)
About the exception
I ran your code on my phone and an exception occurred only after meddling with the teams names and the width of the widget.
I think this problem arises because your code doesn't adapt to different display sizes well enough, especially if the team names have a different length:
Concrete solution for a more flexible and dynamic widget
I created a modified widget that adapts well to constraint changes and uses the available space in a more clever way. I did this by flattening your nested Rows and Columns as far as possible, resulting in a more shallow, more flexible widget tree:
return InkWell(
child: Container(
height: 70.0,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(width: 8.0, height: 70.0, color: highlightColor),
SizedBox(width: 15.0),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(game.awayTeam.name, overflow: TextOverflow.ellipsis),
Text(game.homeTeam.name, overflow: TextOverflow.ellipsis),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(game.awayRuns, style: TextStyle(fontWeight: FontWeight.w900)),
Text(game.homeRuns, style: TextStyle(fontWeight: FontWeight.w900)),
],
),
Spacer(),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(game.getFormattedDate()),
Text(game.getFormattedTime()),
]
),
SizedBox(width: 18.0),
],
),
),
);
General tip when dealing with difficult constraints
Most of the time, it's better to use just a few widgets in a shallow tree. Nesting all kinds of "organizational" widgets, especially Columns, Rows and Expandeds often creates situations where an Expanded always requests the same size (or ratio of the parent size) without even considering the dimensions of its content.
That can lead to content overflowing, while there is unused negative space at other parts of the widget.
use Expanded or Flexible in your parent widget,