Flutterでアプリ開発 実践編

さささ

こんにちはー！お肉大好き、さささです！

今回から、実践編に入っていきます。
最終的な目標は「Flutterを使ったアプリ開発、そしてアプリのストア公開まで実際にやってみること」です。
気長にお付き合いいただけましたら幸いです。

あれこれとアイディアは思い付きますが、いきなり凝ったものを作ろうとすると途方もない月日が必要になるのは、容易に予想が付きます。
今回は、とてもシンプルなアイディアにしておきます。
どんなものを作るかは、完成してストア公開までは非公開ということで！

設計とかで使ったもの

画面構成や簡単な機能要求を、iPad&Apple Pencilで描いてみました。
使ってみたのは「Autodesc SketchBook」というアプリです。

画面構成

私の描いたこのラフが万人に伝わるかどうかは、さておき。

SketchBookと言うこのアプリですが、とても良いです！
無料なのに、ペンの種類や補助線、レイヤー管理、写真を下地として読み込むことが出来たりと、文句ありません。
今度イラストにも挑戦してみようかと掻き立てられるアプリです。

機能仕様やアーキテクトはEvernoteで、今回はテキストだけにしました。

Atom + PlantUMLで仕上げても良いかなと思ったのですが、開発者は自分一人ですしね。
無事に完成したら後発で仕上げることにします。

実践スタート

早速作り始めています。
先日買った「基礎から学ぶ Flutter」が大活躍しています。

「画像で指定できるスタイルはどんなものがあるかな？」とか「ボタンやフォームの作り方は？」とか。
やりたい事から逆引きして、辞書として使うことが出来ます。
実践しながら学ぼうと決めた私にとって、現状手放せません！

TIPS：画像の上にテキストを表示する方法

実践編では、少しハマってしまった所をTIPSとして紹介していきます。

「吹き出し画像の中にテキストを表示させたい」という場面がありました。
要するに、テキストの背景として画像を設定したい時に使える手法です。

Container(
  constraints: BoxConstraints.expand(height: 200),
  decoration: BoxDecoration(
    image: DecorationImage(
      fit: BoxFit.fill,
      image: AssetImage('images/speech_bubble.png'),
    )
  ),
  child: Center( // Centerは要素の上下左右中央に表示することができる
    child: Text('ここに文言が入るよ！', textAlign: TextAlign.center),
  ),
),

Containerの装飾を画像でやって、childでTextを指定してあげればOKです。
BoxConstraints.expandで高さだけ指定しているのは、幅は画面いっぱいに広がって欲しいからです。
Textをただ指定すると画像の左上に表示されるので、画像の上下左右中央に配置したい時は、Centerを挟んであげると上手くいきました。

こんな感じになりました。

画像の上にテキストを表示させる方法

まとめ

前回はスタートラインに立ち、今回は最初の一歩を踏み出せました。
まだまだ完成には程遠いですが、ここからが楽しい所ですからね。
この作っている時間を過ごしていると、エンジニアになって本当に良かったなと改めて感じます。
作っている時間は、没頭しすぎてて、時間が経つのを忘れますからね。

それでは、今回はこの辺で失礼します。
お読みいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？