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

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی ListTile

از این ویجت بیش تر در لیست ها استفاده می شود و کار ما را برای طراحی و چیدن عناصر در کنار هم خیلی راحت تر کرده است به تصویر زیر دقت کنید

هر یک از ایتم های بالا این لسیت ویو یک ListTile است خوب دیگر توضیحات بس است بریم سراغ پارامتر هایش

ListTile

ListTile(
  title: Text('Horse'),
)

این پارامتر عنوان ما را مشخص می کند

subtitle

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
)

این پارامتر قسمت توضیحات در این ویجت است

dense

ListTile(
  title: Text('Horse'),
  subtitle: Text('A strong animal'),
  dense: true,
)

این قسمت ایتم های درون این ویجت را فشرده تر می کنید به تصویر خروجی کد بالا دقت کنید

leading

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),
  ),
  title: Text('Horse'),
)

پارامتر leading ویجتی که بهش می دهیم را در اولین قسمت ListTile یعنی سمت چپ می چیند

خسته که نشدید :) اما باز داستان ادامه داره

trailing

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
)

پارامتر trailing ویجت مورد نظر را در انتها یعنی سمت راست می چیند

contentPadding

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
)

با استفاده از contentPadding میتونیم محتویات ویجت را Padding بهش بدهیم

selected

ListTile(
  title: Text('Horse'),
  trailing: Icon(Icons.keyboard_arrow_right),
  selected: true,
)

با استفاده از selected ان را در حالت انتخاب شده قرار دهیم

onTap

ListTile(
  title: Text('Horse'),
  onTap: () {
    // do something
  },
  onLongPress: (){
    // do something else
  },
)

با استفاده از OnTap خاصیت کلیک برای ویجت تعریف کرده و onLongPress هم زمانی اتفاق می افتد که کاربر روی ویجت لمس خود را نگه دارد

enabled

ListTile(
  title: Text('Horse'),
  onTap: () {
    // this will not get called
  },
  enabled: false,
)

با استفاده از enable می توان ان را فعال یا غیر فعال کرد

ListTile.divideTiles

ListView(
  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');
          },
        ),
      ],
    );
  }
}

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)

نوشته شده توسط پژمان حاجی حیدری یک علاقه مند به برنامه نویسی