Flutterの全体構成を知る
Flutterという名前は
あくまで
モバイルフレームワーク
という位置付けであり、言語ではありません。
しかりこれだとまったくイメージがつかず、わからないことがあると行き詰まってしまいます。
そこで、Flutterの構成を様々な視点から解説してみました。
４つの視点で解説していきます。
- アプリ開発視点
- 環境構築目線
- コーディング視点
- 土台目線
アプリ開発視点
アプリ開発視点でみると
Flutterは
Dart言語で動いています。
DartはGoogle社が開発した言語であり、Flutterが登場する前からGoogle社が
WEB開発用の言語として使用されていたようです。
そして、Flutterの最大の特徴は
すべてWidgetで構成されています。
FlutterはWidgetが全て
と言っても良いくらい
Widgetの組み合わせでアプリが構成されます。
Widgetには
チェックボックス、テキストボックス、リストボックスなどなど様々用意されており、
さらにそれが階層関係を成して構成されていいます。
公式動画でもそのように解説しています。
開発環境目線
環境構築する際の目線です。
これを知っておくと
エラーが出た時に何が悪いのか？
を更に深くを切り分けることができるようになります。
AndroidStudioの場合の例で解説しますが他も似たようなものだと思います。
開発環境は以下のように構築されています。
- Flutter SDK
- Andoroid
- XCODE
- Android Studio
- JDK
- AVDマネージャー
Flutter SDKというのがメインになります。
Andorid/XCODEはクラスプラットフォームを実現するために必要です。
Android Studioは開発するための統合環境です。
これが無いとデバッグやテストがかなり効率悪くなります。
JDKはAndroid Studioを動かすために必要です。
AVDマネージャーはスマートフォンアプリのシミュレーション機能に必要なものです。
AVDマネージャーがあることで、いちいち実機でテストをしなくてもAndorid Studio上でスマートフォンアプリのテストがパソコン上でできます。
コーディング視点
コーディングの視点では
Android studioの左側にある、プロジェクトフォルダを観てみしょう。
それが全てです。
たくさんありますが、よく使うところだけ抑えれば大体把握できます。
- lib -> main.dart
- assets
- pubspec.yaml
- android
- ios
よく使う順に説明します
1.lib -> main.dart
プログラムのソースコードを記述する部分です。
一番のメインどころです。
ここでWidgetを記述していきアプリを開発していきます。
assets
画像や音楽ファイルを入れる場所です。
自分で作る必要があります。
名前はassetsでなくてもいいのですが、
gitの他人のソースをみると、大体assetsになっています。
私もそれに習っております。
pubspec.yaml
DartやFlutterのSDKバージョンが記載されています。
また、FlutterのAPIを追加したい場合は
ここに記載すると使えるようになります。
私は頻繁に使っています。
android/ios
ここの配下に直接
andorid（kotlin）とios(swift)の言語を記述できます。
まだFlutterで実装されていないけど、kotlin/swiftでは実現できる機能の場合、ここに記述して呼び出すことで実現することができます。
これをnative連携と呼んでいます。
初心者のうちは使わないとは思います。
土台目線
これはあくまで興味レベルだと思います。
Flutter自体はC/C++で作られているみたいです。
これから新しい言語を開発してやるぜ！
と言う人以外は覚えなくても良いかなと思います。
※公式サイトから抜粋
URL：https://docs.flutter.dev/resources/architectural-overview
最後に
今回紹介した視点別のFlutterの構成は頭に叩き込混む必要はないのですが、
少しでも頭に入っていれば、
- 新技術を使うとき
- エラーを回避するとき
- バージョンアップした時
など、様々な場面で、役に立ちと思うので、覚えておくと良いと思っています。
