Expanded 和 FittedBox in Row and Column

Question

Row 和 Column 中的 Expanded 和 FittedBox。

══╡ 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)))
            ],
          ),
        ),
      ),
    );
  }

當按下熱啟動時，出現一個屏幕，下面的錯誤是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

我想這樣做。 我使用 FitBox 是因為我需要更改每個設備的字體大小。

字符必須位於單列中。 我想顯示最大數量的圖像。

這是因為它們很容易看到。

Answer 1

• 一個 Row() 包含兩個 Expanded() 是沒有意義的，因為您也無法控制它們的寬度。
• 建議固定左邊文字的寬度
• 這是例子

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();
        }));
  }
}