Fixed size of ListView.builder?

[gOzaru]

Hello guys. I just did a debug testing on emulator of Android 7" tablet and found out that the only thing which doesn't change to fit in the device size is from widget ListView.builder.

I used this version: flutter_screenutil: ^5.4.0+1 This is the screenshot:

This is my code for declaration:

return ScreenUtilInit(
      minTextAdapt: true,
      builder: (context) => GetMaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Audio Player',
          useInheritedMediaQuery: true, //Use this code to prevent extra rebuilds
          theme: ThemeData(
            primarySwatch: Colors.indigo,
            unselectedWidgetColor: Colors.white,
            visualDensity: VisualDensity.adaptivePlatformDensity,
            timePickerTheme: const TimePickerThemeData(hourMinuteTextColor: Colors.white),
          ),
          darkTheme: ThemeData(), //Add this code for dark mode and set it in motion
          smartManagement: SmartManagement.full,
          onDispose: dispose,
          getPages: [
            GetPage(name: '/', page: () => Menu()),
          ],
          initialRoute: "/",
          builder: (context, child) {
            return Mechanism(child!);
          },
      ),
    );

This is my code for ListView.builder:

ListView.builder( 
  shrinkWrap: true,
  primary: false,
  controller: ctrlScroll01,
  itemCount: code.listEpic.length,
  padding: EdgeInsets.zero,
  physics: const ScrollPhysics(),
  itemBuilder: (context, index) {
        return Column(
           children: [
              ListTile(),
              SizedBox(), 
           ],
        );
 },
);

Anyway, I am using:

• Windows 11
• VS Code
• Flutter 2.10.5

Thank you for making this amazing package.

[Mounir-Bouaiche]

Hi @gOzaru , Please try with master branch and tell us if it works with you so we can ship a stable version in pub.dev.

dependencies:
  flutter_screenutil:
    git:
      url: https://github.com/OpenFlutter/flutter_screenutil
      branch: master

[gOzaru]

Hi @gOzaru , Please try with master branch and tell us if it works with you so we can ship a stable version in pub.dev.

dependencies:
  flutter_screenutil:
    git:
      url: https://github.com/OpenFlutter/flutter_screenutil
      branch: master

No, thank you. I think I know where this went wrong. I read on stackoverflow.com and found this problem. It seems that our ListTile created from Flutter cannot be maintained its height manually no matter what ways I used on it [Using Container or SizedBox] and it cannot be removed, unless we make a new class for that since the beginning.

[Mounir-Bouaiche]

@gOzaru Ok friend. I'll close this issue now

[gOzaru]

I think I need to add suggestion for people who experienced the same issue. You need to use GetX package to do this. The solution is to check context from GetX package if it is Phone or Tablet! If it is phone, use certain value with added .h/.w/.r and add another value if it is Tablet. Like example below: horizontalTitleGap: (cont.isPhone) ? 10.r : 7.r, I used different value here because each dimension for phone and tablet is entirely different.

You can view the whole code trick I made for my project below:

Widget build(BuildContext context) {
   final cont = Get.context!;
   log('context isPhone: ${cont.isPhone}');
   log('context isSmallTablet: ${cont.isSmallTablet}');
   log('context isLargeTablet: ${cont.isLargeTablet}');
   log('context isTablet: ${cont.isTablet}');
   return Container (
        ListView.builder(
           itemCount: totalIndexes, 
           itemBuilder: (context, index) {
                 return ListTile(
                    tileColor: Colors.grey.shade900,
                    contentPadding: (cont.isPhone) ? EdgeInsets.only(left: 10.r) : EdgeInsets.fromLTRB(7.r, 0.r, 7.r, 0.r),
                    minVerticalPadding: (cont.isPhone) ? 16.r : 4.r,
                    horizontalTitleGap: (cont.isPhone) ? 10.r : 7.r,
                    minLeadingWidth: 7.r,
                    dense: (cont.isPhone) ? true : false,
                    isThreeLine: true,
                    visualDensity: (cont.isPhone) ? const VisualDensity(vertical: 2.0) : const VisualDensity(vertical: 3.0),
                    selected: index,
                    onTap: () {

                    },
                );                        
           }
        ),
   );
}

You need to test this yourself for your use case. Good luck. And thank you authors for making this package for free. All of your names will be written as contributors in my project. All contributors of Flutter packages that I used inside my project, will receive a total of 10% of the first million dollar for every year for 5 years. I will let you know if I have achieved it. Please open Sponsor page at that time!