Flutter - Implement ListWheelChildBuilderDelegate Widget to a List
Last Updated :
24 Apr, 2025
The ListWheelChildBuilderDelegate widget in Flutter is used with the ListWheelScrollView to create a scrollable list with custom child widgets generated by a builder function. The ListWheelChildBuilderDelegate widget in Flutter is typically used as an argument to the childDelegate property of the ListWheelScrollView. In this article, we are going to implement the ListWheelChildBuilderDelegate widget. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of ListWheelChildBuilderDelegate Widget
ListWheelScrollView(
itemExtent: itemHeight, // Height of each item
childrenDelegate: ListWheelChildBuilderDelegate(
builder: (BuildContext context, int index) {
// Build and return a widget based on the index
return YourChildWidget(index);
},
childCount: itemCount, // Total number of items in the list
),
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ListWheelChildBuilderDelegateExample(),
);
}
}
Step 5: Create ListWheelChildBuilderDelegateExample Class
In this step we are going to implement the ListWheelChildBuilderDelegate Widget in a flutter app. In the childrenDelegate an instance of ListWheelChildBuilderDelegate, which is responsible for building the child widgets within the scrollable list. Comments are added for better understanding.
childDelegate: ListWheelChildBuilderDelegate(
builder: (BuildContext context, int index) {
// Build a ListTile for each item in the list
return ListTile(
title: Text(items[index]), // Display item's name
onTap: () {
// Handle tap event and print item's name
print('Tapped on ${items[index]}');
},
);
},
childCount: items.length, // Total number of items in the list
),
Dart
class ListWheelChildBuilderDelegateExample extends StatelessWidget {
const ListWheelChildBuilderDelegateExample({super.key});
@override
Widget build(BuildContext context) {
// Generate a list of 50 items with unique names
final List<String> items = List.generate(50, (index) => 'Item $index');
return Scaffold(
appBar: AppBar(
title: Text('ListWheelChildBuilderDelegate Example'),
),
body: Center(
child: ListWheelScrollView.useDelegate(
itemExtent: 60.0, // Height of each item in the list
childDelegate: ListWheelChildBuilderDelegate(
builder: (BuildContext context, int index) {
// Build a ListTile for each item in the list
return ListTile(
title: Text(items[index]), // Display item's name
onTap: () {
// Handle tap event and print item's name
print('Tapped on ${items[index]}');
},
);
},
childCount: items.length, // Total number of items in the list
),
),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ListWheelChildBuilderDelegateExample(),
);
}
}
class ListWheelChildBuilderDelegateExample extends StatelessWidget {
const ListWheelChildBuilderDelegateExample({super.key});
@override
Widget build(BuildContext context) {
// Generate a list of 50 items with unique names
final List<String> items = List.generate(50, (index) => 'Item $index');
return Scaffold(
appBar: AppBar(
title: Text('ListWheelChildBuilderDelegate Example'),
),
body: Center(
child: ListWheelScrollView.useDelegate(
itemExtent: 60.0, // Height of each item in the list
childDelegate: ListWheelChildBuilderDelegate(
builder: (BuildContext context, int index) {
// Build a ListTile for each item in the list
return ListTile(
title: Text(items[index]), // Display item's name
onTap: () {
// Handle tap event and print item's name
print('Tapped on ${items[index]}');
},
);
},
childCount: items.length, // Total number of items in the list
),
),
),
);
}
}
Output:
Similar Reads
Flutter - Implement SwitchListTile Widget
The SwitchListTile widget in Flutter is a combination of a ListTile and a switch. It provides a user-friendly way to toggle a boolean setting or option within your app. Here's how you can implement a SwitchListTile widget. A sample video is given below to get an idea about what we are going to do in
6 min read
ListWheelScrollView Widget in Flutter
ListWheelScrollView is a flutter widget that is used to build ListView with a 3D effect. We can also use ListView to create a list of items but we can't add a 3D effect to it plus it also comes with a constraint that all the children inside this widget must be of the same size along the strolling ax
7 min read
Flutter - Implement IndexedStack Widget
The IndexedStack widget in Flutter is used to display a single child from a list of children at a given index. It's commonly used when you want to show one child widget while hiding the others, such as in a tabbed interface. In this article, we are going to implement the IndexedStack widget and expl
5 min read
Flutter - Implement Stepper Widget Inside an AlertDialog
The Stepper widget in Flutter is a user interface element used to create a step-by-step process interface. It allows users to progress through a series of steps or stages, with each step typically representing a specific task or some information. An Alert Dialog is a useful way to grab users' attent
5 min read
What is Widgets in Flutter?
Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
How to Shuffle a List using shuffle() in Flutter?
In this article, we are going to learn how to develop an Android app in Flutter that shuffles the content of a list by calling shuffle( ). Here we will take the Benefits of the inbuilt shuffle() method from the dart:math library, which provides an easy approach to randomly arrange the items on a lis
4 min read
Flutter - TweenAnimationBuilder Widget
In this article, we will learn about how to implement TweenAnimationBuilder Widget. Widget builder that animates a widget's property to a target value whenever the target value changes. A sample video is given below to get an idea about what we are going to do in this article. Constructorconst Tween
3 min read
How to Get the Height of a Widget in Flutter?
To get the height of a widget in Flutter, you can use the LayoutBuilder widget to obtain the constraints of the parent container and then get the height from those constraints. How to use it? You can simply use this widget anywhere in your project as you needed that. LayoutBuilder( builder: (BuildCo
3 min read
Flutter - Implement a ListTile Inside a GrdiView
In this article, we are going to combine two major flutter widgets. We are going to implement a ListTile inside a GridView. Also, we are going to see the basic syntaxes of the individual widgets. A sample Image is given below to get an idea about what we are going to do in this article. Basic Syntax
4 min read
Flutter - Splitting App into Widgets
Splitting an app into widgets refers to the breaking up of large widgets into smaller, more manageable widgets which can be inferred as smaller chunks of codes. The principal thing here is to understand when to split a widget into smaller ones. We are going to discuss when to split a widget and meth
5 min read