Expanded and FittedBox in Row and Column - flutter

Question

Expanded and FittedBox in Row and Column.
══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during a scheduler callback:
'package:flutter/src/widgets/binding.dart': Failed assertion: line 849 pos 12:
'!debugBuildingDirtyElements': is not true.
Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=2_bug.md
When the exception was thrown, this was the stack:
#2 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:849:12)
#3 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:378:5)
#4 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1175:15)
#5 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1104:9)
#6 SchedulerBinding.scheduleWarmUpFrame.<anonymous closure> (package:flutter/src/scheduler/binding.dart:881:7)
(elided 6 frames from class _AssertionError, class _RawReceivePortImpl, class _Timer, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════════════════════════
Performing hot reload...
Reloaded 0 libraries in 31ms (compile: 7 ms, reload: 0 ms, reassemble: 13 ms).
Another exception was thrown: 'package:flutter/src/widgets/binding.dart': Failed assertion: line 849 pos 12: '!debugBuildingDirtyElements': is not true.
Another exception was thrown: 'package:flutter/src/widgets/binding.dart': Failed assertion: line 849 pos 12: '!debugBuildingDirtyElements': is not true.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
alignment: Alignment.center,
color: Color.fromRGBO(0, 0, 0, 1),
child: SafeArea(
child: Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: IntrinsicWidth(
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FittedBox(
fit: BoxFit.fitWidth,
child: Text(
_localeDate,
style: TextStyle(
color: Colors.white,
),
),
),
SizedBox(
height: 20,
),
FittedBox(
fit: BoxFit.fitWidth,
child: Text(
_time,
style: TextStyle(
color: Colors.white,
),
),
),
],
),
],
),
),
),
),
Expanded(
flex: 2,
child: Image(fit: BoxFit.cover, image: NetworkImage(img)))
],
),
),
),
);
}
When hot start is pressed, a screen appears and the following error is output.
The following RenderObject was being processed when the exception was fired: RenderFittedBox#e50d7 relayoutBoundary=up15 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
creator: FittedBox ← Column ← Stack ← IntrinsicWidth ← Padding ← SizedBox ← Row ← MediaQuery ←
Padding ← SafeArea ← Align ← ColoredBox ← ⋯
parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
constraints: BoxConstraints(w=237.2, 0.0<=h<=Infinity)
size: MISSING
fit: fitWidth
alignment: Alignment.center
textDirection: ltr
This RenderObject had the following descendants (showing up to depth 5):
child: RenderParagraph#39ce4 relayoutBoundary=up16 NEEDS-PAINT
text: TextSpan
════════════════════════════════════════════════════════════════════════════════════════════════════
Another exception was thrown: RenderBox was not laid out: RenderFittedBox#e50d7 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
Another exception was thrown: RenderBox was not laid out: RenderFlex#e77d9 relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
I would like to do this.
I use FitBox because I need to change the font size for each device.
Characters must be in a single column.
I want to display the maximum number of images.
This is because they are easy to see.

Answer 1

It doesn't make sense for a Row() to contain two Expanded(), since you also have no control over their widths.
It is recommended to fix the width of the text on the left
this is example
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:koreajob/view/common/funciton_of_print.dart';
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
#override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
DeviceOrientation.portraitUp,
DeviceOrientation.portraitDown,
]);
}
Widget _buildLandScreenView(BuildContext context, Orientation orientation) {
return Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
color: Color.fromRGBO(0, 0, 0, 1),
child: SafeArea(
child: Row(
children: [
SizedBox(
width: MediaQuery.of(context).size.width * .5,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: IntrinsicWidth(
child: Stack(
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
FittedBox(
fit: BoxFit.fitWidth,
child: Text(
"""Easy to use, """,
style: TextStyle(
color: Colors.white,
),
),
),
SizedBox(
height: 20,
),
FittedBox(
fit: BoxFit.fitWidth,
child: Text(
"""Just add Just add Just add Just add Just add Just add """,
style: TextStyle(
color: Colors.white,
),
),
),
],
),
],
),
),
),
),
Expanded(
child: Image(
fit: BoxFit.cover,
image: NetworkImage('https://picsum.photos/200')))
],
),
),
);
}
Widget _buildPortaraitScreenView(
BuildContext context, Orientation orientation) {
return _buildLandScreenView(context, orientation);
}
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: OrientationBuilder(builder: (context, orientation) {
if (orientation == Orientation.portrait) {
return _buildPortaraitScreenView(context, orientation);
} else if (orientation == Orientation.landscape) {
return _buildLandScreenView(context, orientation);
}
return Container();
}));
}
}