ウィジェット

リスト

 

リスト

リストは、 ListView ウィジェットと ListTyle を組み合わせて作ります。

 

  •  LIstView にした要素は、 Column と違い、スクロールできるようになります。
  • リストは、テキストやアイコン、チェックボックスなどのウィジェットで構成します。
  • onTapを指定すればタップ時の動作を指定できます。

 

 

ListTileに指定できるプロパティ

ListTile(
  leading: Icon(Icons.info),
  title: Text('お問い合わせ'),
  subtitle: Text('メール'),
  onTap: (){},
  trailing: Icon(Icons.arrow_back_ios),
),

 

参考サイト

 

サーバーなどにあるデータを元にリストを作る方法

 

参考サイト

 

グリッドリスト

 GridView ウィジェットを使います。

 crossAxisCount  で何列にするか指定できます。

 Image に対して Expanded を使うことで、いい感じのサイズに調整してくれます。

 

参考サイト

グリッドリストのサンプルコード

画像をグリッドリストで表示させるアプリです。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welicome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ネコでもわかるFlutter大辞典'),
        ),
        body: Container(
          width: double.infinity,
          child: GridView.count(
            crossAxisCount: 3,
            children: List.generate(100, (index) {
              return Column(
                children: <Widget>[
                  Expanded(
                      child: Image.network(
                          ('https://images.unsplash.com/photo-1559235038-1b0fadf76f78?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80'))),
                  Text(
                    'CAT $index',
                  ),
                ],
              );
            }),
          ),
        ),
      ),
    );
  }
}

 

 

横方向へスクロールできるリスト

参考サイト