improper use of a GetX has been detected Flutter - flutter

Question

the improper use of a GetX has been detected. This error is causing me not to load the widget at that point of time. Tried to figure out but still the problem remain. You should only use GetX or Obx for the specific widget. Unable to figure out get x issue that is causing the problem or OBX where to enclose it with. Please help with this scenario.
Thank you.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'specified_books.dart';
import '../pages/styles.dart';
class BookMagazineTapbar extends StatelessWidget {
final String titleText;
const BookMagazineTapbar({Key? key, required this.titleText})
: super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: whiteColor,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(titleText.tr),
],
),
),
body: SpecifiedBooks(
titleText: titleText,
),
);
/*TODO: Below is code for magzines and books, comment scafold from above and uncomment below code to use both if need to use magzines */
// DefaultTabController(
// length: 2,
// child: Scaffold(
// appBar: AppBar(
// elevation: 0,
// backgroundColor: whiteColor,
// title: Row(
// mainAxisAlignment: MainAxisAlignment.center,
// mainAxisSize: MainAxisSize.min,
// children: <Widget>[
// Text(titleText.tr),
// ],
// ),
// bottom: TabBar(
// labelColor: mainColor,
// unselectedLabelColor: greyColor,
// tabs: [
// Tab(
// child: Row(
// mainAxisSize: MainAxisSize.min,
// children: [
// const ImageIcon(AssetImage('assets/book.png')),
// const SizedBox(width: 8),
// Text('books'.tr),
// ],
// ),
// ),
// Tab(
// child: Row(
// mainAxisSize: MainAxisSize.min,
// children: [
// const ImageIcon(AssetImage('assets/magazine.png')),
// const SizedBox(width: 8),
// Text('magazines'.tr),
// ],
// ),
// ),
// ],
// ),
// ),
// body: TabBarView(
// children: [
// SpecifiedBooks(
// titleText: titleText,
// ),
// SpecifiedMagazines(
// titleText: titleText,
// ),
// ],
// ),
// ),
// );
// }
}
}
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:matab/controllers/book_controller.dart';
import 'package:matab/ui/pages/search/search_books.dart';
import 'package:matab/ui/pages/styles.dart';
class SpecifiedBooks extends StatefulWidget {
final String titleText;
const SpecifiedBooks({Key? key, required this.titleText}) : super(key: key);
#override
State<SpecifiedBooks> createState() => _SpecifiedBooksState();
}
class _SpecifiedBooksState extends State<SpecifiedBooks> {
#override
Widget build(BuildContext context) {
final BookController bookController = Get.find(tag: 'bookController');
return SingleChildScrollView(
child: RefreshIndicator(
onRefresh: bookController.refreshList,
backgroundColor: mainColor,
color: Colors.white,
child: Obx(
(() {
if (bookController.isLoading.value) {
return const Center(
child: CircularProgressIndicator(),
);
} else {
return Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height - 100,
child: SearchBooks(
titleText: widget.titleText,
)),
],
);
}
}),
)),
);
}
}

Answer 1

instead of Get.find use Get.put bcz sometimes context not available
//final BookController bookController = Get.find(tag: 'bookController');
final BookController bookController = Get.put(BookController());

Answer 2

GetX's solution for this is to provide initialBinding in GetMaterialApp.
You may not be able to view the code sample below.
Future<void> main() async {
runApp(
GetMaterialApp(
title: "test App",
initialRoute: '/',
initialBinding: HomeBinding(),
getPages: AppPages.pages,
),
);
}
We create HomeBinding in a separate file as follows.
class HomeBinding implements Bindings {
#override
void dependencies() {
Get.lazyPut<MyController>(() => MyController());
Get.put<MyOtherController>(MyOtherController());
}
}
If you implement the above code correctly, when the application starts it will first see what controllers you need and initialize them.