Sample App of Flutter3 x MySQL8 with mysql_client 5

全件表示ページも付けてみた　

　元の記事はこちら

　SQL文はいたってシンプル　

    var result = await conn.execute("SELECT * FROM timeline ORDER BY year ASC");

全件表示からupdate pageにidを持って飛べるようにした。

つまり、そのid番号を使って編集作業ができるということだけれど、今は番号はwidget titleとしてappBarに表示されてるだけなので、それを見てTextFormFieldに自分で入れなきゃならない。ここが自動ではいると、もっと便利。　
　ちなみに、同じ機能をselect pageにも付けた。　

                  return Card(
                      child: ListTile(
                        leading: Text(data['selectedYear']?? ""),
                        title: Text(data['selectedName']?? ""),
                        subtitle: Text(data['selectedCountry']?? ""),
                        trailing: TextButton(
                          child: const Text("update"),
                          onPressed: () {
                            Navigator.push(
                              context,
                              MaterialPageRoute(builder: (context) => UpdatePage(title: data['selectedId']?? "")),
                            );
                        },
                        ),
                      )
                  );

各ページのボタンをテキスト表示にした。

      floatingActionButton: FloatingActionButton.extended(
        onPressed: _readAll,
        tooltip: 'ReadAll',
        label: const Text("read all"),
      ),

TextFormFieldのデザインを少し変えた　

文字の位置を中央に寄せて、色を変えています。

    return TextFormField(
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        contentPadding: const EdgeInsets.all(5.0),
        hintText: hintText,
        hintStyle: const TextStyle(
            fontSize: 14,
            color: Colors.green),
        fillColor: Colors.lightGreen[100],
        filled: true,
        focusedBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(20),
          borderSide: const BorderSide(
            color: Colors.lightGreen,
            width: 2.0,
          ),
        ),
        enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(16),
          borderSide: const BorderSide(
            color: Colors.lightGreen,
            width: 1.0,
          ),
        ),
      ),
      onChanged: onChanged,
    );

そしてビデオを撮った。　

　海外の人が検索してもヒットするように、英語のみでタイトルと解説を付けた。ビデオ自体には音声はなくて、音楽は同じフラッター大学のcoboさんのオリジナルを使わせていただいた。ので、ビデオの中身より、音楽がおしゃれ。　

##　あとはこのQiitaの記事をシンプルにまとめて英語化する予定。