☰

Flutter の列ウィジェットの子に動的に追加する方法 質問する

tag-icon • tag-icon android oop widget flutter
Flutter の列ウィジェットの子に動的に追加する方法 質問する

Flutter は比較的新しいフレームワークであるため、単純なタスクについてはあまりサポートされていません。具体的には、列ウィジェットにカード ウィジェットを追加する方法を尋ねています。意味するところを説明するために、以下にソース コードを示します。

以下のように新しいカードを作成する関数があるとします。

buildRow(barcode, letter, name, price) {
  return new Card(
    child: new Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new ListTile(
          leading: new CircleAvatar(
            child: new Text(letter),
          ),
          title: new Text(name),
          subtitle: new Text("\$" + price),
          trailing: new Text(
            "x1",
            style: new TextStyle(color: Colors.lightBlue),
            textScaleFactor: 1.2,
          ),
        ),
      ],
    ),
  );
}
var snack = buildRow("091918229292", "C", "Crackers", "\$4.00");
var fruit = buildRow("091928229292", "P", "Pomegranate", "\$2.00");
var juice = buildRow("091948229292", "K", "Kiwi Juice", "\$20.00");

そして、次の画面/ページが表示されます。

class Home extends StatefulWidget {
  @override
  HomePage createState() => new HomePage();
}

class HomePage extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return new Column(children: <Widget>[

    ]);
  }
}

提供されているすべてのコードが同じファイル内にあるとします。ホーム画面の列ウィジェットの子に「スナック」、「フルーツ」、「ジュース」を追加するにはどうすればよいでしょうか?

ベストアンサー1

これは、ソースを手動で更新する場合の基本的な例です。

      Column(
        children: _createChildren(),
      )

///////

これは、列にフィードするウィジェットのリストを作成する方法です

  List<int> someList = [1, 2, 3, 4, 5];
  List<Widget> _createChildren() {
    return new List<Widget>.generate(someList.length, (int index) {
      return Text(someList[index].toString());
    });
  }

//////

リストを更新するときは、setState

  void _somethingHappens() {
    setState(() {
      someList.add(6);
    });
  }

ここで、ストリームからデータを受信する場合は をチェックできますStreamBuilder。データが から取得される場合は をFuture使用できますFutureBuilder。

この例は、通常のBuilder

おすすめ記事