如何在flutter中用ListView填充Row的剩余空间

ybzsozfc  于 2022-12-19  发布在  Flutter
关注(0)|答案(1)|浏览(187)

我想用列表视图填充行内的空间。
未扩展时,结果如下所示:

需要展开列表视图以使用所有剩余空间。
下面是我的代码,它可以正常工作并给出如上所示的输出。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:size_config/size_config.dart';
import 'package:techypanther/core/Styling/AppColors.dart';
import 'package:techypanther/core/Widgets/AppTextWidget.dart';
import 'package:techypanther/features/Homepage/Blocs/home_screen_bloc.dart';
import 'package:techypanther/features/Homepage/Data/Model/AllProductsResponseModel.dart';

class ViewProductsInBag extends StatelessWidget {
  const ViewProductsInBag({super.key});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: BlocProvider.of<HomeScreenBloc>(context).itemsInBag,
        builder: (context, AsyncSnapshot<List<Product>> snapshot) {
          if (snapshot.hasData && snapshot.data!.isNotEmpty) {
            return Container(
              color: AppColors.grey,
              padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 5.h),
              height: 70.h,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: [
                  const AppTextWidget(
                    txtTitle: "Items in bag:",
                    fontWeight: FontWeight.w600,
                    txtColor: AppColors.white,
                  ),
                  5.horizontalSpacer,
                     ListView.builder(
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        physics: const ClampingScrollPhysics(),
                        itemBuilder: (context, index) => Padding(
                              padding: EdgeInsets.only(right: 5.w),
                              child: Image.network(
                                snapshot.data![index].image,
                                fit: BoxFit.contain,
                              ),
                            ),
                        itemCount: snapshot.data!.length),
                  Container(
                    width: 40.w,
                    height: double.infinity,
                    color: AppColors.primary,
                    child: Icon(
                      Icons.arrow_forward_ios,
                      color: AppColors.white,
                      size: 30.s,
                    ),
                  )
                ],
              ),
            );
          }
          return const SizedBox.shrink();
        });
  }
}

我尝试用扩展的小部件 Package 列表视图,但不起作用,并得到以下错误

qjp7pelc

qjp7pelc1#

尝试用Flexible Widget Package Listview小部件,并将fit属性设置为FlexFit.tight
您的代码应如下所示:

Flexible(
  fit: FlexFit.tight,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    physics: const ClampingScrollPhysics(),
    itemBuilder: (context, index) => Padding(
      padding: EdgeInsets.only(right: 5.w),
      child: Image.network(
        snapshot.data![index].image,
        fit: BoxFit.contain,
      ),
    ),
    itemCount: snapshot.data!.length),
)

相关问题