iOS模拟器中Flutter搜索框引发布局无限大小错误

在iOS模拟器运行Flutter应用时，所有文本框（包括通过showSearch()实现的搜索框）均无法正常显示，同时抛出大量错误信息。核心错误提示：

performLayout期间RenderRepaintBoundary被赋予无限大小，且InputDecorator子组件报告负基线偏移

相关代码 #

showPlaceSearch(BuildContext context){
  showSearch(
    delegate: PlaceSearchDelegate(),
    context: context
  );
}

class PlaceSearchDelegate extends SearchDelegate{
  final googlePlace = GooglePlace(GlobalConfiguration().getValue('GOOGLE_API_KEY'));

  @override
  final String? searchFieldLabel = "Recherche un lieu";

  @override
  ThemeData appBarTheme(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    return theme.copyWith(
        inputDecorationTheme: const InputDecorationTheme(
          border: InputBorder.none,
          focusedBorder: InputBorder.none,
          errorBorder: InputBorder.none,
          enabledBorder: InputBorder.none,
          hintStyle: TextStyle(
            color: Colors.black54,
            fontWeight: FontWeight.w500,
            fontSize: 16
          ),
          labelStyle: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.w500,
            fontSize: 16
          ),
          floatingLabelStyle: TextStyle(
            color: Colors.white
          ),
        ),
        appBarTheme: const AppBarTheme(
          backgroundColor: AppColors.primaryColor,
        ),
        scaffoldBackgroundColor: Colors.white
    );
  }

  @override
  List<Widget> buildActions(BuildContext context) {
    return [
      IconButton(
        icon: Icon(Icons.clear),
        onPressed: () {
          query = '';
        },
      ),
    ];
  }

  @override
  Widget buildLeading(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {
        close(context, null);
      },
    );
  }

  @override
  Widget buildResults(BuildContext context) {
    return FutureBuilder(
      future: googlePlace.queryAutocomplete.get(query, language: "fr"),
      builder: (context, AsyncSnapshot<AutocompleteResponse?> snapshot){
        //....
      },
    );
  }

  @override
  Widget buildSuggestions(BuildContext context) {
    return FutureBuilder(
      future: googlePlace.autocomplete.get(query, region: "CI", language: "FR"),
      builder: (context, AsyncSnapshot<AutocompleteResponse?> snapshot){
       //....
      },
    );
  }
}

解决方案 #

• 修复InputDecorator布局约束
  在inputDecorationTheme中添加明确的contentPadding，避免因无边框导致的基线计算错误：

  inputDecorationTheme: const InputDecorationTheme(
    border: InputBorder.none,
    focusedBorder: InputBorder.none,
    errorBorder: InputBorder.none,
    enabledBorder: InputBorder.none,
    // 添加垂直内边距，确保输入框有足够空间
    contentPadding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
    hintStyle: TextStyle(
      color: Colors.black54,
      fontWeight: FontWeight.w500,
      fontSize: 16
    ),
    // 其他样式保持不变
  ),
  

• 给FutureBuilder添加约束容器
  buildResults和buildSuggestions返回的FutureBuilder没有明确的大小约束，导致渲染时出现无限空间错误，外层包裹Container或ListView：

  @override
  Widget buildResults(BuildContext context) {
    return Container(
      constraints: const BoxConstraints.expand(),
      child: FutureBuilder(
        future: googlePlace.queryAutocomplete.get(query, language: "fr"),
        builder: (context, AsyncSnapshot<AutocompleteResponse?> snapshot){
          // 原有逻辑，确保返回的子组件有正确布局
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data?.predictions.length ?? 0,
              itemBuilder: (context, index) {
                return ListTile(title: Text(snapshot.data!.predictions[index].description!));
              },
            );
          } else if (snapshot.hasError) {
            return const Center(child: Text("Erreur de recherche"));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
  

• 清理缓存并重启环境
  执行flutter clean清除项目缓存，然后重启iOS模拟器和Flutter应用，避免模拟器渲染缓存导致的异常。

• 检查颜色定义
  确认AppColors.primaryColor是有效的Color实例，避免因颜色值错误导致的AppBar渲染异常，间接影响输入框布局。

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