2023.8.1 Flutter TODOアプリ進捗

FlutterでTODOアプリ作成進捗メモ

⚫︎追加ボタン（ElevatedButton）を押すと
　TextFieldに入力した文字がTODOの項目として追加される。
ゴミ箱のアイコンを押すとTODOが削除される

完了、未完のリストを作成
レイアウトはRowで横並び、Expanded（イクスパンディド）で２分割させた。

![スクリーンショット 2023-08-01 17.09.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3388746/6c916413-3faf-398b-9afd-36339a393758.png)


⚫︎ソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> todoList = []; //予め// リストを作っておいて追加画面で入力された文字を追加していく

@override
Widget build(BuildContext context) {

final myController = TextEditingController();

  return Scaffold(
      backgroundColor: Colors.white70, // 背景色設定
      appBar: AppBar(
        title: const Text('TODOリスト'),
      ),

    body:Column(
      mainAxisAlignment: MainAxisAlignment.center,//中央揃え
      children: <Widget>[
      Row(
        children: <Widget>[
          Flexible(
            child: TextFormField (
              controller: myController,
              decoration: InputDecoration(
                labelText: 'TODO',
                fillColor: Colors.blue[100],
                filled: true,
              ),
                style: const TextStyle(fontSize: 18),
            ),
          ),
          ElevatedButton(
            onPressed: ()  {
              final newListText = myController.text;
              if ( myController.text.length > 0 ) {//文字数が０より大きい時
                setState(() {
                todoList.add(newListText); //その文字をtodoListに追加する
                }
                );
                }else{
                print("失敗");
              }
            },
            child: const Text("追加"
            )
          ),
        ],
      ),
        Row(
          children: <Widget> [
          Expanded(
            child: Container(
              color: Colors.white70,
              height: 500,
              child: Column(
                children: <Widget> [
                  Text(
                    "未完のタスク",
                        style:TextStyle(
                      backgroundColor: Colors.red,
                    )
                  ),
                Expanded(
                  child: ListView.builder(
                    //動的にListViewを作る
                    itemCount: todoList.length, //渡された数だけ作成
                    itemBuilder: (context, index) {
                      return Card(
                          child: ListTile(
                              title: Text(todoList[index]
                              ),
                              trailing: IconButton(
                                  icon: const Icon(Icons.delete),
                                  onPressed: () {
                                    setState(() {
                                      // indexを指定して削除
                                      todoList.removeAt(index);
                                    });
                                  }
                              )
                          )
                        );
                      },
                  ),
                )
                ]
              )
            )
          ),
          Expanded(
            child: Container(
              color: Colors.lightGreenAccent,
              height: 500,
              child: Column(
                children: [
                  Text(
                    "完了",
                    style:TextStyle(
                      backgroundColor: Colors.red,
                    )
                  ),
                ],
              ),
            )
          )
        ]
        )
      ],
    ),
  );
}}