مشكلة جلب الصور من خلال pickImage في flutter

تحيه طيبه للجميع

لدي استفسار لو تكرمتم

اشتغل على كود متكون من قسمين لعرض الصور

القسم الأول الصور التي احصل عليها من الفايربيز وهيا على شكل array

اما القسم الثاني هم صور أقوم بإضافتهم من الهاتف من خلال pickImage
طبعا فكرتي هيا إضافة صور جديد بجانب الصور التي تأتي من الفايربيز بمعنى في نفس القائمة او قائمة واحده ولكني اواجه مشكلة مع الصور التي اقوم بجلبها من الهاتف لا تعمل او لا تظهر او يتم عرضها على شكل مربع يحتوي على x 

صوره توضح المشكلة:

الصورة الأولى من اليمين (الساعة) هذا احصل عليها من الفايربيز وهيا تكمل بشكل تمام اما الصور الثلاث التأليه هيا المشكلة التي لدي

كيف يمكنني حل هذا المشكلة واضافة الجميع الى قائمة واحد؟
 

class ImageTopicModel {
  String? imageId;

  String? pOSTID;
  String? mainPicture;
  List<String>? imageUrls;
  bool isLocal = false; // Add the default value for isLocal field
  int? isMain_picture;

  ImageTopicModel({
    this.imageId,

    this.pOSTID,
    this.mainPicture,
    this.imageUrls,
    this.isLocal = false,
    this.isMain_picture,
  });

  ImageTopicModel.fromJson(Map<String, dynamic> json) {
    imageId = json['Image_id'].toString();
  
    pOSTID = json['POSTID'].toString();
    mainPicture = json['Main_picture'].toString();
    imageUrls = json['ImageTopic'] != null
        ? List<String>.from(json['ImageTopic'])
        : null;
    isLocal = json['isLocal'] ?? false;
    isMain_picture = json['isMain_picture'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['Image_id'] = this.imageId;

    data['POSTID'] = this.pOSTID;
    data['Main_picture'] = this.mainPicture;
    data['ImageTopic'] = this.imageUrls;
    data['isLocal'] = this.isLocal;
    data['isMain_picture'] = this.isMain_picture;

    return data;
  }

  String? get imageUrl =>
      imageUrls?.join(',').replaceAll(RegExp(r'[\[\]]'), '');
  set imageUrl(String? value) {
    if (value != null) {
      imageUrls = value.split(',');
    }
  }
}

class ImageCard extends StatefulWidget {
  var PostID;
  ImageCard({Key? key, this.PostID}) : super(key: key);

  @override
  State<ImageCard> createState() => _ImageCardState();
}

class _ImageCardState extends State<ImageCard> {
  List<ImageTopicModel> filteredUsers = [];
  final picker = ImagePicker();

  @override
  void initState() {
    init();
    super.initState();
  }

  Future<List<ImageTopicModel>> GetImageOfTopic() async {
    final document = await FirebaseFirestore.instance
        .collection('book')
        .where('id', isEqualTo: widget.PostID)
        .get();
    List<ImageTopicModel> listOfImages = document.docs.map((doc) {
      return ImageTopicModel.fromJson(doc.data());
    }).toList();

    return listOfImages;
  }

  Future<void> init() async {
    filteredUsers = [];
    selectedIndex = -1;
    List<ImageTopicModel> imageList = await GetImageOfTopic();
    filteredUsers.addAll(imageList);
    setState(() {});
  }

  Future<void> _captureImage() async {
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);

    if (image != null) {
      setState(() {
        filteredUsers.add(ImageTopicModel(imageUrls: [image.path]));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150,
      child: ListView.builder(
        shrinkWrap: true,
        physics: AlwaysScrollableScrollPhysics(),
        scrollDirection: Axis.horizontal,
        itemCount: filteredUsers.length + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == filteredUsers.length) {
            // Render a button to select a new image
            return GestureDetector(
              onTap: _captureImage,
              child: Padding(
                padding: EdgeInsets.only(right: 10.0),
                child: Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(5.0),
                  ),
                  child: Icon(
                    Icons.add,
                    size: 40,
                    color: Colors.grey[400],
                  ),
                ),
              ),
            );
          }

          return Row(
            children: filteredUsers[index].imageUrls!.map((imageUrl) {
              return GestureDetector(
                onTap: () {
                  print('Image clicked! URL: $imageUrl');
                  // Perform any action you want when the image is clicked
                },
                child: Padding(
                  padding: EdgeInsets.only(right: 10.0),
                  // Adjust the spacing between images horizontally
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Image.network(
                      imageUrl,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              );
            }).toList(),
          );
        },
      ),
    );
  }
}