Flutter项目集成flutter_typeahead 4.3.1编译失败求助

错误信息 #

Compile failed
../.pub-cache/hosted/pub.dartlang.org/flutter_typeahead-4.3.1/lib/src/flutter_typeahead.dart:898:40: Error: Member not found: 'Scrollable.maybeOf'.
final scrollableState = Scrollable.maybeOf(context);

问题原因 #

Scrollable.maybeOf是Flutter 3.7.0及以上版本新增的API，你的Flutter SDK版本低于该版本，导致无法识别该方法。

解决方案 #

方案1：升级Flutter SDK #

运行命令将Flutter升级到稳定版：

flutter upgrade

升级完成后执行flutter pub get，重新编译项目。

方案2：降级flutter_typeahead版本 #

若不想升级Flutter SDK，可在pubspec.yaml中指定兼容旧SDK的版本，比如4.2.x系列：

dependencies:
  flutter_typeahead: ^4.2.8

执行flutter pub get拉取对应版本即可。

方案3：临时修改包源码（不推荐长期使用） #

找到报错文件../.pub-cache/hosted/pub.dartlang.org/flutter_typeahead-4.3.1/lib/src/flutter_typeahead.dart，将第898行的代码替换为旧版本写法：

final scrollableState = Scrollable.of(context);

注意：该修改会在下次执行flutter pub get时被覆盖，仅作为临时应急方案。

使用flutter_typeahead的代码示例 #

class LocationSearchDialog extends StatelessWidget {
  final GoogleMapController mapController;
  LocationSearchDialog({@required this.mapController});

  @override
  Widget build(BuildContext context) {
    final TextEditingController _controller = TextEditingController();
    return Container(
      margin: EdgeInsets.only(top: ResponsiveHelper.isWeb() ? 80 : 0),
      padding: EdgeInsets.all(Dimensions.PADDING_SIZE_SMALL),
      alignment: Alignment.topCenter,
      child: Material(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimensions.RADIUS_SMALL)),
        child: SizedBox(
          width: Dimensions.WEB_MAX_WIDTH,
          child: TypeAheadField(
            textFieldConfiguration: TextFieldConfiguration(
              controller: _controller,
              textInputAction: TextInputAction.search,
              autofocus: true,
              textCapitalization: TextCapitalization.words,
              keyboardType: TextInputType.streetAddress,
              decoration: InputDecoration(
                hintText: 'search_location'.tr,
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: BorderSide(style: BorderStyle.none, width: 0),
                ),
                hintStyle: Theme.of(context).textTheme.headline2.copyWith(
                  fontSize: Dimensions.fontSizeDefault,
                  color: Theme.of(context).disabledColor,
                ),
                filled: true,
                fillColor: Theme.of(context).cardColor,
              ),
              style: Theme.of(context).textTheme.headline2.copyWith(
                color: Theme.of(context).textTheme.bodyText1.color,
                fontSize: Dimensions.fontSizeLarge,
              ),
            ),
            suggestionsCallback: (pattern) async {
              return await Get.find<LocationController>().searchLocation(context, pattern);
            },
            itemBuilder: (context, PredictionModel suggestion) {
              return Padding(
                padding: EdgeInsets.all(Dimensions.PADDING_SIZE_SMALL),
                child: Row(
                  children: [
                    Icon(Icons.location_on),
                    Expanded(
                      child: Text(
                        suggestion.description,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: Theme.of(context).textTheme.headline2.copyWith(
                          color:Theme.of(context).textTheme.bodyText1.color,
                          fontSize: Dimensions.fontSizeLarge,
                        ),
                      ),
                    ),
                  ],
                ),
              );
            },
            onSuggestionSelected: (PredictionModel suggestion) async {
              Position _position = await Get.find<LocationController>().setLocation(
                suggestion.placeId, suggestion.description, mapController);
              Get.back(result: _position);
            },
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者rogercancode