Flutterでシンプルなメモ帳を作る

イントロダクション

Flutterの練習です。メモ帳を作りました。

初期化

前回の記事を参考にアプリを初期化します。

snova301.hatenablog.com

vscodeならコマンドパレットでflutter: New Project

テーマを変える

アプリのテーマ色を変更します。 MyAppクラスのthemeを変えるだけです。

theme: ThemeData(
    primarySwatch: Colors.blueGrey,
),

テキストボックス用のウィジェット作成

StatefulWidgetでテキストボックス用のウィジェットを作成します。メモのタイトルも表示できるようにします。

class TextWidget extends StatefulWidget {
  TextWidget({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _TextWidgetState createState() => _TextWidgetState();
}

テキストボックス作成

TextFieldで自由記述のテキストボックスを作成します。

テキストボックスのエリアをわかりやすくするため、border: OutlineInputBorder()も記述します。

また、デフォルトでは1行しか書くことができないので、maxLines: nullを指定します。複数行になっても下にスクロールできるように、レイアウトはListViewにします。

@override
Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
            title: Text(widget.title),
        ),

        body: ListView(
            children: <Widget>[
                TextField(
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Write something',
                    ),
                    maxLines: null,
                ),
            ],
        )
    );
}