ListView and Expanded not work in flutter - flutter

I need help to solve this problem. The expanded renders the child but does not expand.
return Scaffold(
body: ListView(
children: [
_HomeBody(child: child,)
],
)
);
_HomeBody
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height
child: Column(
children: [
AppBarMenu(),
Expanded(child: child), // A RenderFlex overflowed by 1246 pixels on the bottom.
Footer()
],
),
);
Error Output
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 1246 pixels on the bottom.
The relevant error-causing widget was:
Column
lib\…\views\home_view.dart:19
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#90f9f OVERFLOWING:
needs compositing
creator: Column ← ConstrainedBox ← Container ← HomeView ← Builder ←
RepaintBoundary-[GlobalKey#97a2c] ← IgnorePointer ← AnimatedBuilder ← FractionalTranslation ←
SlideTransition ← AnimatedBuilder ← RepaintBoundary ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=966.0, h=840.0)
size: Size(966.0, 840.0)
direction: vertical
mainAxisAlignment: start
mainAxisSize: max
crossAxisAlignment: start
textDirection: ltr
verticalDirection: down
HomeLayout code
child code

You can't have Expanded inside of a scrolling view (SignleChildScrollView, ListView, etc..)
cause like this you are telling the child of the expanded to take of the whole vertical space allowed to you, and the scroll view can allow infinite vertical space, so in a nutshell, you are telling the child of the Expanded take the size of infinity. hope this clarifies the error

Related

Fix overflow of Bottomnavigationbar when hiding/showing animately

