Flutterで簡単なアプリを作れるようになるまでの学習フロー
最近Androidアプリを作るときはFlutterで開発をするようになりました。まだFlutterを書き始めて1カ月くらいですが、今までのAndroid開発よりも圧倒的に書きやすく、あっという間におしゃれで機能的なアプリが作れてしまうのでとても気に入っています。
勢いあまってゴリラ.vimというVimの勉強会で『Vim + Flutterのライブコーディング』というテーマで登壇したほどです。
youtube - ゴリラ.vim #8 Live動画 アーカイブ
Flutterはまだまだ日本語の情報が少なく、ネットだけで学習を進めていこうと思うと他言語やフレームワークに比べてとっつきにくいかもしれません。じゃあ書籍を買おうかと思っても、現在Flutter入門書（入門書以外含めても）は書店に置いてあるようなもので1冊しかありません。
なので、自分がちょろっとしたものをサクサクとFlutterで開発できるようになるまでに辿ってきた学習フローをまとめたいと思います。
何はともあれ環境構築した
Flutterを開発するにはFlutterそのもののインストールのほかにAndroid / iOSの環境も構築する必要があります。Flutterは今急速に成長しているフレームワークなので、下手にQiitaなどを見るのではなく公式のインストールガイドを見ましょう。
Flutterは公式が非常に充実していてます。僕も環境構築は公式を見ながら進めたらとても簡単に構築できました🙆♂️
ちなみに、Androidを開発するのに必要なAndroid SDKはAndroid StudioというIDEにバンドルされています。なので、もし自分はAndroid Studioで開発しないよという方でもAndroid Studioのセットアップは必要になります。
同じ理由でiOS開発するならXCodeの環境構築も必要です。構築方法は両方ともFlutterの公式にあるので困らないとは思いますが、読み飛ばさないように注意です。
なお、Windowsの場合はXCodeはインストールできない = iOSは開発できないのでご注意。
GoogleのFlutterチュートリアルを実施
公式のインストールの項目を読み終えるとそのままテスト動作と最初のアプリを作ってみるチュートリアルのページがリコメンドされると思います。そのまま公式チュートリアルも進めましょう！こちらもよくできた公式チュートリアルになっていて、とてもわかりやすくとても簡単です。
このチュートリアルで、Flutterアプリの雰囲気だけじゃなく、実機、あるいはエミュレーターの動かし方、外部プラグインの導入の仕方など満遍なく開発方法を知ることができます。
ただ、注意点としては、1つ1つのコードの意味をすごく解説しているというわけではなく、多少ざっくりとしてます。少しもやっとしますが、ここはまずFlutterの雰囲気を掴むフェーズだと割り切って写経しちゃいましょう。
Dartの基礎勉強
最初のチュートリアルを実施したら、Flutterの細かいところもよくわからないけど、それ以上にDartの記法がわからないぞ🤔？ということに気づきました。
FlutterはJavaやSwiftではなくDartという言語で開発していきます。正直、Flutter以外で使う機会の少ない言語だと思うので、ほとんどの人が初見だと思います。このタイミングで軽くDartの基礎を勉強してみました。
こちらのQiitaの記事が網羅的に非常によくまとめられていて、とても分かりやすかったです。
実際にDartのコードをちょろっと書きたくなった場合は、FlutterをインストールするとDartのSDKもインストールされてます。ただパスは通っていないので、パスを通してあげれば、 main.dartファイルに対して dart main.dart コマンドとかで簡単に動かすことができます。
Flutter内のDart SDKの場所ですが、僕の環境では以下のところにありました。環境やバージョンによって変わるかもです。
flutter/bin/cache/dart-sdk/binDartの公式チュートリアルとして、codelabsにJavaエンジニア向けのDartチュートリアルコースがあります。こちらもおすすめです。
Flutterチュートリアルに戻る
Dartの基本文法を知れたのでまたFlutterのチュートリアルに戻りました。ちょっとググってたらCodelabsにFlutterのチュートリアルがいくつかあることを知ったのでCodelabsのチュートリアルに取り組みました。
取り組んだのは下の3つ
Flutter書籍を購入した
結局Flutterの書籍も買いました。
チュートリアルを進めているうちに、Widgetの網羅的な説明と、レイアウトの組み方を知りたいと思いました。
特にレイアウトの組み方です。チュートリアルでは、うまくWidgetを組み合わせてレイアウトを作成しているのですが、どうしてそう組み合わせているのかがどうにも掴みにくかったからです。まあこういうのを知るにはやっぱり書籍かなーと思ったのでkindleで買いました。紙に比べてだいぶ安かった🙄
書籍だと3000円くらい、Kindleだと1600円くらいでした。
個人的に、買ってとてもよかったです。良本です。Flutterのバージョンがベータのときの書籍なので最初の導入部分とか細かいところは参考にしにくい部分とかありますが、通勤中にWidgetの説明を読んでなるほどと理解してました。
キャッチアップの得意な人や、実際にコードを書いてとりあえず動かして学ぶタイプの人は、書籍を買わずにコードベースで実際にレイアウトを試してみるというのでも十分だと思います。
バーコード生成アプリを作ってみた
ここまでで学習はだいぶしてきたので、簡単なアプリを作ってみました。
Bargetというバーコード生成アプリです。
レイアウトの練習と、ディレクトリ構成、プラグインの導入の練習を兼ねてます。
ちなみに肝心のバーコード部分は1次元バーコード、QRコードともにライブラリを使っているので僕が作っている部分は表示のみです。笑
とは言え、とりあえずFlutterで簡単なアプリが作れるようになりました。
ここまでくれば後は実務で使うなり、個人開発してみるなりしながらスキルを高めていけばいいかなという感じです。
番外編
これは学習とは完全に別件なのですが、学習している途中で dart-vim-plugin にプルリクを送りました。
僕はFlutter開発をVimでやっているのですが、Visual Studio CodeとかAndroid Studioのようにハイライトされてませんでした。特にネストしている部分がハイライトされないとFlutterを書くときには厳しいです。
なのでハイライトされるようにオプションを追加したプルリクエストを送ってみたのですが、人生で初めてのプルリクエストだったのもあって、途中から完全に意識がそっちに行ってしまい、肝心のFlutterが放置状態だったのはいい思い出です。笑
無事マージされたので今はVimでもある程度ハイライトされます。
それではみなさんよきFlutterライフを✨！
この記事が気に入ったらサポートをしてみませんか？