my provider is not found, when I use selector - flutter

Question

I run the below code using consumer and provider and it worked smoothly but when I add selector it geive me an error,
the error:
Error: Could not find the correct Provider above this Selector<SignInUpProvider, int> Widget
This happens because you used a BuildContext that does not include the provider
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';
import 'providers/sign_in_up_provider.dart';
import 'utilities/myColors.dart' ;
class SigInUpPage extends StatefulWidget {
const SigInUpPage({Key? key}) : super(key: key);
#override
_SigInUpPageState createState() => _SigInUpPageState();
}
class _SigInUpPageState extends State<SigInUpPage> {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider(create: (context)=> SignInUpProvider(),
child: const SignInUpScreen(),);
}
}
class SignInUpScreen extends StatefulWidget {
const SignInUpScreen({Key? key}) : super(key: key);
#override
_SignInUpScreenState createState() => _SignInUpScreenState();
}
class _SignInUpScreenState extends State<SignInUpScreen> {
// determine the sign in or sign up screen!!
// 0 = sign up , 1 = sign in
// sign up contents
// final GlobalKey<FormState> _keySignUp = GlobalKey<FormState>();
final TextEditingController _nameSignUp = TextEditingController();
final TextEditingController _passSignup = TextEditingController();
final TextEditingController _emailSignUp = TextEditingController();
// sign in contents
final GlobalKey<FormState> _keySignIn = GlobalKey<FormState>();
final TextEditingController _emailSignIn = TextEditingController();
final TextEditingController _passSifnIn = TextEditingController();
#override
void dispose() {
_nameSignUp.dispose();
_passSifnIn.dispose();
_passSignup.dispose();
_emailSignIn.dispose();
_emailSignUp.dispose();
// TODO: implement dispose
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.white,
child: Stack(
children: [
// dummy design
firstScreen(context),
// dummy design
secondScreen(context),
// sign in screen
thirdScreen(context),
],
),
),
);
}
// first background in stack
Widget firstScreen(BuildContext context){
return
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color:MyColors.blueColor(),
);
}
// second background in stack
Widget secondScreen(BuildContext context){
return Align(
alignment: Alignment.bottomRight,
child: Container(
decoration: BoxDecoration(
color: MyColors.purple(),
borderRadius: const BorderRadius.only(bottomLeft:Radius.circular(1000),
topLeft: Radius.circular(1000)
)
),
width: MediaQuery.of(context).size.width * 0.5,
height: MediaQuery.of(context).size.height,
),
);
}
// sign in up screen // the white box
Widget thirdScreen(BuildContext context){
return Align(alignment: Alignment.bottomCenter,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
margin: EdgeInsets.only(bottom: MediaQuery.of(context).size.height*0.1),
width: MediaQuery.of(context).size.width*0.7,
height: MediaQuery.of(context).size.height*0.7,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50))),
child: Selector<SignInUpProvider, int>(
selector: (context, userState) => userState.getUserState,
builder: (context, state, widget){
return Form(
key: _keySignIn,
child: (state == 0 )?
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
logo(context),
nameBox(context),
emailBox(context),
passText(context),
signButton(context),
// this to change between sign in and sign up
changeState(context),
],
):
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
logo(context),
emailBox(context),
passText(context),
signButton(context),
// this to change between sign in and sign up
changeState(context),
],
),
);
}
),
),
),
);
}
// the logo inside the white box
Widget logo(context) {
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50))
),
width: MediaQuery.of(context).size.width*0.7,
height: MediaQuery.of(context).size.height*0.1,
child: const Align(
alignment: Alignment.center,
child: Text("mekyajat",style: TextStyle(
fontStyle: FontStyle.italic,
fontSize: 16,
color: Color.fromRGBO(249, 229, 230, 1),
),)),
);
}
// name box
Widget nameBox(context){
return Container(
width: MediaQuery.of(context).size.width*0.55,
height: MediaQuery.of(context).size.height*0.1,
decoration: const BoxDecoration(
color: Colors.white70,
),
child: TextFormField(
controller:_nameSignUp ,
decoration: const InputDecoration(
icon: Icon(Icons.person),
hintText: "name",
hintStyle: TextStyle(
color: Colors.black12,
fontSize: 14
),
),
textAlign: TextAlign.center,
validator: (value){
if( value.toString().length < 8 ){
Fluttertoast.showToast(msg: "please insert your name \n more than 8 charecters",
gravity: ToastGravity.CENTER,
toastLength: Toast.LENGTH_SHORT,
backgroundColor: Colors.redAccent,
textColor: Colors.white,
fontSize: 16
);
} return null ;
},
),
);
}
Widget emailBox(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width*0.55,
height: MediaQuery.of(context).size.height*0.1,
decoration: const BoxDecoration(
color: Colors.white70,
),
child: TextFormField(
controller:(context.read<SignInUpProvider>().getUserState
== 0) ? _emailSignUp : _emailSignIn ,
decoration: const InputDecoration(
icon: Icon(Icons.email_outlined),
hintText: "E-mail #",
hintStyle: TextStyle(
color: Colors.black12,
fontSize: 14
),
),
textAlign: TextAlign.center,
validator: (value){
if( value.toString().length < 10 ){
Fluttertoast.showToast(msg: "please insert your email \n ",
gravity: ToastGravity.CENTER,
toastLength: Toast.LENGTH_SHORT,
backgroundColor: Colors.redAccent,
textColor: Colors.white,
fontSize: 16
);
}
else if (!containSymbol(value.toString(), "#")){
return "please insert # symbol";
}
return null ;
},
),
);
}
Widget passText(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width*0.55,
height: MediaQuery.of(context).size.height*0.1,
decoration: const BoxDecoration(
color: Colors.white70,
),
child: TextFormField(
controller:(context.read<SignInUpProvider>().getUserState ==0)? _passSignup :_passSifnIn ,
decoration: const InputDecoration(
icon: Icon(Icons.password_sharp),
hintText: "password",
hintStyle: TextStyle(
color: Colors.black12,
fontSize: 14
),
),
textAlign: TextAlign.center,
validator: (value){
if( value.toString().length < 8 ){
Fluttertoast.showToast(msg: "please insert your password \n more than 8 charecters",
gravity: ToastGravity.CENTER,
toastLength: Toast.LENGTH_SHORT,
backgroundColor: Colors.redAccent,
textColor: Colors.white,
fontSize: 16
);
} return null ;
},
),
);
}
Widget signButton(BuildContext context) {
return Selector<SignInUpProvider, int>(
selector: (context,userState)=> userState.getUserState,
builder: (context, currentState, widget){
return InkWell(
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width*0.40,
height: MediaQuery.of(context).size.height*0.06,
child: (currentState == 0 )?
const Text("SIGN UP", textAlign: TextAlign.center,style: TextStyle(color: Colors.white),):
const Text("SIGN IN",textAlign: TextAlign.center, style: TextStyle(color: Colors.white),),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(25)),
gradient: LinearGradient(colors: [
MyColors.blueColor(),
MyColors.purple(),
]),
),
),
onTap: (){},
);
},
);
}
Widget changeState(BuildContext context) {
return Consumer<SignInUpProvider>(
builder: (context, userSt , widget){
return InkWell(
child: SizedBox(
width: MediaQuery.of(context).size.width*0.55,
height: MediaQuery.of(context).size.height*0.05,
child:(userSt.userState == 0)?
const Text("sign in",
textAlign: TextAlign.right,
style: TextStyle(color:Color.fromRGBO(205, 221, 232, 1),fontSize: 12,
),) :
const Text("sign up",
textAlign: TextAlign.right,
style: TextStyle(
color:Color.fromRGBO(205, 221, 232, 1),fontSize: 12,
),)
),
onTap: (){
userSt.changeUserState(userSt.userState);
// SignInUpProvider().changeUserState(userState);
// signProvider.changeUserState(signProvider.userState);
},
);
},
);
}
}
// provide this function with one char and one string
// this run to see if the string contains char or not
bool containSymbol(String fullString , String char){
bool _result = false ;
List<String> _chars = [];
int _stringLingth = fullString.length;
int _keyLoop = 0 ;
while (_keyLoop < _stringLingth){
_chars.add(fullString[_keyLoop]);
_keyLoop++;
}
for(int x = 0 ; x < _chars.length; x++){
if(_chars[x] == char){
_result = true;
break;
}
}
return _result;
}

Answer 1

1 - move up your ChangeNotifierProvider step above in the widget tree for example in the routes you can wrap the SigInUpPage like this :
ChangeNotifierProvider<SignInUpProvider>(
create: (_) => SignInUpProvider(),
child: SigInUpPage(),
),
2 - don't pass the context as a parameter to the other screens,use a builder in each screen like this for the second screen:
class secondScreen extends StatelessWidget {
const secondScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
margin: EdgeInsets.only(bottom: MediaQuery.of(context).size.height*0.1),
width: MediaQuery.of(context).size.width*0.7,
height: MediaQuery.of(context).size.height*0.7,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(50))),
child: Selector<SignInUpProvider, int>(
selector: (context, userState) => userState.getUserState,
builder: (context, state, widget){
return Form(
key: _keySignIn,
child: (state == 0 )?
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
logo(context),
nameBox(context),
emailBox(context),
passText(context),
signButton(context),
// this to change between sign in and sign up
changeState(context),
],
):
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:
[
logo(context),
emailBox(context),
passText(context),
signButton(context),
// this to change between sign in and sign up
changeState(context),
],
),
);
}
),
),
),
);
}
}
this should work