Flutterでのリストの数の増やし方がわからない

Question

実現したいこと

前提として、Flutterに初めから書き込まれているコードを利用しております。
それを使って、emulator画面右下の+ボタンを押した際(icons.addになっているもの)に、新しいリストが追加されるようにしたいのです。
特に今回は、+を押した際に"楽天"というリストが追加されるようにしたいと考えております。

試してみたこと

listItem.add("楽天")としてみましたが、全然ダメでした。（どこに記述するかもさっぱりわからないので一旦消しました)

コード

あまり長くないので、一応全部載せさせていただきます。。

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

// B. main関数
void main() {
  // C. runApp関数
  runApp(MyApp());
}

// D. StatelessWidgetを継承したクラス
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      // N-1. Theme
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Password Maintain'),
    );
  }
}

// E. StatefulWidgetを継承したクラス
class MyHomePage extends StatefulWidget {
  // コンストラクター
  MyHomePage({Key key, this.title}) : super(key: key);
  // 受け取った文字列の入れ物
  final String title;
  @override
  State<StatefulWidget> createState() => _MyHomePageState();
}

// F. Stateを継承したクラス
class _MyHomePageState extends State<MyHomePage> {
  // G. 状態の保持と更新
  var listItem = ["メルカリ","Yahoo","Amazon"];

  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  // H. _MyHomePageStateのbuildメソッド
  @override
  Widget build(BuildContext context) {
    // K. ページはScaffoldで組む
    return Scaffold(
      // L. AppBar
      appBar: AppBar(
        title: Text(widget.title),
      ),
      // M. bodyでページの中身をレイアウト
      body: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            return Container(
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(color: Colors.black38),
                  ),
                ),
                child: ListTile(
                  leading: const Icon(Icons.dashboard),
                  title: Text(listItem[index]),
                  subtitle: Text('password'),
                  onTap: () { /* react to the tile being tapped */ },
                ));
          }, itemCount: listItem.length,),
      // J. ボタン操作に応じて_counterを増やす
      floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

意味不明なことを言っているかもしれませんが、どうか答えてくれるとすごく助かります。。

Answer 1

プラスボタンを押すとは FloatingActionButton の onPressed が実行されますので、 _incrementCounter 内に listItem.add("楽天") を追加すれば、リストは増えると思います。
リストが再描画されるように setState 内に記述しています。

  void _incrementCounter() {
    setState(() {
      listItem.add("楽天");
    });
  }

---

Qiitaにカウントアプリの解説あがったので参考になるかもです
FlutterのsetStateとは？

Comments

[flutter_labo]

無事解決できました!本当にありがとうございます(^^)