ShowModalBottomSheet仅在Flutter中显示一个项目图像

我试图通过使用flutter_bloc库获取showModalBottomSheet中的api。下面是dart代码和样本api数据根据api数据,我得到了两个图像,但在showModalBottomSheet它只显示一个图像。为什么它只显示一个。我还注意到,我不能在showModalBottomSheet中更新任何类似文本颜色的更改。

MainPage。dart

TextButton(
                onPressed: () {
                  showModalBottomSheet(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(24.0),
                            topLeft: Radius.circular(24.0))),
                    context: context,
                    builder: (_) => TableModalSheet(
                      id: id,
                      count: count,
                    ),
                  );
                },
              ),

TableModalSheet。dart

class TableModalSheet extends StatefulWidget {
  final int id;
  final int count;
  const TableModalSheet({Key? key, required this.id, required this.count})
      : super(key: key);
  @override
  _TableModalSheetState createState() => _TableModalSheetState(id, count)}
class _TableModalSheetState extends State<TableModalSheet> {
  late final int id;
  late final int count;
  late TableBloc tableBloc;
  _TableModalSheetState(this.id, this.count);
  @override
  void initState() {
    super.initState();
    tableBloc = BlocProvider.of<TableBloc>(context)
      ..add(LoadTableCapacityEvent(id, count));}
  @override
  Widget build(BuildContext context) {
    return Container(
      child: BlocBuilder<TableBloc, TableState>(builder: (context, state) {
        if (state is TableLoading) {
          return Center(child: PlatformCircularProgressIndicator());
        } else if (state is TableLoaded) {
          return buildModal(state.data);
        } else if (state is TableError) {
          return Center(child: Text(state.message));
        }
        return Container();}),);}
  Widget buildModal(List<TablesTables> data) {
    return Padding(
      padding: const EdgeInsets.only(
          left: 10.0, right: 10.0, bottom: 20.0, top: 20.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(''),
              Text(
                'Select Table',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),),
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);},
                child: Text(
                  'Done',
                  style: TextStyle(
                      color: TuxedoColor.redColor, fontWeight: FontWeight.bold),),),],),
          Container(
            height: MediaQuery.of(context).size.height * 0.175,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 100.0,
                    width: 100.0,
                    child: CachedNetworkImage(
                      imageUrl: data[index].tablePhotos![index]!.image!, //Here it is displaying only one image but i'm expecting to get two images
                      placeholder: (context, url) =>
                          Center(child: PlatformCircularProgressIndicator()),
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),);}),)],),);}}

APIData

{
    "message": "Tables returend",
    "tables": [
        {
    "table_photos": [
                {
                    "id": "2",
                    "image": "https://cdn.fakercloud.com/avatars/calebogden_128.jpg",
                    "createdAt": "2021-09-09T13:45:31.089Z",
                    "updatedAt": "2021-09-09T13:45:31.089Z",
                    "tableId": "5"
                },
                {
                    "id": "7",
                    "image": "https://cdn.fakercloud.com/avatars/atanism_128.jpg",
                    "createdAt": "2021-09-09T13:45:31.089Z",
                    "updatedAt": "2021-09-09T13:45:31.089Z",
                    "tableId": "5"
                }
    }
]
}
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码