Flutter web lagging on mobile when i scroll

Question

I am making my first website on flutter. I used Listview.builder on all pages. On pc it is working perfectly.But in mobile it is unusably lagging and stuttering when i scroll.

I tried primary : false but it is not working. I need help.

Here is my homepage for example (it is lagging for all screens) ;

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    Size size = MediaQuery.of(context).size;
    bool isDeviceDesktop = (size.width > 1000);

    List<Widget> items = [
                  const MyCarouselSlider(),
                  const SizedBox(height: 50,),
                  AnimatedTextKit(
                    animatedTexts: [
                      TypewriterAnimatedText(
                        'Nayıs Perde , Evinize Şıklık Katar...',
                        textStyle: GoogleFonts.dancingScript(fontSize: 35, color: Colors.white),
                        textAlign: TextAlign.center,
                        speed: const Duration(milliseconds: 60),
                      )
                    ],
                    totalRepeatCount: 1,
                  ),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildWhysColumnForDesktop():const BuildWhysColumnForMobile(),
                  const SizedBox(height: 70,),
                  isDeviceDesktop?const BuildFeaturingProductsColumnForDesktop():const BuildFeaturingProductsColumnForMobile(),
                  const SizedBox(height: 70,),
                  UnconstrainedBox(child: Dividers.simpleDivider(mediaSize: size)),
                  isDeviceDesktop?EndingContainerForDesktop(size: size):EndingContainerForMobile(size: size),
                  

                ];
    
    return Scaffold(
      floatingActionButton: isDeviceDesktop?null:const DoubleFabRow(),
      drawer: const NavDrawer(),
      body: CustomPerformanceOverlay(
        child: Container(
          height: size.height,
          width: size.width,
          decoration: const BoxDecoration(image: DecorationImage(image: AssetImage('assets/model/background.jpg',),fit: BoxFit.cover)),
          child: Column(
            children: [
              const CustomAppBar(),
              Expanded(
                child: ListView.builder(
                  primary: false,
                  padding: EdgeInsets.zero,
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return items[index];
                  },
                ),
              )
      
      
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Building with canvaskit fixed the issue. If you have the same issue, in terminal you need to type flutter build web --web-renderer canvaskit when building the web folder.