【Flutter】Web,WindowsでのTodoアプリ拡張

今回はToDoアプリ作りましたという記事にしようかと思ったのですが、umatomaさんが掲載されているFlutterで始めるアプリ開発のTodoアプリを写経したら一瞬で作れてしまったので、これをもう少し拡張してみようかと思います。

Todoアプリ

上記リンクの手順通りに実装を進めれば、Todoアプリが完成します。
Widgetを追加しながら動作確認が出来るので、とても分かりやすかったです。

■Windows


■Web

ここで問題が。
画像が小さく分かりづらいかも知れませんが、Web版だと中華フォントになってしまっています。
一覧の"覧"や追加の"追"が少しおかしいですね。
ということで、フォントを追加します。

フォント追加

定番のNoto Sans JPからダウンロードします。

1. 配布ページにアクセスしてRegular 400の右側にある+Select this styleをクリック
2. 右上にある■3つと+のアイコンをクリックするとサイドバーが出てくるので、Download allからダウンロード
3. ファイルを展開してNotoSansJP-Regular.otfをtodoapp\assets\fontsにコピー
4. pubspecに以下を追記

pubspec.yaml

flutter:
 fonts:
  - family: NotoSansJP
    fonts:
    - asset: assets/fonts/NotoSansJP-Regular.otf

5. main.dartに以下を追記

main.dart

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Todo App",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "NotoSansJP",   // <-- 追記
      ),
      home: TodoListPage(),
    );
  }
}

6. 再ビルド(デバッグ再起動)
   これでフォントが反映されました。
   
   

削除ボタン追加

次に各TODOに削除ボタンが無いので追加します。

build中にListViewを作成している箇所があります。
ここのListTileのtrailingにElevatedButtonを追加します。
また、ボタンラベルには「削除」、押下された時の動作としてListViewを作成している際のindexを削除する処理を追加します。

main.dart

  Widget build(BuildContext context) {
  // ---中略---
      body: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Card(
            child: ListTile(
              title: Text(todoList[index]),
	      // 追加-ここから
	      trailing: ElevatedButton(
		onPressed: () {
		  setState(() {
		    todoList.removeAt(index);
		  });
		},
		child: Text("削除", style: TextStyle(color: Colors.white)),
	      ),
	      // 追加-ここまで
	    ),
          );
        },
      ),
  // ---以下略---

これで削除ボタンが追加され、押下した際に対象のTODOが削除されるようになりました。