FlutterでシンプルなTo Do Listアプリを作った
イントロダクション
Flutterの練習です。 今回はTo Do Listアプリを開発しました。
目次
初期化
こちらの記事に記載しています。
vscodeを使う場合は、command + shift + p
でFlutter: New Project
をします。
ToDoListの本体
Stateless Widgetを定義します。
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'to do list with Flutter', theme: ThemeData( primarySwatch: Colors.blueGrey, ), home: ToDoWidget(title: 'to do list with Flutter'), ); } } class ToDoWidget extends StatefulWidget { ToDoWidget({Key key, this.title}) : super(key: key); final String title; @override _ToDoWidgetState createState() => _ToDoWidgetState(); }
To Do Listの本体部分を作成します。
build
ウィジェットで枠を作ります。
このとき、実際にリスト作成する部分は_buildTodoList
に書くようにします。
To Doの追加は_pushAddTodoScreen
で行います。
追加アイコンはマテリアルアイコンを使用しました。
class _ToDoWidgetState extends State<ToDoWidget> { List<String> _todoItems = []; Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text('To do list') ), body: _buildTodoList(), floatingActionButton: new FloatingActionButton( onPressed: _pushAddTodoScreen, tooltip: 'Add task', child: new Icon(Icons.add) ), ); }
To DoタスクはListView
で表示します。
各To Doタスクを追加するため、_addTodoItem
、_buildTodoItem
でタスクを追加するウィジェットを作成します。
追加されたタスクは_todoItems
リストに追加していきます。
このとき、スワイプして削除するため、Dismissibleを使います。 また、スワイプ削除の際は文字がグレーになるよう背景色を設定します。
Widget _buildTodoList() { return new ListView.builder( itemBuilder: (context, index) { if(index < _todoItems.length) { return _buildTodoItem(_todoItems, index); } }, ); } void _addTodoItem(String task) { if(task.length > 0) { setState(() => _todoItems.add(task)); } } Widget _buildTodoItem(_todoItems, index) { String todoText = _todoItems[index]; return Dismissible( key: Key(todoText), onDismissed: (direction) { setState(() { _todoItems.removeAt(index); }); }, background: Container(color: Colors.grey), child: Card( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ new ListTile( leading: Icon(Icons.check_circle_outline), title: new Text(todoText), onTap: (){}, ), ] ), ), ); }
タスク追加テキストについてです。 タスク追加ボタンを押すとテキストエリアが表示され、タスクを書き込めるようにしています。
void _pushAddTodoScreen() { Navigator.of(context).push( new MaterialPageRoute( builder: (context) { return new Scaffold( appBar: new AppBar( title: new Text('Add a new task') ), body: new TextField( autofocus: true, onSubmitted: (val) { _addTodoItem(val); Navigator.pop(context); }, decoration: new InputDecoration( hintText: 'What is next task?', contentPadding: const EdgeInsets.all(16.0) ), ) ); } ) ); } }
コード全体
gistで共有します。
githubでも共有します。
結果
タスク画面
追加画面
削除後画面
まとめ
FlutterでTo Do Listを作成しました。 設定もできず、保存もできない酷いアプリですが、かんたんに作ることができました。 (さすがに、もう少しまともに動かせるように改良します。)
次回もFlutterで簡単なアプリを作りたいと思います。