`.shrink()` does not catch childrens size.

[RoarGronmo]

Hi! According to our discussion here: #52

I anticipated that in this setup:

class CustomerPage extends StatefulWidget{
  final GlobalKey mPortalScreenKey;
  const CustomerPage({
    super.key, required this.mPortalScreenKey
  });

  @override
  State<CustomerPage> createState() => _CustomerPageState();
}

class _CustomerPageState extends State<CustomerPage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: [
        Expanded(
          child: Column(
            children: [
              Expanded(
                child: ResizableContainer(
                    direction: Axis.horizontal,
                    /*
                    divider: ResizableDivider(
                      thickness: 5,
                      length: ResizableSize.ratio(0.75)
                    ),*/
                    children: [
                      ResizableChild(
                        divider: ResizableDivider(thickness: 5, length: ResizableSize.ratio(0.75)),
                        child: MPortalMap(mPortalScreenKey: widget.mPortalScreenKey,),
                        size: const ResizableSize.ratio(0.5),
                        //minSize: 200
                      ),
                      ResizableChild(
                        child: Center(
                          child: ResizableContainer(
                            direction: Axis.vertical,

                            children: [
                              ResizableChild(
                                divider: ResizableDivider(
                                    thickness: 5,
                                    length: ResizableSize.ratio(0.75)
                                ),
                                child: CustomerInfoCard(),
                                //size: ResizableSize.shrink(),
                                size: ResizableSize.shrink(),
                                //minSize: 100
                              ),
                              ResizableChild(
                                child: CustomerContactsCard(),
                                size:ResizableSize.expand()
                              )
                            ],
                          ),
                        ),
                        //minSize: 500
                      )
                    ]
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

the shrink() "parameter" for CustomerInfoCard above would shrink the ResizeableChild around the CustomerInfoCard and take its actual size into consideration, but it doesn't.

Am I missing something ?

CustomerInfoCard looks like this, the height of this Card might vary according to what happens inside and what data is presented.

class CustomerInfoCard extends StatelessWidget{
  const CustomerInfoCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(child: SingleChildScrollView(
          child: StreamBuilder(
            stream: globals.mPortalDatabase.getSelectedCustomer(SettingKey.userSelectionSelectedCustomer).watchSingleOrNull(),
            builder: (context, snapshot) {
              if(snapshot.hasError){
                return Card(
                  color: Colors.red,
                  child: Padding(
                    padding: const EdgeInsets.all(4.0),
                    child: Text(snapshot.error.toString(), style: TextStyle(color: Colors.yellow),),
                  ),
                );
              }

              if(snapshot.connectionState==ConnectionState.waiting){
                return const LinearProgressIndicator();
              }

              if(snapshot.hasData){
                var selectedCustomer = snapshot.data;
                if(selectedCustomer!=null){
                  return Card(
                    child: Padding(
                      padding: const EdgeInsets.all(4.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(4.0),
                            child: Text(AppLocalizations.of(context).customerInfoCardCustomerInformation, style: TextStyle(fontWeight: FontWeight.bold),),
                          ),
                          Divider(),
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.custNo.toString()),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardCustomerNo)
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.actNo.toString()),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardActorNo)
                                    ),
                                  ),
                                ),
                              ),

                              Expanded(
                                flex: 2,
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.bsNo.toString()),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardBizNo)
                                    ),
                                  ),
                                ),
                              ),

                            ],
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.nm),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardCustomerName)
                                    ),
                                  ),
                                ),
                              ),

                            ],
                          ),

                          Row(
                            children: [
                              Expanded(
                                flex: 3,
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: "${[null,""," "].contains(selectedCustomer.ad1)?"":selectedCustomer.ad1}"
                                                                            "${((![null,""," "].contains(selectedCustomer.ad2))&&(![null,""," "].contains(selectedCustomer.ad1)))?"\n":""}"
                                                                            "${[null,""," "].contains(selectedCustomer.ad2)?"":selectedCustomer.ad2}"),
                                    readOnly: true,
                                    maxLines: null,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardBillingAddress)
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 1,
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.pNo),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardZIP)
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 2,
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.pArea.toString()),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardPlace)
                                    ),
                                  ),
                                ),
                              ),

                            ],
                          ),
                          Row(
                            children: [
                              Expanded(
                                flex:2,
                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.mailAd.toString()),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardMail)
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(

                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.phone),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardPhone)
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(

                                child: Padding(
                                  padding: const EdgeInsets.all(4.0),
                                  child: TextField(
                                    controller: TextEditingController(text: selectedCustomer.mobPh),
                                    readOnly: true,
                                    decoration: InputDecoration(
                                        border: OutlineInputBorder(),
                                        label: Text(AppLocalizations.of(context).customerInfoCardAltPhone)
                                    ),
                                  ),
                                ),
                              ),

                            ],
                          ),
                        ],
                      ),
                    ),
                  );
                }

              }

              return Card(
                color: Colors.amber,
                child: Center(child: Padding(
                  padding: const EdgeInsets.all(4.0),
                  child: Text(AppLocalizations.of(context).customerInfoCardCustomerNotAvailable),
                ),),
              );


            }
          ),
        ))
      ],
    );

  }

}

