Scrollable.of() was called with a context that does not contain a Scrollable widget

Question

currently using typeAhead widget to query some parameters, after the recent flutter 3 update i keep getting this error

Scrollable.of() was called with a context that does not contain a Scrollable widget. This is the widget where the error is pointing

@override
  @mustCallSuper
  Widget build(BuildContext context) {
    String placeAddress =
        Provider.of<AppData>(context).pickUpLocation!.placeName ?? "";
    pickUpTextEditingController.text = placeAddress;

    return WillPopScope(
      onWillPop: () {
        if (dropOffTextEditingController.text.isNotEmpty) {
          Navigator.pop(context, true);
          return Future.value(true);
        } else {
          Navigator.pop(context, false);
          return Future.value(false);
        }
    
      },
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        body: Stack(
          children: [
            Container(
              height: 280.0,
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.black,
                    blurRadius: 6.0,
                    spreadRadius: 0.5,
                    offset: Offset(0.7, 0.7),
                  )
                ],
              ),
              child: Padding(
                padding: EdgeInsets.only(
                    left: 25.0, top: 30.0, right: 25.0, bottom: 20.0),
                child: Column(
                  children: [
                    SizedBox(height: 5.0),
                    Stack(
                      children: [
                        GestureDetector(
                            onTap: () async {
                              FocusScopeNode currentFocus =
                                  FocusScope.of(context);
                              if (!currentFocus.hasPrimaryFocus) {
                                currentFocus.unfocus();
                              }
                              dropOffTextEditingController.text.isNotEmpty
                                  ? Navigator.pop(context, true)
                                  : Navigator.pop(context, false);
                            },
                            child: Icon(Icons.arrow_back)),
                        Center(
                          child: Text(
                            "Choose your drop off ",
                            style: TextStyle(
                                fontSize: 18.0, fontFamily: "Brand-Bold"),
                          ),
                        )
                      ],
                    ),
                    SizedBox(height: 16.0),
                    Row(
                      children: [
                        Image.asset("images/images/pickicon.png",
                            height: 16.0, width: 16.0),
                        SizedBox(width: 18.0),
                        Expanded(
                            child: Container(
                          decoration: BoxDecoration(
                            color: Colors.grey[400],
                            borderRadius: BorderRadius.circular(5.0),
                          ),
                          child: Padding(
                            padding: EdgeInsets.all(3.0),
                            child: TextField(
                              controller: pickUpTextEditingController,
                              decoration: InputDecoration(
                                hintText: "PickUp Location",
                                fillColor: Colors.grey[400],
                                filled: true,
                                border: InputBorder.none,
                                isDense: true,
                                contentPadding: EdgeInsets.only(
                                    left: 11.0, top: 8.0, bottom: 8.0),
                              ),
                            ),
                          ),
                        ))
                      ],
                    ),
                    SizedBox(height: 10.0),
                    Row(
                      children: [
                        Image.asset("images/images/desticon.png",
                            height: 16.0, width: 16.0),
                        SizedBox(width: 18.0),
                        Expanded(
                          child: Container(
                            //error points here
                            decoration: BoxDecoration(
                              color: Colors.grey[400],
                              borderRadius: BorderRadius.circular(5.0),
                            ),
                            child: Padding(
                              padding: EdgeInsets.all(3.0),
                              child: TypeAheadField(
                                textFieldConfiguration: TextFieldConfiguration(
                                  autofocus: false,
                                  maxLines: 1,
                                  controller: dropOffTextEditingController,
                                  decoration: InputDecoration(
                                    contentPadding: EdgeInsets.all(3),
                                    hintText: "Drop off Location",
                                    labelStyle: TextStyle(color: Colors.black),
                                    focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                          width: 1.3, color: Colors.black),
                                    ),
                                    border: OutlineInputBorder(
                                      borderSide: BorderSide(width: 0.8),
                                    ),
                                  ),
                                ),
                                suggestionsCallback: (pattern) async {
                                  //if (pattern.isNotEmpty)
                                  return await addressSuggestion(pattern);
                                  // return Future.value();
                                },
                                suggestionsBoxController:
                                    SuggestionsBoxController(),
                                itemBuilder: (context, dynamic suggestion) {
                                  return ListTile(
                                    leading: Icon(Icons.location_on),
                                    title: Text((suggestion as SearchInfo)
                                        .address!
                                        .name!),
                                    subtitle:
                                        Text((suggestion).address!.country!),
                                  );
                                },
                                onSuggestionSelected: (dynamic suggestion) {
                                  print("xxx $suggestion");

                                  dropOffTextEditingController.text =
                                      (suggestion as SearchInfo).address!.name!;
                                  Provider.of<AppData>(context, listen: false)
                                      .updateDropOffLocationAddress(
                                          dropOffTextEditingController.text);
                                  //get the coordinates here
                                  GeoPoint? dropOffPoint = suggestion.point;
                                  print("Coordinates :$dropOffPoint");
                                  Provider.of<AppData>(context, listen: false)
                                      .updateDropOffGeoPoint(dropOffPoint);

                                  // Navigator.pop(
                                  //     context, widget.showMapFunction(false));
                                },
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),

                    SizedBox(height: 25.0),
                    //create a button with yellow color
                    Padding(
                      padding: EdgeInsets.symmetric(horizontal: 16.0),
                      child: ElevatedButton(
                        onPressed: () {
                          if (dropOffTextEditingController.text.isNotEmpty) {
                            Navigator.pop(context, true);
                          } else {
                            Navigator.pop(context, false);
                          }
                        },
                        child: Text(
                          "Confirm Drop Off",
                          style: TextStyle(fontSize: 18.0),
                        ),
                        style: ElevatedButton.styleFrom(
                          foregroundColor: Colors.black,
                          backgroundColor: Colors.yellow,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(24.0),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

and this is the full error stack

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building Container(bg: BoxDecoration(color: Color(0xffbdbdbd), borderRadius: BorderRadius.circular(5.0))):
Scrollable.of() was called with a context that does not contain a Scrollable widget.

No Scrollable widget ancestor could be found starting from the context that was passed to Scrollable.of(). This can happen because you are using a widget that looks for a Scrollable ancestor, but no such ancestor exists.
The context used was:
  TypeAheadField<SearchInfo>(dirty, state: _TypeAheadFieldState<SearchInfo>#d5046(lifecycle state: initialized))
The relevant error-causing widget was
Container
lib/AllScreens/searchScreen.dart:140
When the exception was thrown, this was the stack
#0      Scrollable.of.<anonymous closure>
package:flutter/…/widgets/scrollable.dart:336
#1      Scrollable.of
package:flutter/…/widgets/scrollable.dart:348
#2      _TypeAheadFieldState.didChangeDependencies (package:flutter_typeahead/src/flutter_typeahead.dart:871:51)

How can I fix it ?

Answer 1

The error was mention on this topic: https://github.com/AbdulRahmanAlHamali/flutter_typeahead/issues/444

Solution: upgrade version to 4.3.3:

flutter_typeahead: ^4.3.3

Answer 2

With the latest flutter I also hit this error. I wrapped the TypeAhead in a SingleChildScrollView and the error was gone.

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: TypeAheadField(