snovaのブログ

プログラミングとか、日常のこととか、アウトプットしたほうがよいと聞いたので

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



【スポンサーリンク】



イントロダクション

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

目次

初期化

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

www.snova301.work

www.snova301.work

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,
                ),
            ],
        )
    );
}

ソースコード

gistで共有します。

MemoApp with Flutter

アプリのイメージ

まとめ

シンプルなメモ帳を作りました。 多機能にしたかったですが、技術が追いつかなかったので次回以降にします。

参考サイト