ویجت 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 گرفته تا کلی کار های دیگر

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

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

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