[Bug]: ApiVideoCameraPreview as Column element causes Exception: BoxConstraints forces an infinite height

[kaz080]

Version

v1.2.0

Which operating systems have you used?

• [ ] Android
• [X] iOS

Environment that reproduces the issue

• iPhone (13 Pro / 17.5.1)
• Flutter 3.19.1

Is it reproducible in the example application?

Yes

RTMP Server

none

Reproduction steps

I want the camera preview to remain full screen when the keyboard is opened, so I put it inside a SingleChildScrollView.

Replace example with the following to reproduce: https://github.com/apivideo/api.video-flutter-live-stream/blob/32b9f4c6e0913c1775b1f6467bd5625e3dace469/example/lib/main.dart#L113

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Live Stream Example'),
        actions: <Widget>[
          PopupMenuButton<String>(
            onSelected: (choice) => _onMenuSelected(choice, context),
            itemBuilder: (BuildContext context) {
              return Constants.choices.map((String choice) {
                return PopupMenuItem<String>(
                  value: choice,
                  child: Text(choice),
                );
              }).toList();
            },
          )
        ],
      ),
      body: SafeArea(
        child: Stack(
          children: [
            SingleChildScrollView(
              child: Column(
                children: [
                  ApiVideoCameraPreview(controller: _controller),
                ],
              ),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: const EdgeInsets.only(left: 16, right: 128),
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Enter text',
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.only(bottom: 16.0),
                child: _controlRowWidget(),
              ),
            ),
          ],
        ),
      ),
    );
  }

Expected result

The width is fixed and it would be good if the height is also adjusted automatically.

Actual result

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderFittedBox's layout() function by the following function, which probably computed the invalid constraints in question:
  RenderConstrainedBox.performLayout (package:flutter/src/rendering/proxy_box.dart:280:14)
The offending constraints were: BoxConstraints(w=390.0, h=Infinity)

Additional context

• To avoid the error, ApiVideoCameraPreview() needs to be wrapped with AspectRatio(aspectRatio: 9 / 16). However, when the device is in landscape orientation, the aspectRatio becomes incorrect.
• Since we are getting videoSize and orientation inside ApiVideoCameraPreview, could we put the AspectRatio inside and build with the appropriate aspectRatio?

Relevant logs output

No response

[ThibaultBee]

Hi,

You don't say anything about the fit parameters of ApiVideoCameraPreview. Have you tried to play with that? Also, have you look for this error on stackoverflow?

[kaz080]

Hi @ThibaultBee!

Yes, I tried fit parameter for all types, but no luck.

Also I've look for this error on stackoverflow, e.g. https://stackoverflow.com/questions/52442724/boxconstraints-forces-an-infinite-width

As far as I tried, wrapping AspectRatio or SizedBox avoids this error.

(Also, this problem did not occur when I use version 1.0.7.)

[ThibaultBee]

Do you have the same issue on Android?

[ThibaultBee]

Have you tried Expanded or Flexible?

[kaz080]

Yes. Expanded results another exception: RenderFlex children have non-zero flex but incoming height constraints are unbounded. Flexible also results RenderFlex children have non-zero flex but incoming height constraints are unbounded.

We don't have Android device now...

[ThibaultBee]

So the preview is trying to occupy the most space inside its container. If one of the dimension of this container is infinite it will create such issue. Putting the ApiVideoCameraPreview is a SizedBox that adds a constraint where the dimension is infinite will fix your issue (the height in your case).

SingleChildScrollView(
    child: Column(
      children: [
        SizedBox(
          height: 300,
          child:
              ApiVideoCameraPreview(controller: _controller, fit: BoxFit.fitWidth),
        )
      ],
  ),
),

[ThibaultBee]

I also made a fix so it is not the case anymore. Could you test https://github.com/apivideo/api.video-flutter-live-stream/pull/58?