Issue
I am a beginner in flutter_bloc library pattern, i am trying to signup http post request. I follow all the bloc necessary steps but when i click on Signup button it shows me on the log "Unhandled Exception:BlocProvider.of() called with a context that does not contain a SignupBloc. No ancestor could be found starting from the context that was passed to BlocProvider.of(). This can happen if the context you used comes from a widget above the BlocProvider." Although i have added this Signupbloc in main.dart how to fix this issue.
Main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MultiBlocProvider(providers: [
BlocProvider<RecommendedBloc>(
create: (BuildContext context) => RecommendedBloc(
RecommendedForYouDataService(),
),
),
BlocProvider<CuisineDishesBloc>(
create: (BuildContext context) => CuisineDishesBloc(
BrowseByCuisineDishesDataService(),
),
),
BlocProvider<DetailsBloc>(
create: (BuildContext context) => DetailsBloc(
DetailsDataService(),
),
),
BlocProvider<SearchBloc>(
create: (BuildContext context) => SearchBloc(
AllRestaurantDataService(), SearchRestaurantDataService()),
),
BlocProvider<AllPhotosBloc>(
create: (BuildContext context) =>
AllPhotosBloc(AllPhotosDataService()),
),
BlocProvider<PlacePhotosBloc>(
create: (BuildContext context) =>
PlacePhotosBloc(PlacePhotosDataService()),
),
BlocProvider<FoodPhotosBloc>(
create: (BuildContext context) =>
FoodPhotosBloc(FoodPhotosDataService()),
),
BlocProvider<EventPhotosBloc>(
create: (BuildContext context) =>
EventPhotosBloc(EventPhotosDataService()),
),
BlocProvider<SignupBloc>(
create: (BuildContext context) => SignupBloc(SignUpDataService()),
),
], child: LoginPage()),
);
}
}
SignUpDataService.dart
class SignUpDataService {
Future<SignUp?> makeRequestSignUp(String firstName, String lastName,
String mobileNumber, String password, String gender) async {
var response =
await http.post(Uri.parse('$baseURL/customer/signup'), body: {
"phone_number": mobileNumber,
"password": password,
});
if (response.statusCode == 200) {
final responseString = response.body;
final data = jsonDecode(responseString);
SignUp signUp = SignUp.fromJson(data);
return signUp;
} else {
throw Exception();
}
}
}
Signup_event.dart
@immutable
abstract class SignupEvent {}
class SignUpSubmittedEvent extends SignupEvent {
final String phoneNumber;
final String password;
SignUpSubmittedEvent(this.firstName, this.lastName, this.phoneNumber,
this.password, this.gender);
}
SignupState_state
@immutable
abstract class SignupState {}
class SignupInitialState extends SignupState {}
class SignupLoadingState extends SignupState {}
class SignupSuccessState extends SignupState {
final SignUp data;
SignupSuccessState(this.data);
}
class SignupErrorState extends SignupState {
final String message;
SignupErrorState(this.message);
}
Signup_bloc.dart
class SignupBloc extends Bloc<SignupEvent, SignupState> {
SignUpDataService signUpDataService;
SignupBloc(this.signUpDataService) : super(SignupInitialState());
@override
Stream<SignupState> mapEventToState(
SignupEvent event,
) async* {
if (event is SignUpSubmittedEvent) {
yield SignupLoadingState();
try {
SignUp? signup = await signUpDataService.makeRequestSignUp(
event.phoneNumber,
event.password,
yield SignupSuccessState(signup!);
} catch (e) {
yield SignupErrorState(e.toString());}}}}
Register.dart
class RegisterPage extends StatefulWidget {
const RegisterPage({Key? key}) : super(key: key);
@override
_RegisterPageState createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
bool checkOS = Platform.isIOS;
late bool _passwordVisible;
final TextEditingController mobileNumber = TextEditingController();
final TextEditingController password = TextEditingController();
bool _validate = false;
final _formKey = GlobalKey<FormState>();
String pWord = "";
late List<String> menus;
static late int menuIndex;
late SignupBloc signupBloc;
void submitForm() {
final isValid = _formKey.currentState!.validate();
}
@override
void initState() {
_passwordVisible = false;
super.initState();
}
@override
Widget build(BuildContext context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
return Scaffold(
backgroundColor: TuxedoColor.loginColor,
body: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: Container(
alignment: Alignment.center,
child: Center(
child: Form(
key: _formKey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
decoration: BoxDecoration(
border:
Border.all(color: TuxedoColor.greyColor),
borderRadius: BorderRadius.all(Radius.circular(
5.0) // <--- border radius here
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 10.0,
bottom: 10.0,
left: 10.0,
right: 5.0),
child: Icon(
Icons.arrow_back_ios,
color: TuxedoColor.greyColor,
),
),
),
),
Text(
'Sign Up',
style: TextStyle(
fontSize: 25.0, fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {},
child: Text(
'عربي',
style: TextStyle(
fontSize: 20.0, fontWeight: FontWeight.bold),
),
)
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 35.0),
child: TextFormField(
controller: mobileNumber,
keyboardType: TextInputType.phone,
decoration: new InputDecoration(
fillColor: TuxedoColor.textFieldColor,
filled: true,
hintText: "Mobile Number",
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: TuxedoColor.greyColor)),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: TuxedoColor.greyColor)),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 30.0),
child: TextFormField(
keyboardType: TextInputType.visiblePassword,
controller: password,
obscureText: !_passwordVisible,
onChanged: (value) => pWord = value,
decoration: new InputDecoration(
suffixIcon: IconButton(
icon: Icon(
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
),
onPressed: () {
setState(() {
_passwordVisible = !_passwordVisible;
});
},
),
fillColor: TuxedoColor.textFieldColor,
filled: true,
hintText: "Password",
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: TuxedoColor.greyColor)),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: TuxedoColor.greyColor))),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0,
right: 15.0,
),
child: ConstrainedBox(
constraints:
BoxConstraints.tightFor(height: height * 0.065),
child: ElevatedButton(
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
TuxedoColor.redColor),
),
onPressed: () async {
submitForm();
final fName = firstName.text;
final lName = lastName.text;
final mNumber = mobileNumber.text;
final pass = password.text;
final gen = gender.toString();
signupBloc = BlocProvider.of<SignupBloc>(context)
..add(SignUpSubmittedEvent(
mNumber, pass)); //On this line getting error
},
child: Text(
'SignUp',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: TuxedoColor.blackColor),
)),
),
),
],
),
)
],
),
),
),
),
),
),
);
}
}
Solution
You should swap MaterialApp and MultiBlocProvider.
Bloc provider must be on top of MaterialApp as suggested in this issue by lib creator Felix.
Answered By – Emir Bostancı
Answer Checked By – Clifford M. (FlutterFixes Volunteer)