ListView を使って、一覧 (リスト) を表示します。

一覧の表示

一覧の表示は、ほぼ全てのアプリ開発で必要とされる内容です。

Flutter には ListView という、非常に強力な ウィジットがあります。 今回、これを使って簡単な一覧を表現してみようと思います。

ListViewの書き方

基本的な、書き方は、

const data = ['abc', 'def', 'ghi',];
ListView.builder(
  itemCount: data.length,
  itemBuilder: (context, int index) {
    return Text(
      data[index],
    );
  },
)

の様になります。

ListView.builder 関数に、要素数を itemCount として、 一個一個の要素に対しての表示部を itemBuilder として適応します。

今回、 itemCount には data.length が入っています。 この場合、 3 を適応したのと同じになります。

itemBuilder には、一覧の中で、表示したい内容を、返すように設定してください。

上の例のように、配列 List を使って ListView を作ると楽です。

コードの例

例えば、コードは以下のようになります。

Padding を使って余白をもたせつつ、都道府県を一覧に表示してみました。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    const data = [
      "北海道", "青森県", "岩手県", "宮城県", "秋田県", "山形県", "福島県", "茨城県", "栃木県", "群馬県", "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県", "富山県", "石川県", "福井県", "山梨県", "長野県", "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県", "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県", "鳥取県", "島根県", "岡山県", "広島県", "山口県", "徳島県", "香川県", "愛媛県", "高知県", "福岡県", "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県", "鹿児島県", "沖縄県",
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, int index) {
          return Padding(
              padding: EdgeInsets.all(8.0),
              child: Text(
                data[index],
              ));
        },
      ),
    );
  }
}

スクリーンショット

参考リンク