<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>この記事は、<strong>Flutter をほぼ初めて触った人</strong>の感想記事です。</p>
</div></aside>
<p>どうも、<a href="https://twitter.com/nano72mkn" target="_blank" rel="nofollow noopener noreferrer">nano72mkn</a>です。</p>
<p>今回は、Flutter を使ってアプリを作ってみました！</p>
<p>ReactNative の開発体験はとても素敵なもので、Flutter に挑戦しようと思っても RN の誘惑に負けて手を出せずにいました。<br>
Cordova から始まり、Native(Swift)をさわり、ReactNative(Expo)をやってきて、とうとう Flutter に挑戦です！</p>
<p>アプリエンジニアの歴史に<strong>Flutter</strong>をぶち込んでやります！！</p>
<h2 id="%E3%81%AA%E3%81%AB%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%AB%E3%81%A4%E3%81%8F%E3%81%A3%E3%81%9F%E3%81%AE%EF%BC%9F%EF%BC%9F" aria-hidden="true"></a> なにつくったの？？</h2>
<p>去年、1 年間何してきたかなと思って振り返ると、記憶がほぼありませんでした。<br>
改善方法を考えた結果、日記をつけられるアプリを作ろう！そうすれば何してたか思い出せるじゃん！！<br>
でも、書くのめんどくさいしな...</p>
<p>ということで、作りました。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--FjQKMX-d--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/v1/ebd05d4198d88a/IMG_0574.png" alt="One Line Diary" loading="lazy" class="md-img"></p>
<blockquote>
<p>「え！たった一行でいいの！」<br>
そうです。たった一行、今日あったことを書くだけ。<br>
それだけで立派な日記なのです。<br>
めんどくさがりな君でも、続けられるかも？</p>
</blockquote>
<p>すばらしいキャッチフレーズで、どんなアプリなのか伝わったと思います。</p>
<p>（普通の日記アプリでいいじゃんは禁句です）</p>
<h2 id="%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93" aria-hidden="true"></a> 使用技術</h2>
<ul>
<li>Flutter</li>
<li>FireBase
<ul>
<li>Authentication</li>
<li>Cloud Firestore</li>
</ul>
</li>
</ul>
<p>のみのシンプル設計。</p>
<h2 id="flutter-%E3%82%92%E6%8A%8A%E6%8F%A1%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#flutter-%E3%82%92%E6%8A%8A%E6%8F%A1%E3%81%99%E3%82%8B" aria-hidden="true"></a> Flutter を把握する</h2>
<p>まとめると、公式サイトみて想像して、ドキュメントをみて妄想してみたらできること把握できました。<br>
見づらいメニューでしたけど、内容はわかりやすくて把握しやすかったです。</p>
<p>（※個人的感想を含みます）</p>
<h3 id="%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E8%A6%8B%E3%81%A6%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%82%E3%81%92%E3%82%8B">
<a class="header-anchor-link" href="#%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88%E3%82%92%E8%A6%8B%E3%81%A6%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%82%E3%81%92%E3%82%8B" aria-hidden="true"></a> 公式サイトを見てモチベーションをあげる</h3>
<p>一番大事なこと、それはモチベーションを上げること。<br>
ここでブーストしないと、リリースまでいけないです。（体験談）<br>
「え、Fast って書いてある！早いのやばい！」くらいの気持ちで上げていきます。<br>
公式サイトには、いいことしか書かれていないのでモチベを上げるのには最適です。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__005d64223241f" src="https://embed.zenn.studio/card#zenn-embedded__005d64223241f" data-content="https%3A%2F%2Fflutter.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://flutter.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://flutter.dev/</a></p>
<h3 id="%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E3%81%BF%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E8%AA%AD%E3%82%93%E3%81%A7%E3%81%BF%E3%82%8B" aria-hidden="true"></a> ドキュメントを読んでみる</h3>
<p>モチベーションが上がったままドキュメントを読みましょう。<br>
流し読みで問題ないです。ドキュメントなんて覚えている人はいません。<br>
何ができるかを悟るのです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__04d844d3c3255" src="https://embed.zenn.studio/card#zenn-embedded__04d844d3c3255" data-content="https%3A%2F%2Fdocs.flutter.dev%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.flutter.dev/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.flutter.dev/</a></p>
<h3 id="github-%E3%81%AE%E6%A4%9C%E7%B4%A2">
<a class="header-anchor-link" href="#github-%E3%81%AE%E6%A4%9C%E7%B4%A2" aria-hidden="true"></a> GitHub の検索</h3>
<p>使いたい Widget とか GitHub で検索するのです。<br>
たくさんのサンプルを確認することが出ます。</p>
<h2 id="flutter-%E3%81%AE%E3%81%A4%E3%82%89%E3%81%BF">
<a class="header-anchor-link" href="#flutter-%E3%81%AE%E3%81%A4%E3%82%89%E3%81%BF" aria-hidden="true"></a> Flutter のつらみ</h2>
<p>初心者ならではなので、慣れれば問題ないレベルです。</p>
<h3 id="dart-%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%89%E3%82%93">
<a class="header-anchor-link" href="#dart-%E3%81%8C%E3%82%8F%E3%81%8B%E3%82%89%E3%82%93" aria-hidden="true"></a> dart がわからん</h3>
<p>時間と開発数が解決する問題。<br>
JavaScript の雰囲気を出していますが、（使ったことないけど）Java みも感じる。<br>
親近感湧くけど、壁貼られてる。そんな感じです。</p>
<h3 id="%E9%9A%8E%E5%B1%A4%E6%B7%B1%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%8C%E3%81%A1">
<a class="header-anchor-link" href="#%E9%9A%8E%E5%B1%A4%E6%B7%B1%E3%81%8F%E3%81%AA%E3%82%8A%E3%81%8C%E3%81%A1" aria-hidden="true"></a> 階層深くなりがち</h3>
<p>ものによりますが、<code>Padding</code>をつけるだけでも階層が深くなり、見えにくくなってしまいました。</p>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">イメージです</span></div>
<pre class="language-dart"><code class="language-dart"><span class="token class-name">Padding</span><span class="token punctuation">(</span>
  padding<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">EdgeInsets</span><span class="token punctuation">.</span><span class="token function">only</span><span class="token punctuation">(</span>top<span class="token punctuation">:</span> <span class="token number">4.0</span><span class="token punctuation">,</span> left<span class="token punctuation">:</span> <span class="token number">20.0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Text</span><span class="token punctuation">(</span><span class="token string-literal"><span class="token string">'hoge'</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span>
</code></pre>
</div><p>こんな感じで、<code>Padding</code>以外にもあり、組み合わせると結構深くなりがちでした。<br>
これは、組み合わせ方を調べていくと解決するかもしれないですが、なりがちという状況は変わらなそうだと思いました。</p>
<h3 id="ota-%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84">
<a class="header-anchor-link" href="#ota-%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84" aria-hidden="true"></a> OTA アップデートができない</h3>
<p>ちょっとした文字の変更にも申請を通す必要があるのは、なかなかにめんどくさい。<br>
今後対応されたりなんかしちゃったり????</p>
<h2 id="flutter-%E3%81%AE%E3%82%88%E3%81%8D%E3%81%A8%E3%81%93">
<a class="header-anchor-link" href="#flutter-%E3%81%AE%E3%82%88%E3%81%8D%E3%81%A8%E3%81%93" aria-hidden="true"></a> Flutter のよきとこ</h2>
<h3 id="%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%97%E3%81%AA%E3%81%8F%E3%81%A6%E3%82%82%E8%89%AF%E3%81%84">
<a class="header-anchor-link" href="#%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%97%E3%81%AA%E3%81%8F%E3%81%A6%E3%82%82%E8%89%AF%E3%81%84" aria-hidden="true"></a> デザインしなくても良い</h3>
<p>デフォルトでマテリアル UI が反映されるので、<br>
まるにプラスアイコンがついたボタンを画面右下に表示する場合は、</p>
<div class="code-block-container"><pre class="language-dart"><code class="language-dart">floatingActionButton<span class="token punctuation">:</span> <span class="token class-name">FloatingActionButton</span><span class="token punctuation">(</span>
  onPressed<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  tooltip<span class="token punctuation">:</span> <span class="token string-literal"><span class="token string">'Increment'</span></span><span class="token punctuation">,</span>
  child<span class="token punctuation">:</span> <span class="token keyword">const</span> <span class="token class-name">Icon</span><span class="token punctuation">(</span><span class="token class-name">Icons</span><span class="token punctuation">.</span>add<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre></div><p>これだけで実装できます。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--ZzQUTOvz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/3cf9d4213b65ed55e05d88b3.png%3Fsha%3De8b1962ef5a1e6525402639eb3b3f6f97edea61f" alt loading="lazy" class="md-img"></p>
<p>他にもボタンや input など、ほとんど Style が付いているので、<br>
デザインを考えずに簡単に実装できます。</p>
<p>デザインが苦手な人は Flutter おすすめです。</p>
<h3 id="firebase-%E9%80%A3%E6%90%BA%E6%A5%BD">
<a class="header-anchor-link" href="#firebase-%E9%80%A3%E6%90%BA%E6%A5%BD" aria-hidden="true"></a> FireBase 連携楽</h3>
<p><a href="https://firebase.flutter.dev/" target="_blank" rel="nofollow noopener noreferrer">FlutterFire</a>というものがあり、<br>
<code>flutterfire configure</code>とコマンドを打てば、Firebase 連携ができてしまう優れもの。</p>
<p>Google が開発してるんだし、Flutter は Firebase 連携楽なんだろうなと思っていましたが、<br>
想像よりも楽でびっくりしました。</p>
<p>さらに、<a href="https://firebase.flutter.dev/docs/ui/overview/" target="_blank" rel="nofollow noopener noreferrer">FlutterFire UI</a>というもので、ログインページなども簡単に生成できてしまう！！<br>
これのおかげで、1 週間で完成までいけました。<br>
最高！</p>
<h3 id="%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E8%A8%AD%E5%AE%9A%E6%A5%BD">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E8%A8%AD%E5%AE%9A%E6%A5%BD" aria-hidden="true"></a> アイコン設定楽</h3>
<p>React Native ではジェネレータを自作し、アイコン設定は一瞬だったので、<br>
Flutter でアイコン設定をしないとと気づいた時は絶望していました。（アイコン数多くて辛い！！）</p>
<p>でも、やはり Flutter にも神はいました。<code>flutter_launcher_icons</code>を追加すれば、</p>
<div class="code-block-container"><pre><code>$ flutter pub run flutter_launcher_icons:main
</code></pre></div><p>これだけで、アイコン設定終わる！！<br>
最高！！ありがとう！！</p>
<h3 id="%E5%9E%8B">
<a class="header-anchor-link" href="#%E5%9E%8B" aria-hidden="true"></a> 型</h3>
<p>型が最強でした。<br>
この Widget は何をされている方なの？<br>
と聞くと、すぐに答えてくれるので、できること・できないことがはっきりしていて開発が楽でした。</p>
<h2 id="%E3%82%A2%E3%83%97%E3%83%AA%E7%94%B3%E8%AB%8B%E3%81%BE%E3%81%A7%E3%81%AE%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E6%84%9F">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E7%94%B3%E8%AB%8B%E3%81%BE%E3%81%A7%E3%81%AE%E3%82%B9%E3%82%B1%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB%E6%84%9F" aria-hidden="true"></a> アプリ申請までのスケジュール感</h2>
<ul>
<li>12/25
<ul>
<li>公式サイト/ドキュメントを見る</li>
<li>Flutter インストール</li>
</ul>
</li>
<li>12/26
<ul>
<li>Firebase 入れてみる</li>
<li>めちゃめちゃエラーでる</li>
<li>初期化して Flutterfire を試したら成功</li>
</ul>
</li>
<li>12/27
<ul>
<li>ログイン画面ついか</li>
</ul>
</li>
<li>12/28
<ul>
<li>日記保存の実装</li>
</ul>
</li>
<li>12/29
<ul>
<li>実機テスト</li>
</ul>
</li>
<li>12/30
<ul>
<li>アイコン追加</li>
</ul>
</li>
<li>12/31
<ul>
<li>Apple に申請</li>
</ul>
</li>
</ul>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>Flutter 思ってたよりも簡単でした。<br>
おそらく、これで簡単というと怒られそうですが、でもとっつきやすく入門しやすいと思いました。</p>
<p>Flutter が原因のつまづきは<code>dartがわからん</code>くらいで、エラーで永遠にハマることもなくすんなり開発できてしまったので、<br>
個人開発やる時は Flutter で作っていこうかなと思っています。</p>
<p>この記事は、開発中に書いたスクラップを元に作成しました。<br>
興味がある方は見てみてください！</p>
<ul>
<li><a href="https://zenn.dev/shota1995m/scraps/e82c35e101bff4" target="_blank">Flutter スクラップ</a></li>
</ul>
<p>12/31 に Apple さんに申請をしました 🎉<br>
リリースされるのが待ちどうしいですね！（自分だけ）</p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h2>
<p>Flutter をやりたい理由のひとつに、ReactNative と Flutter どちらを選択するのが良いのか判断したいという気持ちがありました。<br>
すこし触った感じ、開発体験に関しては、好きな方でいいやというくらい差がありませんでした。</p>
<p>ReactNative と Flutter どっち使おうか悩んだら下記のフローチャートで判断しようかなと思います。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--dX5XQ-cf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/b1ba3c43dc6d9b750eecb2ba.png%3Fsha%3De6645663fa7b3e83cc45fef22227faaa6b611848" alt loading="lazy" class="md-img"></p>
<p>Expo を使用する場合は、RN が一歩リードという感じ。</p>


Flutterを使って１週間でアプリ作ってみた!

公式サイトを見てモチベーションをあげる

アプリ申請までのスケジュール感

Discussion