[Flutter]WidgetのListView

leadingが左のアイコン、trailingが右のアイコン、onTap()でタップしたときの動作

class MyHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('ListView'),
     ),
     body: Container(
       child: buildBasicListView(),
     ),
   );
 }
 
 Widget buildBasicListView() => ListView(
       children: [
         ListTile(
           leading: Icon(Icons.arrow_forward_ios),
           title: Text('list1'),
           subtitle: Text('sublist1'),
           trailing: Icon(Icons.star, color: Colors.orange),
         ),
         ListTile(
           leading: Icon(Icons.arrow_forward_ios),
           title: Text('list2'),
           subtitle: Text('sublist2'),
           trailing: Icon(Icons.mood, color: Colors.blue),
         ),
         ListTile(
           leading: Icon(Icons.arrow_forward_ios),
           title: Text('list3'),
           subtitle: Text('sublist3'),
           trailing: Icon(Icons.star, color: Colors.black),
         ),
         ListTile(
             leading: Icon(Icons.delete_forever, color: Colors.red),
             title: Text('Delete'),
             onTap: () {
               print('Deleted');
             }),
       ],
     );
}


画像1

class MyHomePage extends StatelessWidget {
 final items = List.generate(10, (index) => 'Item: $index');
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('ListView'),
     ),
     body: Container(
       child: buildBasicListView(context),
     ),
   );
 }
 
 Widget buildBasicListView(context) => ListView.separated(
       separatorBuilder: (context, index) => Divider(color: Colors.black),
       itemCount: items.length,
       itemBuilder: (context, index) {
         final item = items[index];
         return ListTile(
           title: Text(item),
         );
       },
     );
}

画像2

横にリストを並べたい時は、scrollDirection: Axis.horizontal,の行を足して、itemBuilderの返り値をListTile()ではなくContainer()などにする

class MyHomePage extends StatelessWidget {
 final items = List.generate(10, (index) => 'Item: $index');
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text('ListView'),
     ),
     body: Container(
       child: buildBasicListView(context),
     ),
   );
 }
 
 Widget buildBasicListView(context) => ListView.separated(
       padding: EdgeInsets.all(16),
       scrollDirection: Axis.horizontal,
       separatorBuilder: (context, index) => Divider(),
       itemCount: items.length,
       itemBuilder: (context, index) {
         final item = items[index];
         return Container(
           alignment: Alignment.center,
           margin: EdgeInsets.only(right: 16),
           child: Text(item),
         );
       },
     );
}

画像3


この記事が気に入ったらサポートをしてみませんか?