DartPadという公式のオンラインIDEを使って、TODOリストを作っていきましょう！
DartPadはこちら！ → https://dartpad.dev
終了時にこれらを達成できていれば完璧です！頑張っていきましょう！
Flutter と DartPad について、軽くお勉強しましょう。
Flutter は Google が提供する、 マルチプラットフォームアプリケーションを 構築するためのフレームワークです。
つまり、Flutterだけで Android, iOS, Windows, Macなど さまざまな機器を対象とした アプリを作成することができます。
開発言語としては Dart という言語を採用しています。
DartPad で Dart を動かしてみましょう。
DartPad を開いて、画面上部の「New Pad」を選択します。
Runボタンで実行してみよう！
今度は New Pad から Flutter を選択！ Run を押して実行！
Widget は、Flutter の UI を構築するためのパーツのことです。
さまざまな Widget を組み合わせていくことで、UI を作っていきます。
Samples -> Counter を選択して実行してみよう
StatelessWidget
StatefulWidget
build という function ( 関数 ) に、state を渡すことで、UI が構築される
状態( state )が与えられると、Widget の build メソッドが UI を構築します。
この状態( state )を必要とする Widget は StatefulWidget必要としないものは StatelessWidget
一度構築したらその後は変化しないもの
// StatelessWidgetでは、状態がないのでbuildメソッドもWidgetクラスに直接書く class Hoge extends StatelessWidget { Hoge({super.key}); @override Widget build(BuildContext context) { return Container(); } }
UIが動的に変化する必要があるもの
// StatefulWidgetでは、状態のクラス(State)を作成して、状態もbuildメソッドもそちらのクラスに記入する class Fuga extends StatefulWidget { Fuga({super.key}); @override State<Fuga> createState() => _FugaState(); } class _FugaState extends State<Fuga> { bool isChecked = false; // これが状態(state) @override Widget build(BuildContext context) { return Container( child: CheckBox( value: isChecked, onChanged: (value) { // 値を更新する時は、setStateを使う setState(() { isChecked = value; }); }, ), ); } }
UIのプログラム
TodoList という StatefulWidget がアプリの画面全体
状態として、List<Map<String, dynamic>> 型の todoList
List<Map<String, dynamic>>
todoList
※変数の型については理解できなくても OK です。 todoList は json の配列になっているとイメージしてください。
この todoList はタスク一覧となっています。
中身の値に着目してみると、 content と isFinish という値があります。
content
isFinish
content には入力された「タスクの内容」 isFinish には「タスクの完了状態」
好きなタスクの isFinish を true にしてみよう Runするとチェックマークがつくはずです
true
Flutter と DartPad に触れてみよう！