Flutter: ListViewに動的にWidgetを追加する

プログラミング
スポンサーリンク




ボタンを押すと、ListViewに動的に要素を追加する機能を作成します。

↓イメージ

 

スポンサーリンク

ソースコード

※状態管理はStatefulWidgetを使用しています。BLoCやstate_notifierなど、他の方法を使用している場合は、適宜読み替えてください。

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => new _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  List<Text> _list = [
    Text(
      "初期値",
      style: TextStyle(fontSize: 20),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("テスト"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: _list.length,
                itemBuilder: (BuildContext context, int index) {
                  return _list[index];
                },
              ),
            ),
            Row(
              children: [
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    setState(() {
                      _list.add(
                        Text(
                          "テキスト" + _list.length.toString(),
                          style: TextStyle(fontSize: 20),
                        ),
                      );
                    });
                  },
                ),
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () {
                    if (_list.length == 1) {
                      Fluttertoast.showToast(msg: "これ以上減らせません!!");
                    } else {
                      setState(() {
                        _list.removeAt(_list.length - 1);
                      });
                    }
                  },
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

 

 

コメント

タイトルとURLをコピーしました