ویجت 10 (ListView در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی ListViewبریم سراغ ساخت این ویجت به صورت استاتیک و ساده برای دست گرمیWidget _myListView(BuildContext context) { return ListView( children: <Widget>[ ListTile( title: Text('Sun'), ), ListTile( title: Text('Moon'), ), ListTile( title: Text('Star'), ), ], ); }دارای 3 تا ویجت بچه ListTileمیتونیم بین ایتم های لیست هایمان خط فاصل ایجاد کنیم و ان ها را بهتر از هم تفکیک کنیمWidget _myListView(BuildContext context) { return ListView( children: ListTile.divideTiles( context: context, tiles: [ ListTile( title: Text('Sun'), ), ListTile( title: Text('Moon'), ), ListTile( title: Text('Star'), ), ], ).toList(), ); }اما بیش تر مواقع لیست ما به صورت داینامیک است پس برای ساخت ان کافی است به شکل زیر عمل کنیمWidget _myListView(BuildContext context) { // backing data final europeanCountries = ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia and Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kazakhstan', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City']; return ListView.builder( itemCount: europeanCountries.length, itemBuilder: (context, index) { return ListTile( title: Text(europeanCountries[index]), ); }, ); }مقدار itemCount تعداد ایتم های ما را مشخص میکنه و itemBuilder ایتم های ما را ایجاد میکنه اما میتونیم لیست مان را به صورت نامحدود بسازیمWidget _myListView(BuildContext context) { return ListView.builder( itemBuilder: (context, index) { return ListTile( title: Text('row $index'), ); }, ); }برای ایجاد خط واصل و تفکیک ایتم ها میتوانیم به شکل زیر عمل کنیمWidget _myListView(BuildContext context) { return ListView.separated( itemCount: 1000, itemBuilder: (context, index) { return ListTile( title: Text('row $index'), ); }, separatorBuilder: (context, index) { return Divider(); }, ); }برای ایجاد لیست به صورت عمودی میشه به شکل زیر عمل کردWidget _myListView(BuildContext context) { return ListView.builder( scrollDirection: Axis.horizontal, itemBuilder: (context, index) { return Container( margin: const EdgeInsets.symmetric(horizontal: 1.0), color: Colors.tealAccent, child: Text('$index'), ); }, ); }از scrollDirection میتوانیم لیست را به صورت عمودی و افقی در بیاوریمدر این ویجت میتوان از ListTile هم میشه استفاده کرد به کد زیر دقت کنیدWidget _myListView(BuildContext context) { return ListView( children: <Widget>[ ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sun'), ), ListTile( leading: Icon(Icons.brightness_3), title: Text('Moon'), ), ListTile( leading: Icon(Icons.star), title: Text('Star'), ), ], ); }خیلی مواقع میتونیم با استفاده از ListTile نیازمان را در لیست مان رفع کنیم مقدار leading شروع ListTile است که ایکون ما را شکل داده و title هم عنوان این ویجت مان است به شکل زیر نگاه کنیدو برای دادن یک ویجت در پایان این ListTile میشه از trailing استفاده کرد ListTile( leading: Icon(Icons.wb_sunny), title: Text('Sun'), trailing: Icon(Icons.keyboard_arrow_right), ),به این شکل هم میشه با این ویجت رفتار کرد و از CircleAvatar در ان بهره برد Widget _myListView(BuildContext context) { return ListView( children: <Widget>[ ListTile( leading: CircleAvatar( backgroundImage: AssetImage('assets/sun.jpg'), ), title: Text('Sun'), ), ListTile( leading: CircleAvatar( backgroundImage: AssetImage('assets/moon.jpg'), ), title: Text('Moon'), ), ListTile( leading: CircleAvatar( backgroundImage: AssetImage('assets/stars.jpg'), ), title: Text('Star'), ), ], );در لیست ویو ها محدود به ویجت خاصی نیستیم به طور نمونه میتوانیم از Card هم استفاده کنیمWidget _myListView(BuildContext context) { final titles = ['bike', 'boat', 'bus', 'car', 'railway', 'run', 'subway', 'transit', 'walk']; final icons = [Icons.directions_bike, Icons.directions_boat, Icons.directions_bus, Icons.directions_car, Icons.directions_railway, Icons.directions_run, Icons.directions_subway, Icons.directions_transit, Icons.directions_walk]; return ListView.builder( itemCount: titles.length, itemBuilder: (context, index) { return Card( // <-- Card widget child: ListTile( leading: Icon(icons[index]), title: Text(titles[index]), ), ); }, ); }میتوانیم چه در Card چه در ListTile چه در هر ویجت دیگر کلیک مان را تعریف کنیم به کد های زیر توجه کنیدWidget _myListView(BuildContext context) { return ListView( children: <Widget>[ ListTile( title: Text('Sun'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('Sun'); }, ), ListTile( title: Text('Moon'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('Moon'); }, ), ListTile( title: Text('Star'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('Star'); }, ), ], ); }return ListView.builder( itemBuilder: (context, index) { return Card( child: InkWell( onTap: () { print('tapped'); }, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( children: <Widget>[ column, column, ], ), ), ), ); }, );از InkWell برای تعریف کلیک در Card مان استفاده میکنیم برای حذف و اضافه کردن به لیست هم میشه به شکل زیر عمل کردclass BodyLayout extends StatefulWidget { @override BodyLayoutState createState() { return new BodyLayoutState(); } } class BodyLayoutState extends State<BodyLayout> { List<String> titles = ['Sun', 'Moon', 'Star']; @override Widget build(BuildContext context) { return _myListView(); } Widget _myListView() { return ListView.builder( itemCount: titles.length, itemBuilder: (context, index) { final item = titles[index]; return Card( child: ListTile( title: Text(item), onTap: () { // <-- onTap setState(() { titles.insert(index, 'Planet'); }); }, onLongPress: () { // <-- onLongPress setState(() { titles.removeAt(index); }); }, ), ); }, ); } }با استفاده از titles.insert(index, 'Planet'); به ایتم های لیست اضاف کرده و با استفاده از titles.removeAt(index);ایتمی را از لیست حذف میکنیمدر لیست ویو کلی کار های دیگر میشه کرد از استفاده AnimatedList گرفته تا کلی کار های دیگربه همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)