mutation graphql using flutter forms not working - flutter

Question

trying to use mutation on forms but got this error while addins runmutation and queryresult result in builder ().all i get is dead code in vscode
The argument type 'Widget Function(MultiSourceResult Function(Map<String, dynamic>, {Object? optimisticResult}), QueryResult<Object?>)' can't be assigned to the parameter type 'Widget Function(MultiSourceResult<Object?> Function(Map<String, dynamic>, {Object? optimisticResult}), QueryResult
import 'dart:io';
import 'package:country_code_picker/country_code_picker.dart';
import 'package:project/API/Api.dart';
import 'package:project/screens/form_info.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import '../API/querys.dart';
import '../API/mutations.dart';
class Sign_Number extends StatefulWidget {
Sign_Number({Key? key}) : super(key: key);
#override
State<Sign_Number> createState() => _Sign_NumberState();
}
class _Sign_NumberState extends State<Sign_Number> {
var PhoneNumber = "";
void _onCountryChange(CountryCode countryCode) {
this.PhoneNumber = countryCode.toString();
print("new country selected: " + countryCode.toString());
}
TextEditingController phoneNumberhere = TextEditingController();
TextEditingController password = TextEditingController();
void initState() {
super.initState();
_onCountryChange(CountryCode());
this.PhoneNumber = "+20";
}
var _formKey1 = new GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return GraphQLProvider(
client: client,
child: MaterialApp(
home: Container(
height: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.5, 0.5],
colors: <Color>[Color.fromRGBO(0, 37, 43, 1), Colors.white],
tileMode:
TileMode.clamp, // clamp the gradient over the canvas
),
),
child: Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: Colors.transparent,
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Container(Image(
// height: MediaQuery.of(context).size.height *0.5,
// width: 250,
// image: AssetImage('assets/images/2.jpg')),
// ),
Container(
height: 300,
width: 300,
child: const Image(
image: AssetImage(
'assets/images/2.jpg',
),
fit: BoxFit.cover,
),
),
const SizedBox(
//Use of SizedBox
height: 30,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
child: Row(
children: [
const SizedBox(
width: 47,
),
const Text("Enter mobile number for login",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold)),
],
)),
const SizedBox(
//Use of SizedBox
height: 20,
),
Mutation(
options: new MutationOptions(
document: gql(insertUser()),
/// Tell the GraphQL client to fetch the data from
/// the network only and don't cache it
fetchPolicy: FetchPolicy.noCache,
/// Whenever the [Form] closes, this tells the previous [route]
/// whether it needs to rebuild itself or not
onCompleted: (data) =>
Navigator.pop(context, data != null),
),
builder: (QueryResult, RunMutation) {
return Form(
key: _formKey1,
child: Container(
height: 100,
padding: const EdgeInsets.symmetric(
horizontal: 30),
child: Column(children: [
TextFormField(
controller: phoneNumberhere,
autocorrect: true,
keyboardType:
TextInputType.number,
onFieldSubmitted: (value) {},
validator: (value) {
if (value!.isEmpty) {
return 'Enter a valid Phone Number!';
}
return null;
},
decoration: InputDecoration(
prefixIcon: CountryCodePicker(
onChanged: _onCountryChange,
// Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
initialSelection: '+20',
favorite: ['+20', 'EG'],
textStyle: const TextStyle(
color: Colors.black),
showFlag: true,
),
contentPadding:
const EdgeInsets.all(10),
hintText:
'Enter valid phone number...',
hintStyle: const TextStyle(
color: Colors.black),
filled: true,
fillColor: const Color.fromRGBO(
227, 227, 226, 0.2),
enabledBorder:
const OutlineInputBorder(
borderRadius:
BorderRadius.all(
Radius.circular(
12.0)),
borderSide: BorderSide(
color: Colors.white,
width: 2),
),
focusedBorder:
const OutlineInputBorder(
borderRadius:
BorderRadius.all(
Radius.circular(
10.0)),
borderSide: BorderSide(
color: Colors.white),
),
),
),
const SizedBox(
//Use of SizedBox
height: 10,
),
SizedBox(
height: 50,
child: TextFormField(
autofocus: false,
obscureText: true,
controller: password,
autocorrect: true,
keyboardType: TextInputType
.visiblePassword,
onFieldSubmitted: (value) {},
validator: (value) {
if (value!.isEmpty) {
return 'Enter a valid password!';
}
return null;
},
decoration: InputDecoration(
contentPadding:
const EdgeInsets.all(10),
hintText: 'Enter Password.',
hintStyle: const TextStyle(
color: Colors.black),
filled: true,
fillColor:
const Color.fromRGBO(
227, 227, 226, 0.2),
enabledBorder:
const OutlineInputBorder(
borderRadius:
BorderRadius.all(
Radius.circular(
12.0)),
borderSide: BorderSide(
color: Colors.white,
width: 2),
),
focusedBorder:
const OutlineInputBorder(
borderRadius:
BorderRadius.all(
Radius.circular(
10.0)),
borderSide: BorderSide(
color: Colors.white),
),
),
),
),
const SizedBox(
//Use of SizedBox
height: 5,
),
const Text(
"forgot your password?",
style: TextStyle(
color: Color.fromRGBO(
218, 218, 218, 1),
fontSize: 10),
textAlign: TextAlign.left,
),
])));
const SizedBox(
//Use of SizedBox
height: 50,
);
FlatButton(
height: 50,
minWidth: 300,
onPressed: () {
if (_formKey1.currentState!.validate()) {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) =>
MyCustomForm()));
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
ScaffoldMessenger.of(context)
.showSnackBar(
SnackBar(
content:
Text(phoneNumberhere.text)),
);
}
},
color: const Color.fromRGBO(0, 168, 165, 1),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10)),
child: const Text(
"Continue",
style: TextStyle(
color: Colors.white, fontSize: 19),
),
);
},
),
],
)
])))));
}
}```