FirebaseAnimatedList doesn't return anything

I'm trying to write an app that will detect Barcode ID. Once detected, it will fetch value in my Firebase Database and display them inside my Widget. I want my widget to be dynamic since i don't know how many items could be inside each ID. So i tried using FirebaseAnimatedList class. Issue is i can't get my Widget show up in my page at all.

Here's my code

import 'dart:async';
import 'package:firebase_database/ui/firebase_animated_list.dart';
import 'package:flutter/material.dart';
import 'package:firebase_database/firebase_database.dart';
import 'package:logistec/widget/result_page/productlist.dart';

class Scanning_Result_Page extends StatefulWidget {
  Scanning_Result_Page(this.phyid, {Key? key}) : super(key: key);
  String phyid;

  @override
  State<Scanning_Result_Page> createState() => _Scanning_Result_PageState();
}


class _Scanning_Result_PageState extends State<Scanning_Result_Page> {
  late String productcode;
  late String productname;
  late int quantity;
  late Query _ref =
      FirebaseDatabase.instance.ref().child('Database').child(widget.phyid);

//firebase structure currently goes like this
//PHYID
//|---number
//|-----items_name
//|-----items_codes etc...
//Therefore i need it to first fetch PHYID
//then after that, use for loop from 0 to the full lenght of that ID
//


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: PreferredSize(
          preferredSize: Size(40, 40),
          child: AppBar(
            backgroundColor: Colors.amber.shade400,
          )),
      body: Container(
        height: double.infinity,
        child: FirebaseAnimatedList(
          shrinkWrap: true,
          query: _ref.equalTo(widget.phyid),
          itemBuilder: (BuildContext context, DataSnapshot snapshot,
              Animation<double> animation, int index) {
            Map database = snapshot.value as Map;
            if (database != null) {
              //result = key - phyid | value - 0?
              return ProductList(
                productcode: 'Test 1', //will change this later. just need it to work for now.
                productname: 'Test 1',
                serial: 'Test 1',
                quantity: 1,
                phyid_result: widget.phyid,
              );
            } else {
              return Text("no data");
            }
            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}

And here's my Widget page. (I don't think it's related to my issue but i'll include them regardless.)

import 'package:flutter/material.dart';

class ProductList extends StatelessWidget {
  ProductList({
    Key? key,
    required this.productcode,
    required this.productname,
    required this.quantity,
    required this.phyid_result,
    required this.serial,
  }) : super(key: key);

  final String productcode;
  final String productname;
  final int quantity;
  final String phyid_result;
  final String serial;
  //The Look in my head
  //Each Container will have
  ///////////////////////////////////
  ///ProductCode                    /
  ///ProductName                    /
  ///                               /
  /// ///////////////////////////////
  ///                       Quantity/
  /// ///////////////////////////////
  final appBar = AppBar();
  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        body: CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: [
            SliverList(
                delegate: SliverChildListDelegate([
              Container(
                padding: const EdgeInsets.all(15.0),
                alignment: Alignment.center,
                color: Colors.black,
                height: 70.0,
                child: Text(
                  phyid_result,
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 25,
                  ),
                ),
              ),
              Container(
                height: screenSize.size.height,
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey.shade600)),
                child: IntrinsicHeight(
                  child: Column(
                    //mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.all(5),
                        child: Text(
                          productcode,
                          style: const TextStyle(fontSize: 20),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.all(5),
                        width: screenSize.size.width,
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colors.grey.shade200,
                                strokeAlign: StrokeAlign.inside)),
                        child: Text(
                          productname,
                          style: const TextStyle(fontSize: 20),
                        ),
                      ),
                      Container(
                        padding: EdgeInsets.all(5),
                        width: screenSize.size.width,
                        decoration: BoxDecoration(
                            border: Border.all(
                                color: Colors.grey.shade200,
                                strokeAlign: StrokeAlign.inside)),
                        child: Text(
                          serial,
                          style: const TextStyle(fontSize: 20),
                        ),
                      ),
                      Align(
                        alignment: Alignment.topRight,
                        child: Flexible(
                          fit: FlexFit.loose,
                          child: SizedBox(
                            width: 90,
                            child: Container(
                                decoration: BoxDecoration(
                                  border:
                                      Border.all(color: Colors.grey.shade200),
                                ),
                                padding: EdgeInsets.all(5),
                                child: Text(
                                  'Quantity : \n\v${quantity}',
                                  style: TextStyle(fontSize: 18),
                                  textAlign: TextAlign.right,
                                )),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ]))
          ],
        ),
      ),
    );
  }
}

The Scaffold part works. But everything inside FirebaseAnimated List all the way to CircularProgressIndicator doesn't work at all. It didn't even return if else statement. Just empty blank page with Scaffold.

The Widget itself will work fine if i remove everything out, and return only the ProductList widget itself. I tried searching on Google and didn't find anyone having issue like me. So i think i'm stuck. Does anyone know what could be the issue? Thanks for the assistance in advance!