[andyhorn]

It's hard to tell without an example I can run myself, but I would guess what is happening is that the "shrink" logic is executing before the CustomerInfoCard has reached its final state (snapshot.hasData == true).

I'm using a custom MultiChildRenderObject(Widget) to perform the initial layout. For children with a "shrink" size, it calls the RenderBox.getMinIntrinsicWidth method to find its necessary size. I'd have to dig into the framework some more to understand exactly how this method calculates the size, but that's probably where this is failing to account for changing sizes with a StreamBuilder - I imagine it would have similar issues with a FutureBuilder.

[andyhorn]

I've tried this out on my own and can confirm my suspicion (using a FutureBuilder, but I assume it's the same for StreamBuilder).

I've tried using SizeChangedLayoutNotifier and NotificationListener<SizeChangedLayoutNotification>, but haven't had any luck. Even when doing a manual resize of the frame, it doesn't trigger. I'll keep looking.

[andyhorn]

I don't think there's going to be a way to allow FutureBuilder/StreamBuilder or other asynchronous "builders" to trigger a size update using .shrink from within the child.

I think the best option would be to wrap the ResizableContainer inside your future/stream builder to trigger a rebuild. There are a couple kinks I need to work out to ensure this works smoothly.

For example, something like:

FutureBuilder(
  future: myFutureValue,
  builder: (context, snapshot) {
    ResizableContainer(
      direction: Axis.horizontal,
      children: [
        ResizableChild(
          size: const ResizableSize.shrink(),
          child: snapshot.hasData ? MyWidget(snapshot.data) : const CircularProgressIndicator(),
        ),
        const ResizableChild(
          size: ResizableSize.expand(),
          child: MyOtherWidget(),
        ),
      ],
    ),
  },
),

Update: I looked at your example again and realize my example might not be too helpful. Somehow, you'll need to trigger a rebuild of the parent ResizableContainer when the child's size changes. My personal approach would be to pull the StreamBuilder up a level and pass it into your CustomerCard while using a UniqueKey on the card widget.

[andyhorn]

@RoarGronmo I've published a new version (4.1.0) to pub.dev - let me know if this new version and the technique above resolve your issue! 👍

[RoarGronmo]

Hi Andy.

Sorry to say that I am not being able to test the scenario because flutter_resizable_container is stuck in v4.0.0-beta3 for that particular project where I have used it and come upon the issue because of several dependency restrains.

BTW: I am into "ship-shaping" two other projects to use flutter_resizable_container because it is so handy for us. I will see if I can provoke a similar scenario on them with the latest version.