Does anybody knows a right way to hide and show Bottomnavigationbar with animation with correspondence to miniplayer height? As shown in the Fig.1, Bottomnavigationbar shows the overflow warning on bottom only during animation.
Fig.1 A overflow warning is shown during animation.
main.dart
import 'package:flutter/material.dart';
import 'screens/audio_screen.dart';
import 'widgets/player.dart';
import 'utils.dart';
ValueNotifier<AudioObject> currentlyPlaying = ValueNotifier(null);
const double playerMinHeight = 70;
const double playerMaxHeight = 370;
const miniplayerPercentageDeclaration = 0.2;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Miniplayer Demo',
theme: ThemeData(
primaryColor: Colors.grey[50],
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Column(
children: [
AppBar(
title: Text('Miniplayer Demo'),
),
Expanded(
child: AudioUi(
onTap: (audioObject) {
currentlyPlaying.value = audioObject;
},
),
),
],
),
ValueListenableBuilder(
valueListenable: currentlyPlaying,
builder: (BuildContext context, AudioObject audioObject,
Widget child) {
if (audioObject == null) return Container();
return DetailedPlayer(audioObject: audioObject);
}),
],
),
bottomNavigationBar: ValueListenableBuilder(
valueListenable: playerExpandProgress,
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Feed',
),
BottomNavigationBarItem(
icon: Icon(Icons.library_books),
label: 'Library',
),
],
currentIndex: 0,
selectedItemColor: Colors.blue,
onTap: (index) {},
),
builder: (BuildContext context, double height, Widget child) {
final value = percentageFromValueInRange(
min: playerMinHeight, max: playerMaxHeight, value: height);
if (value == null) return child;
var opacity = 1 - value;
if (opacity < 0) opacity = 0;
if (opacity > 1) opacity = 1;
return SizedBox(
height: kBottomNavigationBarHeight * (1 - value),
child: Transform.translate(
offset: Offset(0.0, kBottomNavigationBarHeight * value * 0.5),
child: Opacity(
opacity: opacity,
child: child,
),
),
);
},
),
);
}
}
pubspec.yaml
name: miniplayer_example
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
google_fonts: ^1.1.1
miniplayer: ^0.6.1
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
Exception
Performing hot reload...
Reloaded 0 libraries in 633ms.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 3.2 pixels on the bottom.
The relevant error-causing widget was:
BottomNavigationBar file:///***/lib/main.dart:65:16
To inspect this widget in Flutter DevTools, visit:
http://127.0.0.1:51487/#/inspector?uri=***
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#090d7 relayoutBoundary=up10
OVERFLOWING:
creator: Column ← Padding ← Listener ← RawGestureDetector ← GestureDetector ←
Semantics ←
_RawMouseRegion ← MouseRegion ← Semantics ← _FocusMarker ← Focus ←
_ActionsMarker ← ⋯
parentData: offset=Offset(0.0, 7.0) (can use size)
constraints: BoxConstraints(0.0<=w<=205.7, 0.0<=h<=36.8)
size: Size(205.7, 36.8)
direction: vertical
mainAxisAlignment: spaceBetween
mainAxisSize: min
crossAxisAlignment: center
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════
════════════════════
Another exception was thrown: A RenderFlex overflowed by 3.2 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 14 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 81 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 60 pixels on the
bottom.
Another exception was thrown: A RenderFlex overflowed by 86 pixels on the
bottom.
flutter doctor
❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale en-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)
• No issues found!
Reference (and source code is from).
https://github.com/peterscodee/miniplayer/issues/1
To comment1
Tried FittedBox
return Container(
height: kBottomNavigationBarHeight * (1 - value),
child: FittedBox(
alignment: Alignment.topCenter,
fit: BoxFit.fitWidth,
child: Opacity(opacity: opacity, child: child),
),
);
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming width constraints are unbounded.
When a row is in a parent that does not provide a finite width constraint, for example if it is in a
horizontal scrollable, it will try to shrink-wrap its children along the horizontal 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 horizontal 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.
...
The affected RenderFlex is:
RenderFlex#c2bfc relayoutBoundary=up10 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: Row ← DefaultTextStyle ← Builder ← MediaQuery ←
Padding ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#e4557 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
CustomPaint ← _ShapeBorderPaint ← Material ← ⋯, parentData: offset=Offset(0.0, 0.0) (can use size), constraints: BoxConstraints(0.0<=w<=Infinity,
56.0<=h<=Infinity), size: MISSING, direction: horizontal, mainAxisAlignment: spaceBetween, mainAxisSize: max, crossAxisAlignment: center, textDirection:
ltr, verticalDirection: down)
The creator information is set to:
Row ← DefaultTextStyle ← Builder ← MediaQuery ← Padding ← DefaultTextStyle ←
AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#e4557 ink renderer] ←
NotificationListener<LayoutChangedNotification> ← CustomPaint ← _ShapeBorderPaint ← Material ← ⋯
The nearest ancestor providing an unbounded width constraint is: RenderFittedBox#7e087 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: FittedBox ← ConstrainedBox ← Container ← ValueListenableBuilder<double> ← MediaQuery ←
LayoutId-[<_ScaffoldSlot.bottomNavigationBar>] ← CustomMultiChildLayout ← AnimatedBuilder ←
DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#25dea ink renderer] ←
NotificationListener<LayoutChangedNotification> ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(w=411.4, h=56.0)
size: MISSING
fit: fitWidth
alignment: Alignment.topCenter
textDirection: ltr
To comment2
return Transform.translate(
offset: Offset(0.0, kBottomNavigationBarHeight * value),
child: SizedBox(
child: Opacity(opacity: opacity, child: child),
),
);
Bottomnavigator was hiden but miniplayer doesn't stretch to the bottom.
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#15a52 relayoutBoundary=up3 OVERFLOWING:
creator: Column ← Opacity ← Padding ← Expanded ← Column ← DecoratedBox ← ConstrainedBox ← Container
← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#08473 ink renderer] ←
NotificationListener<LayoutChangedNotification> ← ⋯
parentData: <none> (can use size)
constraints: BoxConstraints(0.0<=w<=345.4, h=82.0)
size: Size(345.4, 82.0)
direction: vertical
mainAxisAlignment: spaceEvenly
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════

TextFormField is not working. Here is the code and problem below

Scaffold(
body:Stack(
children:[
Positioned(
top:120,
child:Container(
child:Column(
children:[
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter some text';
}
return null;
},
),
]
)
)
)
]
)
);
This message shows:
The following RenderObject was being processed when the exception was fired: _RenderDecoration#03a2b
relayoutBoundary=up20 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
needs compositing
creator: _Decorator ← InputDecorator ← AnimatedBuilder ← Listener ← RawGestureDetector ← TextSelectionGestureDetector ← Semantics ← AnimatedBuilder ← IgnorePointer ← _RawMouseRegion ← MouseRegion ← TextField ← ⋯
  parentData: (can use size)
  constraints: BoxConstraints(unconstrained)
  size: MISSING
