listview.separator 在 flutter 中显示空白屏幕

Question

listview.separator 没有显示任何项目只有空白屏幕，列表与 firestore 存储链接...我的代码是否正确？请帮忙

class _SpecialOffersState extends State<SpecialOffers> {
final Stream<QuerySnapshot> _userStream =
  FirebaseFirestore.instance.collection('med_cntr').snapshots();

@override
Widget build(BuildContext context) {
return Column(
  children: [
   
    SizedBox(height: getProportionateScreenWidth(5)),
    
    StreamBuilder<QuerySnapshot>(
      stream: _userStream,
      builder:
          (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: CircularProgressIndicator(),
          );
        }

        return Expanded(
          child: SizedBox(
            height: 150.0,
            child: ListView.separated(
              scrollDirection: Axis.horizontal,
              padding: EdgeInsets.all(12.0),
              itemCount: 10,
              separatorBuilder: (context, idx) {
                return SizedBox(width: 12);
              },
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                  child: Stack(
                    children: [
                      Positioned.fill(
                        child: Image.network(
                          snapshot.data?.docs[index]['coverArt'],
                          fit: BoxFit.cover,
                        ),
                      ),
                      Positioned(
                        bottom: 0,
                        left: 0,
                        right: 0,
                        child: Container(
                            height: 80.0,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                begin: Alignment.bottomCenter,
                                end: Alignment.topCenter,
                                colors: [
                                  Colors.black.withOpacity(0.6),
                                  Colors.transparent
                                ],
                              ),
                            )),
                      ),
                      Positioned(
                        bottom: 8,
                        left: 8,
                        child: Text(
                          snapshot.data?.docs[index]['name'],
                          style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
        );
      },
    ),
  ],
);

控制台中显示的错误：

RenderFlex 子项具有非零弯曲但传入的高度约束是无界的。
无效参数：URI 文件中未指定主机:///

Answer 1

移除 Expanded 外 ListView 并设置 height - width for card

尝试：

class _SpecialOffersState extends State<SpecialOffers> {
  final Stream<QuerySnapshot> _userStream =
  FirebaseFirestore.instance.collection('med_cntr').snapshots();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [

        SizedBox(height: getProportionateScreenWidth(5)),

        StreamBuilder<QuerySnapshot>(
          stream: _userStream,
          builder:
              (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
            if (snapshot.hasError) {
              return Text('Something went wrong');
            }

            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                child: CircularProgressIndicator(),
              );
            }

            return SizedBox(
              height: 150.0,
              child: ListView.separated(
                scrollDirection: Axis.horizontal,
                padding: EdgeInsets.all(12.0),
                itemCount: 10,
                separatorBuilder: (context, idx) {
                  return SizedBox(width: 12);
                },
                itemBuilder: (BuildContext context, int index) {
                  return SizedBox(
                    height: 150.0,
                    width: 150,
                    child: Card(
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.0),
                      ),
                      child: Stack(
                        children: [
                          Positioned.fill(
                            child: Image.network(
                              snapshot.data?.docs[index]['coverArt'],
                              fit: BoxFit.cover,
                            ),
                          ),
                          Positioned(
                            bottom: 0,
                            left: 0,
                            right: 0,
                            child: Container(
                                height: 80.0,
                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.bottomCenter,
                                    end: Alignment.topCenter,
                                    colors: [
                                      Colors.black.withOpacity(0.6),
                                      Colors.transparent
                                    ],
                                  ),
                                )),
                          ),
                          Positioned(
                            bottom: 8,
                            left: 8,
                            child: Text(
                              snapshot.data?.docs[index]['name'],
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            );
          },
        ),
      ],
    ); 
  }
}

listview.separator 在 flutter 中显示空白屏幕

listview.separator showing blank screen in flutter

android

flutter

firebase

dart

listview