Sample App of Flutter3 x MySQL8 with mysql_client 4

ついにListView化に成功　

総コードはこちら
元の記事はこちら

FlutterのTextFormFieldに書き込まれた文字列をつかって、SQL文を書く、という作業にはだいぶ慣れてきた。でも、MySQLから取得したデータをFlutterで表示する、がなかなかできなかった。Firestoreから取得して表示、のように、サンプルがいっぱいあるわけではない。いっぱいどころか、この時代の、この広いネット上の、どこにもそんなサンプルはないのだ。それはそれで、ある意味、とてもおもしろい。　

　ということで、メンターさんに助けられながら悪戦苦闘した成果がこちら。

Listを定義。　

  var targetColumn1 = '';
  var targetColumn2 = '';
  var searchTerm1 = '';
  var searchTerm2 = '';
  var logique = '';

  List<Map<String, String>> displayList = [];

varで定義しているのは「Flutterで書いてMySQLに送る」文字列。以下のように使って、

• column1の値がterm１であるか、またはcolumn２の値がterm２であるデータを年代順に表示

というSELECT文を書いている。年代順に表示するためには、year のデータがint型でなければならない。文字列型だと「最初の文字」の順番で並んでしまうので例えば1357,23,456,8みたいなことになる。　

"SELECT * FROM timeline WHERE $targetColumn1 = '$searchTerm1' $logique $targetColumn2 = '$searchTerm2' ORDER BY year ASC"

一方、Listには、MySQLから取得したデータを蓄積する。

Listに蓄積　statefullWidgetに適用　

MySQLから取得したデータをリスト化している。ミソは変数名をシングルクォートで囲っているところ。実はなんでそうするのか、まだよくわかっていない。　
　これは、columnの０列目から順番に名前を付けた形になっている。なので皆さん、好きに命名してください。

    List<Map<String, String>> list = [];
    for (final row in result.rows) {
      final data = {
        //'selectedId': row.colAt(0)!;
        'selectedYear': row.colAt(1)!,
        'selectedName': row.colAt(2)!,
        'selectedCountry': row.colAt(3)!,
      };
      list.add(data);
    }

    setState(() {
      displayList = list;

データをListTileに載せる。　

　ここの表記法もずいぶん悩まされたが、できあがってみると、なるほどな、と思ったりもする。いや、それはかっこつけがすぎるか、ほんとはまだよくわかっていない。

                  child: SingleChildScrollView(
                    child:
                    Column(children: displayList.map<Widget>((data) {
                      return Card(
                        child: ListTile(
                          leading: Text(data['selectedYear']?? ""),
                          title: Text(data['selectedName']?? ""),
                          trailing: Text(data['selectedCountry']?? ""),
                        ),
                      );
                    }
                    ).toList()
                    ),
              ),

スマホの画面が小さいので

　検索窓５つと、不特定多数のListTile、何度も黒黄の縞模様エラーに悩まされながら、配置を確定。いくつでも表示して、スクロールで見られます。

　でも、bottomNavigationBarはまだついてません。今日はここまで。