Last active
June 16, 2025 22:09
-
-
Save exoad/62ae7e44927883b0de6c4fd8696f3b56 to your computer and use it in GitHub Desktop.
CarouselView vs ListView.builder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MainApp())); | |
| } | |
| final class MainApp extends StatefulWidget { | |
| const MainApp({super.key}); | |
| @override | |
| State<MainApp> createState() => _MainAppState(); | |
| } | |
| class _MainAppState extends State<MainApp> { | |
| bool showListView = false; | |
| Axis dir = Axis.vertical; | |
| late List<Future<void>> _carouselFutures; | |
| static const int totalItems = 30; | |
| static const Duration futureDelayMS = Duration(milliseconds: 3500); | |
| @override | |
| void initState() { | |
| super.initState(); | |
| _carouselFutures = List<Future<void>>.generate( | |
| totalItems, | |
| (int index) => | |
| Future<void>.delayed(futureDelayMS, () => print("(CarouselView) $index finished!")), | |
| ); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| appBar: AppBar( | |
| leading: const SizedBox.shrink(), | |
| flexibleSpace: SafeArea( | |
| child: Row( | |
| spacing: 8, | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| mainAxisSize: MainAxisSize.min, | |
| children: <Widget>[ | |
| ElevatedButton( | |
| onPressed: () => setState(() { | |
| showListView = !showListView; | |
| if (!showListView) { | |
| _carouselFutures = List<Future<void>>.generate( | |
| totalItems, | |
| (int index) => Future<void>.delayed( | |
| futureDelayMS, | |
| () => print("(CarouselView) $index finished!"), | |
| ), | |
| ); | |
| } | |
| }), | |
| child: Text("Show ${showListView ? "CarouselView" : "ListView"}"), | |
| ), | |
| ElevatedButton( | |
| onPressed: () => | |
| setState(() => dir = dir == Axis.horizontal ? Axis.vertical : Axis.horizontal), | |
| child: Text("Set ${dir == Axis.horizontal ? "Vertical" : "Horizontal"}"), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| body: SafeArea( | |
| left: false, | |
| right: false, | |
| child: Material( | |
| child: Column( | |
| children: <Widget>[ | |
| Expanded( | |
| child: !showListView | |
| ? | |
| // carousel view here | |
| CarouselView.weighted( | |
| scrollDirection: dir, | |
| flexWeights: const <int>[1, 2, 1], | |
| itemSnapping: true, | |
| shape: Border.all(color: Colors.transparent), | |
| children: List<Widget>.generate(totalItems, (int index) { | |
| return SizedBox( | |
| height: MediaQuery.sizeOf(context).height, | |
| width: MediaQuery.sizeOf(context).width * 0.95, | |
| child: FutureBuilder<void>( | |
| future: _carouselFutures[index], | |
| builder: (BuildContext context, AsyncSnapshot<void> asyncSnapshot) { | |
| if (asyncSnapshot.hasData || | |
| asyncSnapshot.connectionState == ConnectionState.done) { | |
| return Container( | |
| decoration: BoxDecoration( | |
| color: index % 2 == 0 ? Colors.red : Colors.green, | |
| borderRadius: BorderRadius.circular(30), | |
| ), | |
| child: Center( | |
| child: Text( | |
| index.toString(), | |
| textAlign: TextAlign.center, | |
| textWidthBasis: TextWidthBasis.longestLine, | |
| style: const TextStyle( | |
| fontSize: 64, | |
| color: Colors.black, | |
| fontWeight: FontWeight.bold, | |
| ), | |
| ), | |
| ), | |
| ); | |
| } else if (asyncSnapshot.hasError) { | |
| return const Text( | |
| "Failed to load!", | |
| style: TextStyle(color: Colors.red), | |
| ); | |
| } | |
| return const CircularProgressIndicator(color: Colors.amber); | |
| }, | |
| ), | |
| ); | |
| }), | |
| ) | |
| : | |
| // listview method | |
| ListView.builder( | |
| scrollDirection: dir, | |
| itemCount: totalItems, | |
| itemBuilder: (BuildContext context, int index) { | |
| return SizedBox( | |
| height: MediaQuery.sizeOf(context).height, | |
| width: MediaQuery.sizeOf(context).width * 0.95, | |
| child: FutureBuilder<void>( | |
| future: Future<void>.delayed( | |
| futureDelayMS, | |
| () => print("(ListView) $index finished!"), | |
| ), | |
| builder: (BuildContext context, AsyncSnapshot<void> asyncSnapshot) { | |
| if (asyncSnapshot.connectionState == ConnectionState.done) { | |
| return Container( | |
| decoration: BoxDecoration( | |
| color: index % 2 == 0 ? Colors.red : Colors.green, | |
| borderRadius: BorderRadius.circular(30), | |
| ), | |
| child: Center( | |
| child: Text( | |
| index.toString(), | |
| style: const TextStyle( | |
| fontSize: 64, | |
| color: Colors.black, | |
| fontWeight: FontWeight.bold, | |
| ), | |
| ), | |
| ), | |
| ); | |
| } else if (asyncSnapshot.hasError) { | |
| return const Text( | |
| "Failed to load!", | |
| style: TextStyle(color: Colors.red), | |
| ); | |
| } | |
| return const CircularProgressIndicator(color: Colors.amber); | |
| }, | |
| ), | |
| ); | |
| }, | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment