search

forus-labs / forui

Forus Lab's Flutter UI library
https://forui.dev
Other
498 stars 25 forks source link

Using Row with a FTextField causes a crash #276

Closed FoliageOwO closed 6 days ago

FoliageOwO commented 6 days ago

Describe the bug I want to let the label and the input field at the same row, like this:

image

not this:

image

Seems there's no an option to control the label position, so I tried this:

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<StatefulWidget> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return const Row(
      children: [Text('Username'), FTextField()],
    );
  }
}

And, unfortunately, it crashed:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during paint():
Assertion failed: file:///F:/flutter/packages/flutter/lib/src/rendering/box.dart:2164:12
hasSize
"RenderBox was not laid out: RenderRepaintBoundary#84c90 NEEDS-PAINT"

The relevant error-causing widget was: 
  FTheme FTheme:file:///(path_to_the_project_root)/lib/main.dart:56:36
When the exception was thrown, this was the stack: 
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 29:3   assertFailed
packages/flutter/src/rendering/box.dart 2164:12                              get size
packages/flutter/src/rendering/box.dart 2904:41                              get paintBounds
packages/flutter/src/rendering/object.dart 166:55                            _repaintCompositedChild
packages/flutter/src/rendering/object.dart 110:5                             repaintCompositedChild
packages/flutter/src/rendering/object.dart 262:7                             [_compositeChild]
packages/flutter/src/rendering/object.dart 243:7                             paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/proxy_box.dart 3748:11                        paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/widgets/overlay.dart 1029:14                            paint
packages/flutter/src/widgets/overlay.dart 1355:13                            paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/custom_paint.dart 633:11                      paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/proxy_box.dart 136:12                         paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 251:12                            paintChild
packages/flutter/src/rendering/view.dart 312:14                              paint
packages/flutter/src/rendering/object.dart 3268:7                            [_paintWithContext]
packages/flutter/src/rendering/object.dart 167:10                            _repaintCompositedChild
packages/flutter/src/rendering/object.dart 110:5                             repaintCompositedChild
packages/flutter/src/rendering/object.dart 1183:31                           flushPaint
packages/flutter/src/rendering/object.dart 1193:14                           flushPaint
packages/flutter/src/rendering/binding.dart 604:5                            drawFrame
packages/flutter/src/widgets/binding.dart 1164:13                            drawFrame
packages/flutter/src/rendering/binding.dart 468:5                            [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1397:7                           [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1318:9                           handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1040:9                           <fn>
dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:11      internalCallback
The following RenderObject was being processed when the exception was fired: RenderSemanticsAnnotations#42b90
...  needs compositing
...  parentData: <none> (can use size)
...  constraints: BoxConstraints(w=366.0, h=712.0)
...  size: MISSING
RenderObject: RenderSemanticsAnnotations#42b90
  needs compositing
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=366.0, h=712.0)
  size: MISSING
...  child: RenderRepaintBoundary#84c90 NEEDS-PAINT
...    needs compositing
...    parentData: <none> (can use size)
...    constraints: BoxConstraints(w=366.0, h=712.0)
...    layer: OffsetLayer#fd9cc DETACHED
...      handles: 1
...      offset: Offset(0.0, 0.0)
...    size: MISSING
...    metrics: 0.0% useful (4 bad vs 0 good)
...    diagnosis: insufficient data to draw conclusion (less than five repaints)
...    child: RenderAnimatedOpacity#f5c86 NEEDS-PAINT
...      needs compositing
...      parentData: <none> (can use size)
...      constraints: BoxConstraints(w=366.0, h=712.0)
...      size: MISSING
...      opacity: AnimationController#5d3d0(⏭ 1.000; paused; for PageRouteBuilder<dynamic>)➩ProxyAnimation
...      child: RenderIgnorePointer#9e2f0 NEEDS-PAINT
...        needs compositing
...        parentData: <none> (can use size)
...        constraints: BoxConstraints(w=366.0, h=712.0)
...        size: MISSING
...        ignoring: false
...        ignoringSemantics: null
...        child: RenderRepaintBoundary#f597e NEEDS-PAINT
...          needs compositing
...          parentData: <none> (can use size)
...          constraints: BoxConstraints(w=366.0, h=712.0)
...          size: MISSING
...          usefulness ratio: no metrics collected yet (never painted)

The content of file file:///(path_to_the_project_root)/lib/main.dart:56:36:

55    return MaterialApp(
56      builder: (context, child) => FTheme(data: themeData, child: child!),
57      home: const Homepage(),
58    );

To Reproduce Simply use a FTextField that is wrapped by a Row, it can get crashed.

Expected behavior The FTextField should be successfully wrapped by a Row.

Device (please complete the following information):

Pante commented 6 days ago

A FTextField cannot have an unbound width as it will try to occupy as much horizontal space as it is given. This is similar to Flutter's inbuilt TextField.

To fix this, you can wrap the FTextField in either an Expanded or a SizedBox.

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<StatefulWidget> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) => const Row(
        children: [
          Text('Username'),
          Expanded(child: FTextField()),
        ],
      );
}
FoliageOwO commented 6 days ago

@Pante This is exactly what I want! I'm a newbie to Flutter, so I don't know so much. Thanks a lot :)

Pante commented 6 days ago

No problem, glad it helped!