Flutter使用GraphQL Mutation报No Material widget found错误如何解决？

核心报错修复 #

你遇到的No Material widget found报错是因为TextField属于Material Design组件，必须在父级组件树中存在Material类型的画布组件。你当前将SingleChildScrollView直接作为MaterialApp的home参数值，缺少承载Material组件的容器，最简单的修复方式是给SingleChildScrollView外层套入Scaffold组件，Scaffold默认自带Material画布实现，可以直接满足要求。

附带GraphQL Mutation写法修复 #

你当前的Mutation逻辑还存在两处语法问题，会导致后续接口调用失败：

• 自定义的Mutation字符串不能直接用Dart字符串插值作为占位符，需要使用GraphQL标准的变量声明语法
• 调用insert方法时传入的参数需要和Mutation声明的变量对应，同时要在MutationOptions中声明变量类型

修改后完整可运行代码 #

import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final HttpLink httpLink = HttpLink(
      'https://test.podkadeh.ir/graphql/',
    );
    final ValueNotifier<GraphQLClient> client= ValueNotifier<GraphQLClient>(
        GraphQLClient(
          link: httpLink,
          cache: GraphQLCache(),
        )
    );
    // 将MaterialApp移到外层，避免结构冗余
    return GraphQLProvider(
      client: client,
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  TextEditingController nameController = TextEditingController();
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  // 使用GraphQL标准变量声明语法
  final String createUser = '''
      mutation createUser(\$userInput: UserInput!){
        createUser(userInput: \$userInput){
          Name,
          Email
        }
      }
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 新增Scaffold提供Material画布，解决TextField报错
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            Mutation(
              options: MutationOptions(
                document: gql(createUser),
                // 可选：添加请求完成/错误回调
                onCompleted: (data) => print("请求成功：$data"),
                onError: (error) => print("请求错误：${error.toString()}"),
              ),
              builder:(
                RunMutation insert,
                QueryResult? result,
              ){
                // 补充加载、错误状态展示
                if (result?.isLoading == true) {
                  return const CircularProgressIndicator();
                }
                if (result?.hasException == true) {
                  return Text("请求错误：${result?.exception.toString()}");
                }
                return Column(
                  children: [
                    TextField(
                      decoration: const InputDecoration(hintText: "Name"),
                      controller: nameController,
                    ),
                    const SizedBox(height: 12),
                    TextField(
                      decoration: const InputDecoration(hintText: "Email"),
                      controller: emailController,
                    ),
                    const SizedBox(height: 12),
                    TextField(
                      decoration: const InputDecoration(hintText: "Password"),
                      controller: passwordController,
                      obscureText: true,
                    ),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      child: const Text("Submit"),
                      onPressed:(){
                        // 按Mutation要求的结构传参
                        insert({
                          "userInput": {
                            "Email": emailController.text,
                            "Name" : nameController.text,
                            "Password" : passwordController.text,
                          }
                        });
                      }
                    ),
                    const SizedBox(height: 20),
                    Text(
                      "Result : \n ${result?.data?.toString() ?? "无数据"}",
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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