2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ListView.builderの使い方

Last updated at Posted at 2020-07-25

#はじめに
Flutterでアイテムを縦に並べるときに使用する
ソーシャルメディアのタイムラインのイメージ

#方法
タイトルにある通り、ListView Widgetを利用
このウィジェットの中のbuilderメソッドを使うことで動的にリストを生成することが可能

#builderの使い方
builder内の書き方を解説
##引数
itemBuilder
itemCount
###itemBuilder
リストを作ってくれる
BuildContext contextとint indexを引数にした、無名関数を書く
contextは、画面表示内容を生成するために必要なもの(詳しいことわかりません。ごめんなさい。)
indexは、1行目、2行目、3行目、、、と増加していくインクリメンタ。下のitemCountを設定していないと、無限に増加しようとする

###itemCount
リストにするアイテムの数を指定
指定しないと無限にリストを生成する、または、配列内のアイテムの個数を超過するとエラーが発生
よって、配列の長さを渡しておくのがよい

#コードと画面イメージ
##コード
※runAppなどは含めていない

  static const _userNames = <String>[
    'Alex',
    'Bob',
    'Cathy',
    'David',
    'Edward',
    'Frank',
    'George',
    'Henry',
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView.builder(
        itemBuilder: (BuildContext context, int index){
          String rtnStr = _userNames[index];
          return Container(
              padding: EdgeInsets.all(8.0),
              child: Text('$rtnStr'),);
        },
        itemCount: _userNames.length,
      ),
    );
  }

##画面イメージ
以下の通り、上から配列(_userNames)の内容が表示される
※ヘッター、フッターは上記のコードでは生成されない
image.png

#参考にした記事
ListView, Flutter Doc Jp

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?