Expand item inside list of items - ExpansionPanel in flutter

This Article is posted by seven.srikanth at 10/1/2021 7:45:39 PM



Here is an example of how to expand items in a list of items in flutter.
Here is the complete code.

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@ override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Item $ index ',
expandedValue: 'This is item number $ index ',
);
});
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@ override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final List<Item> _data = generateItems(8);
@ override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (panelIndex, isExpanded) {
setState(() {
_data[panelIndex].isExpanded = !isExpanded;
});
},
children: _data
.map((e) => ExpansionPanel(
isExpanded: e.isExpanded,
headerBuilder: (context, isExpanded) =>
ListTile(title: Text(e.headerValue)),
body: ListTile(
title: Text(e.expandedValue),
)))
.toList(),
);
}
}
Thanks,
Srikanth

Tags: Expand item;








0 Comments
Login to comment.
Recent Comments












© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com