Flutter Getx on list view error the improper use of a GetX has been detected - flutter

Question

I am trying to use Getx on simple ListView but its showing error that [Get] the improper use of a GetX has been detected.
Widget getBody() {
var size = MediaQuery.of(context).size;
final controller = Get.put(PassionController());
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 30, right: 30),
child: Column(
children: [
GetX<PassionController>(
builder: (_) => ListView.builder(
itemCount: controller.passionItems.length,
itemBuilder: (context, index) {
return ListTile(
title:
Text('Number: ${controller.passionItems[index]}'),
);
})),
GestureDetector(
onTap: () {
Navigator.push(
context, MaterialPageRoute(builder: (_) => MyHomePage()));
},
child: Container(
width: size.width,
height: 55,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30), color: Colors.white
// gradient:
// LinearGradient(colors: [primary_one, primary_two])
),
child: Center(
child: Text(
"Continue",
style: TextStyle(
color: kPrimarycolor,
fontSize: 18,
fontWeight: FontWeight.w500),
),
),
),
)
],
),
),
);
}
I also try GetxBuilder but same error showing. I already wrap GetMaterial on main.dart