Single-Selection in Listview.builder Flutter

Arslan Raza
2 min readDec 30, 2022

--

Image Source: stackoverflow.com

To create a single selection list using ListView.builder in Flutter, I'm using a RadioListTile widget for each item in the list.

Here’s an example of how you can do this:

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
int _selectedIndex = 0;

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Single Selection List'),
),
body: ListView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return RadioListTile(
value: index,
groupValue: _selectedIndex,
onChanged: (value) {
setState(() {
_selectedIndex = value;
});
},
title: Text('Item $index'),
);
},
),
),
);
}
}

This code creates ListView with a RadioListTile widget for each item in the list. The RadioListTile widget handles the selection behavior and displays a radio button next to each item. When the user selects an item, the onChanged callback is triggered, and the selected index is stored in the _selectedIndex variable.

You can customize the appearance and behavior of the list items as needed. For example, you can use the title and subtitle properties to specify the text for each item or use the trailing property to add additional widgets to the right of the radio button. Thank you for reading.

--

--