FirebaseAnimatedList doesn't return anything - flutter

Question

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!

Answer 1

So i solve my own issue.
It turns out that my Widget is the actual root cause. I don't think SliverList is playing well with FirebaseAnimatedList (maybe because they are doing essentially the same thing?) So i refactor and remove everything related to SliverList.
Widget build(BuildContext context) {
final screenSize = MediaQuery.of(context);
return Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.grey.shade600)),
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,
)),
),
),
)
],
),
);
Then i reimplemented it into my pages. Now it works as expected. all is well again!