body: Container(color: Colors.white,
child: SingleChildScrollView(
child : Column(
children : [
Padding(padding: EdgeInsets.only(left : 23.0, top: 23.0, right: 23.0, bottom: 5.0),
child : Text("Title", style: MyTextStyles.textNormal,)),
ListView.builder(
padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: PersonModel.icData.length,
itemBuilder: (context, index) {
PersonModel _model = PersonModel.icData[index];
return Column(
children: <Widget>[
Divider(
height: 17.0,
color: MyColors.white,
),
ExpansionTile(
key: PageStorageKey<String>(index.toString()),
initiallyExpanded: false,
leading:
new ClipOval(
child: SvgPicture.asset(
_model.picture,
height: 57.0,
width: 57.0,
),
),
title: Text(_model.title,style: TextStyle(color: Color(0xFF09216B), fontFamily: 'ProximaNova-Bold')),
subtitle: Text(_model.subtitle, style: TextStyle(color: Colors.black, fontSize: 13.0,),),
children: <Widget>[
Padding(padding: EdgeInsets.only(left: 20.0, top: 15.0),
child : Text(_model.title + ' ' +_model.detail,)
)
],
onExpansionChanged: ((newState){
print(' is now : ' + newState.toString());
})
),
]
//trailing:
);
},
)
]
),
)
),
I trying create personel List with ExpansionTile in Flutter. Personel List have properties and detail. I want first ExpansionTile's item default is open. And I want to When I click another item, current item is will be close. So just one item is will open always. How can I do it? Thanks.
This great solution
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ExpansionTile Collapse',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'ExpansionTile Collapse'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// selected's value = 0. For default first item is open.
int selected = 0; //attention
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,title: Text('ExpansionTile Collapse', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
body: Container(color: Colors.white,
child: SingleChildScrollView(
child : Column(
children : [
ListView.builder(
key: Key('builder ${selected.toString()}'), //attention
padding: EdgeInsets.only(left: 13.0, right: 13.0, bottom: 25.0),
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 5,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Divider(
height: 17.0,
color: Colors.white,
),
ExpansionTile(
key: Key(index.toString()), //attention
initiallyExpanded : index==selected, //attention
leading: Icon(Icons.person, size: 50.0, color: Colors.black,),
title: Text('Faruk AYDIN ${index}',style: TextStyle(color: Color(0xFF09216B), fontSize: 17.0, fontWeight: FontWeight.bold)),
subtitle: Text('Software Engineer', style: TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.bold),),
children: <Widget>[
Padding(padding: EdgeInsets.all(25.0),
child : Text('DETAİL ${index} \n' + 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English.',)
)
],
onExpansionChanged: ((newState){
if(newState)
setState(() {
Duration(seconds: 20000);
selected = index;
});
else setState(() {
selected = -1;
});
})
),
]
);
},
)
]
),
)
)
);
}
}