ListView loads images but wont scroll

Issue

The following Container is inside a Columnd. I just added the following portion of code because I think it is the only relevant part for this issue (I hope so).

When the ListView is added, the images are loaded and shown. However, scrolling is not enabled and not all images can be rendered. I don’t know if this problem is related to the way I am using ListView, or related to using it on a GetX Obx.

My flutter version is

[✓] Flutter (Channel stable, 2.5.0, on Ubuntu 20.04.3 LTS 5.11.0-34-generic, locale en_US.UTF-8)

Any ideas?

Container(
                    height: 180,
                    child: Row(
                      children: [
                        Expanded(
                          child: Obx(() {
                            if (editProductController.imgDataList.value != []) {
                              final imgWidgets =
                                  editProductController.imgDataList.value
                                      .map(
                                        (imgData) => Container(
                                          width: 180,
                                          child: Image.memory(
                                            imgData,
                                            fit: BoxFit.cover,
                                          ),
                                        ),
                                      )
                                      .toList();
                              return Container(
                                width: 100,
                                child: ListView.builder(
                                  padding: EdgeInsets.all(8),
                                  itemCount: imgWidgets.length,
                                  scrollDirection: Axis.horizontal,
                                  //physics: AlwaysScrollableScrollPhysics(),
                                  itemBuilder: (context, index) =>
                                      imgWidgets[index],
                                ),
                              );
                            } else {
                              return Center(
                                child: Image.asset(
                                  'assets/images/image_placeholder.jpg',
                                ),
                              );
                            }
                          }),
                          flex: 2,
                        ),
                        Expanded(
                          child: Container(
                            height: 60,
                            child: CustomButton(
                                text: product != null
                                    ? "Modificar Imagenes"
                                    : "Agregar Imagen",
                                onTap: () async {
                                  try {
                                    List<XFile>? pickedFiles =
                                        await ImagePicker().pickMultiImage();
                                    if (pickedFiles != null) {
                                      final imgDataList = <Uint8List>[];

                                      for (final pickedFile in pickedFiles) {
                                        final imgData =
                                            await pickedFile.readAsBytes();
                                        imgDataList.add(imgData);
                                      }

                                      editProductController.imgDataList.value =
                                          imgDataList;
                                    } else {
                                      throw Exception(
                                          'No se pudo cargar las imagenes');
                                    }
                                  } catch (e) {
                                    Get.snackbar(
                                      'Error cargando las imagenes',
                                      e.toString(),
                                    );
                                  }
                                }),
                          ),
                        ),
                      ],
                    ),
                  )

Solution

Flutter 2.5 update

Please add those codes for your horizontal scrolling

// Set ScrollBehavior for an entire application.
MaterialApp(
  scrollBehavior: MyCustomScrollBehavior(),
  // ...
);

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

Another approach

MaterialApp( scrollBehavior: MaterialScrollBehavior().copyWith( dragDevices: {PointerDeviceKind.mouse}, )

For more visit this link

Answered By – Jahidul Islam

Answer Checked By – Senaida (FlutterFixes Volunteer)