I believe if you make your Positioned a Positioned.fill, it will layout its children in bounded space as opposed to unbounded. Once it has these constraints, it can pass them down to Column & TextFormField so they can size themselves within bounded space.
import 'package:flutter/material.dart';
class FieldColumnPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body:Stack(
children:[
Positioned.fill(
top: 120,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'field here'
),
),
],
),
)
]
)
);
}
}
This is a quirk of Stack's layout algorithm. Here's the comments on Stack in the SDK:
/// The stack sizes itself to contain all the
/// non-positioned children, which are positioned according to [alignment]
/// (which defaults to the top-left corner in left-to-right environments and the
/// top-right corner in right-to-left environments). The positioned children are
/// then placed relative to the stack according to their top, right, bottom, and
/// left properties.
If I'm understanding that correctly...
the Stack sizes itself to contain non-Positioned children
but you have zero non-Positioned children
so, Stack lays out Positioned children, in unbounded space (not explicitly stated in comment, but it's my guess)
Column lays out non-flex factor widgets (anything not Flexible or Expanded), also in unbounded space
TextFormField decorator tries to expand as wide as possible to fill constraints
there are no constraints in unbounded space
app explodes
By switching to Positioned.fill, Position now figures out how much space it has (its constraints) and passes those constraints down to its children which are now bounded by those constraints.
you have to set width to the parent container of your TexFormField because TextFormField get parent size and container and all parents to the top hasn't specified width when you use TextFormField in row you can put TextFormField in Expanded widget and in stack I think you can do it too.
Wrap the TextFormField with a Row widget which has mainAxisSize set to MainAxisSize.min. And also set Column's mainAxisSize to min value.

Flutter Web: Overflow issue in bottom

Code: Basically I have a simple app with three images aligned. I have 1 column and two rows. First row has two images and second row has 1 image aligned. Its the structure of the app. It just aligns perfectly when run below code in device but the moment I run on WEB there is this overflow. I try resizing the browser window only then it begins to become pretty again. Is there a workaround for Flutter Web please on how should I do the alignments here? Below code is inside body and inside Scaffold. I am attaching pics from device where there is no issue and from Flutter web where there is overflow issue.
return Column(
mainAxisAlignment: MainAxisAlignment.center,
//crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
Expanded(
child: FlatButton(
child: Image.asset('images/image1.png'),
),
),
],
),
Row(
children: <Widget>[
Expanded(
child: Image.asset('images/image1.png'),
),
],
),
],
);
}
Error:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY
╞═════════════════════════════════════════════════════════ The
following assertion was thrown during layout: A RenderFlex overflowed
by 1238 pixels on the bottom.
The relevant error-causing widget was: Column
file:///C:/Users/1025632/Documents/GitHub/flutter-course/diceylips/lib/main.dart:43:12
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#1ad1e
relayoutBoundary=up1 OVERFLOWING: creator: Column ← DicePage ←
_BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
_InkFeatures-[GlobalKey#cb60e ink renderer] ← NotificationListener ←
PhysicalModel ← ⋯ parentData: offset=Offset(0.0, 56.0); id=_ScaffoldSlot.body (can use size) constraints:
BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=554.0) size: Size(1280.0,
554.0)
direction: vertical
mainAxisAlignment: center
mainAxisSize: max
crossAxisAlignment: center
verticalDirection: down
Image with no issue in device
Image with overflow issue in chrome
Wrap the column with a sized box or container with defined height and width
SizedBox(
height:200,
width:200,
child: your column goes here,
)
Add below code inside Container
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
....
....
)
This is the generic way to define full width and height to your Container
If you don't try to fit your widget in screen and scroll is an option for you, you can use listview or a similar widget.
ListView(
children: <Widget>[
Column(
Otherwise, wrapping Container with MediaQuery.of(context).size.width and MediaQuery.of(context).size.height will work but there is just one catch here, if you use an appbar this height should be "MediaQuery.of(context).size.height - AppBar().preferredSize.height"

Flutter drawer test errors with "A RenderFlex overflowed by 188 pixels on the right."

I am writing some tests for my app. Currently I am stuck on testing the drawer. On emulators of various sizes it runs without a problem (from 240x432 to 1440x2960) but when I try to run a simple test the following error is thrown:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 188 pixels on the right.
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#1ae2c relayoutBoundary=up17 OVERFLOWING:
creator: Row ← Center ← Padding ← Container ← IconTheme ← Builder ← Listener ← _GestureSemantics ←
RawGestureDetector ← GestureDetector ← Listener ← InkWell ← ⋯
parentData: offset=Offset(0.0, 0.0) (can use size)
constraints: BoxConstraints(0.0<=w<=256.0, 0.0<=h<=Infinity)
size: Size(256.0, 24.0)
direction: horizontal
mainAxisAlignment: start
mainAxisSize: min
crossAxisAlignment: center
textDirection: ltr
verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
════════════════════════════════════════════════════════════════════════════════════════════════════
Within the code I have narrowed it down to some RaisedButtons. When the Row within is below a certain length, the error doesn't show.
When I comment out the following code, ALL tests run without an issue.
Padding(
padding: EdgeInsets.symmetric(vertical: 32, horizontal: 16),
child: Column(
children: [
FacebookSignInButton(
onPressed: _fbLogin,
),
GoogleSignInButton(
onPressed: _googleLogin,
)
],
crossAxisAlignment: CrossAxisAlignment.stretch,
))
Changing the text within ("Continue with Facebook", "Sign in with Google") to something shorter also fixes this.
The test (note I'm currently just trying to not error, asserts will be put in once I get this figured out)
testWidgets("Drawer",
(WidgetTester tester) async {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
BuildContext savedContext;
await tester.pumpWidget(
MaterialApp(
home: Builder(
builder: (BuildContext context) {
savedContext = context;
return Scaffold(
key: _scaffoldKey,
drawer: HomePageDrawer(),
body: Container(),
);
},
),
),
);
await tester.pump(); // no effect
_scaffoldKey.currentState.openDrawer();
await tester.pump();
});

Expand area of CupertinoNavigationBar leading

I am using CupertinoNavigationBar to make a layout expected like image below
In left side/leading area, I override default back button to create the layout, but instead I got an overflow
return CupertinoPageScaffold(
...
leading: Row(
children: <Widget>[
UtomoDeckNavigationBar.getDefaultBackButton(context: context, isLightTheme: true),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(widget.chat.name,
style: TextStyle(
color: CupertinoColors.black,
fontWeight: FontWeight.bold,
fontSize: 14.0)),
Text('Online',
style: TextStyle(color: CupertinoColors.black, fontSize: 12.0))
],
)
],
)
)
and the error
Performing hot reload...
Syncing files to device iPhone SE...
flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during layout:
flutter: A RenderFlex overflowed by 34 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: RenderFlex#d650f relayoutBoundary=up2 OVERFLOWING:
flutter: creator: Row ← IconTheme ← Builder ← Padding ← KeyedSubtree-[GlobalKey#fab21 Leading] ←
flutter: LayoutId-[<_ToolbarSlot.leading>] ← CustomMultiChildLayout ← NavigationToolbar ← Padding ←
flutter: MediaQuery ← Padding ← SafeArea ← ⋯
flutter: parentData: offset=Offset(16.0, 0.0) (can use size)
flutter: constraints: BoxConstraints(0.0<=w<=90.7, h=44.0)
flutter: size: Size(90.7, 44.0)
flutter: direction: horizontal
flutter: mainAxisAlignment: start
flutter: mainAxisSize: max
flutter: crossAxisAlignment: center
flutter: textDirection: ltr
flutter: verticalDirection: down
flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 11 of 687 libraries in 407ms.
Can I expand the constraint of the leading area, or maybe there's a better approach to do this?
Thank you.
to solve this, I use Row with MainAxisAlignment.start inside middle instead of leading.
EDIT :
Use Container with infinity width instead of Row, its children will overflow if its children widgets are more than the parent (Row), and TextOverflow.ellipsis won't help
I will tell you what worked for me. First, You should wrap your Container in a Flexible to let your Column know that it's ok for the Container to be narrower than its intrinsic width. Second, add overflow: TextOverflow.ellipsis for the ... Triple point.