I am trying to create a floating search bar for my flutter application and it is throwing me the following exception:

Exception has occurred.
FlutterError (BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the following function, which probably computed the invalid constraints in question:
  RenderBox.layout (package:flutter/src/rendering/box.dart:2430:11)
The offending constraints were:
  BoxConstraints(w=411.4, h=Infinity))

The following is the function code and the body of the view I am trying to display it in, respectivly:

Widget buildFloatingSearchBar(BuildContext context) {
  final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

  return FloatingSearchBar(
    hint: 'Search...',
    scrollPadding: const EdgeInsets.only(top: 16, bottom: 56),
    transitionDuration: const Duration(milliseconds: 800),
    transitionCurve: Curves.easeInOut,
    physics: const BouncingScrollPhysics(),
    axisAlignment: isPortrait ? 0.0 : -1.0,
    openAxisAlignment: 0.0,
    width: isPortrait ? 600 : 500,
    debounceDelay: const Duration(milliseconds: 500),
    onQueryChanged: (query) {
      // Call your model, bloc, controller here.
    },
    // Specify a custom transition to be used for
    // animating between opened and closed stated.
    transition: CircularFloatingSearchBarTransition(),
    actions: [
      FloatingSearchBarAction(
        showIfOpened: false,
        child: CircularButton(
          icon: const Icon(Icons.place),
          onPressed: () {},
        ),
      ),
      FloatingSearchBarAction.searchToClear(
        showIfClosed: false,
      ),
    ],
    builder: (context, transition) {
      return ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Material(
          color: Colors.white,
          elevation: 4.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: Colors.accents.map((color) {
              return Container(height: 112, color: color);
            }).toList(),
          ),
        ),
      );
    },
  );
}

the body:

body: SingleChildScrollView(
        //scroll widget

        child: Column(
          children: [
            Stack(
              fit: StackFit.expand,
              //stack widgets on top of each other
              children: <Widget>[
                Image.asset(
                  //loads an image on to the app
                  'images/map.png',
                ),
                SizedBox(
                  //a box of dimensions 400x400 and an x-y scale of 200 starting from the top left and going downwards and right
                  width: 400,
                  height: 400,

                  child: CustomPaint(
                    //paint
                    painter: LocationCircles(),
                  ),
                ),
                buildFloatingSearchBar(context),
              ],
            ),
          ],
        ),
      ),

I tried putting the buildFloatingSearchBar function inside a Flexible() widget but that didn't work either

2

There are 2 answers

0
Laith Alfar On BEST ANSWER

This is what eventually worked for me inside a Stack() widget.

   SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width * 0.95,
                        height: MediaQuery.of(context).size.height * 0.14,
                        child: buildFloatingSearchBar(context),
                      ),
                    ),

Keep in mind that this is implementing a widget using the material_floating_search_bar library.

0
max On

Try using singleChildScroll View , it ll allow to expand

body: Column(
  children: [
    Expanded(
      child: SingleChildScrollView(
        child: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Image.asset(
              'images/map.png',
            ),
            SizedBox(
              width: 400,
              height: 400,
              child: CustomPaint(
                painter: LocationCircles(),
              ),
            ),
          ],
        ),
      ),
    ),
    buildFloatingSearchBar(context),
  ],
),