productsController is not initiated when i do hot restart , but when i do hot reload it works , flutter Getx

Question

I am working on a ecommerce-app , I'm using Getx for the state managment, I'm a newbie with Getx a little help would be appreciated.

I am using firebase auth, so when the app is navigated from the login screen everything is fine i.e products are shown, But when when the user are kept logged in, products are not shown until hard reloaded,

main.dart

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp().then((value) {
    Get.put(ProductsController());
  });

  runApp(MyApp());
}


@override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: routes,
      home: StreamBuilder(
          stream: FirebaseAuth.instance.authStateChanges(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.active) {
              if (snapshot.hasData) {
                return HomeScreen();
              }
            }
            return const LoginScreen();
          }),
    );

controllers.dart

ProductsController productsController = ProductsController.instance;

home.dart

    class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: CustomAppBar(),
        body: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.only(bottom: 20),
            child: Column(
              children: [
                Text("Popular Products"),
                PopularProducts(),
              ],
            ),
          ),
        )
        );
  }

Popular Products

These products are shown only after hot reload, it is not shown initially, this is something to do with productController

class PopularProducts extends StatelessWidget {
  const PopularProducts({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: SizedBox(
            height: 150,
            child: ListView(
                scrollDirection: Axis.horizontal,
                children:
                    productsController.products.map((ProductModel product) {
                  print("These are the products" + product.toString());
                  return ProductCard(product: product);
                }).toList()),
          ),
        )
      ],
    );
  }

The images are : When hot restart:

When hot reload:

Answer 1

As @LMech replied Obx() was missing!!

Now the code is

@override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Obx(                         --> Add this line
          () => Expanded(
            child: SizedBox(
              height: 150,
              child: ListView(
                  scrollDirection: Axis.horizontal,
                  children:
                      productsController.products.map((ProductModel product) {
                    print("These are the products" + product.toString());
                    return ProductCard(product: product);
                  }).toList()),
            ),
          ),
        )
      ],
    );
  }