ویجت 12 (ListTile در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی ListTile https://media.giphy.com/media/3ov9k01Y5IKizNmC7S/giphy.gif از این ویجت بیش تر در لیست ها استفاده می شود و کار ما را برای طراحی و چیدن عناصر در کنار هم خیلی راحت تر کرده است به تصویر زیر دقت کنید هر یک از ایتم های بالا این لسیت ویو یک ListTile است خوب دیگر توضیحات بس است بریم سراغ پارامتر هایش ListTileListTile( title: Text('Horse'), )این پارامتر عنوان ما را مشخص می کند subtitleListTile( title: Text('Horse'), subtitle: Text('A strong animal'), )این پارامتر قسمت توضیحات در این ویجت است denseListTile( title: Text('Horse'), subtitle: Text('A strong animal'), dense: true, )این قسمت ایتم های درون این ویجت را فشرده تر می کنید به تصویر خروجی کد بالا دقت کنید leadingListTile( leading: CircleAvatar( backgroundImage: NetworkImage(imageUrl), ), title: Text('Horse'), )پارامتر leading ویجتی که بهش می دهیم را در اولین قسمت ListTile یعنی سمت چپ می چیندخسته که نشدید :) اما باز داستان ادامه داره https://media.giphy.com/media/JstFYY8FwlBm48n7De/giphy.gif trailingListTile( title: Text('Horse'), trailing: Icon(Icons.keyboard_arrow_right), )پارامتر trailing ویجت مورد نظر را در انتها یعنی سمت راست می چیندcontentPaddingListTile( title: Text('Horse'), trailing: Icon(Icons.keyboard_arrow_right), contentPadding: EdgeInsets.symmetric(horizontal: 0.0), )با استفاده از contentPadding میتونیم محتویات ویجت را Padding بهش بدهیم selectedListTile( title: Text('Horse'), trailing: Icon(Icons.keyboard_arrow_right), selected: true, )با استفاده از selected ان را در حالت انتخاب شده قرار دهیمonTapListTile( title: Text('Horse'), onTap: () { // do something }, onLongPress: (){ // do something else }, )با استفاده از OnTap خاصیت کلیک برای ویجت تعریف کرده و onLongPress هم زمانی اتفاق می افتد که کاربر روی ویجت لمس خود را نگه دارد enabledListTile( title: Text('Horse'), onTap: () { // this will not get called }, enabled: false, )با استفاده از enable می توان ان را فعال یا غیر فعال کردListTile.divideTilesListView( children: ListTile.divideTiles( context: context, tiles: [ ListTile( title: Text('Horse'), ), ListTile( title: Text('Cow'), ), ListTile( title: Text('Camel'), ), ListTile( title: Text('Sheep'), ), ListTile( title: Text('Goat'), ), ] ).toList(), )با استفاده از divideTiles میتوان خط فاصل بین ایتم ها ایجاد کردخوب بریم سراغ کد نویسی خروجی زیر تا تمام موارد بالا را هم با هم ببینیمimport 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'My App', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar(title: Text('ListTile guide')), body: BodyWidget(), ), ); } } String horseUrl = 'https://i.stack.imgur.com/Dw6f7.png'; String cowUrl = 'https://i.stack.imgur.com/XPOr3.png'; String camelUrl = 'https://i.stack.imgur.com/YN0m7.png'; String sheepUrl = 'https://i.stack.imgur.com/wKzo8.png'; String goatUrl = 'https://i.stack.imgur.com/Qt4JP.png'; class BodyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return ListView( children: <Widget>[ ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(horseUrl), ), title: Text('Horse'), subtitle: Text('A strong animal'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('horse'); }, selected: true, ), ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(cowUrl), ), title: Text('Cow'), subtitle: Text('Provider of milk'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('cow'); }, ), ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(camelUrl), ), title: Text('Camel'), subtitle: Text('Comes with humps'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('camel'); }, enabled: false, ), ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(sheepUrl), ), title: Text('Sheep'), subtitle: Text('Provides wool'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('sheep'); }, ), ListTile( leading: CircleAvatar( backgroundImage: NetworkImage(goatUrl), ), title: Text('Goat'), subtitle: Text('Some have horns'), trailing: Icon(Icons.keyboard_arrow_right), onTap: () { print('goat'); }, ), ], ); } }به همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود? https://media.giphy.com/media/NgfWjr6PhX8t2/giphy.gif روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)نوشته شده توسط پژمان حاجی حیدری یک علاقه مند به برنامه نویسی