【Flutter】デザインスタイルを扱うThemeの実装方法
2021.12.20
なぜ Flutter だとスピーディーに開発できるのか？
アプリ開発の要は「品質」と「スピード」。
最近では、移り変わりの激しいユーザーニーズに対応する為に、開発スピードを重視する傾向にあります。
そこで、Google が開発したフレームワークが「Flutter」です。
【Flutter 公式ドキュメント】
https://flutter.dev/docs
Flutter に採用されている Dart ってどんなプログラミング言語？
Flutter は、プログラミング言語に「Dart」を採用しています。
Dart は、もともと JavaScript の代替として Google が開発した言語。
そのため、JavaScript や Java と共通点が多く、プログラミング経験者はもちろん、初心者でも扱いやすい仕様になっています。
Dart を使う4つのメリット
Dart には、以下のようなメリットがあります。
これら4つのメリットが、Flutter のスピーディーなアプリ開発を支えているのです。
それでは、ひとつずつ見ていきましょう！
事前コンパイラ（AOT）
Dart は、高速なネイティブコードを生成する「事前コンパイラ (Ahead Of Time)」を採用しています。
そのため、Flutter は動作が高速になるだけでなく、幅広いプラットフォームでネイティブに対応することが可能です。
同時開発で開発時間を短縮
つまり、「iOS」「Android」「Web」の開発を同時に行えるので、開発時間を大幅に削減できるのです。
実際、Flutter と Flutter for Web の間で、最大70％のコードが再利用可能となっています。
実行時コンパイラ（JIT）
Dart は「実行時コンパイラ(Just In Time) 」も採用しています。
実は、前述の AOT コンパイルを行うと、開発サイクルが大幅に遅くなります。
というのも、プログラムを変更してから結果を確認するまで、全てをネイティブコードに変換しなければならないからです。
高速な開発スタイルとワークフローを実現
この問題を解決してくれるのが、JIT コンパイルの「ホットリロード」です。
通常 1 秒以内にコードをリロードして、プログラムを実行し続けることができます。
実行時に、解析やコンパイルのために一時停止することもありません。
統一されたレイアウト
Flutter には、HTML や XML のようなレイアウト言語は不要です。
以下で示すように、「レイアウト要素」と「UI 要素」の両方をウィジェットで表現できるからです。
1 2 3 | Center( // レイアウト要素 child: Text('Sample') // UI要素 ) |
コンポーネントが 1 つの言語で 1 か所にまとめられているため、単一コードで柔軟な開発ができるのです。
静的型付け言語
Dart は、「動的型付け」と「静的型付け」の両方に対応しています。
- 動的型付け言語：データ型の宣言は不要
- 静的型付け言語：データ型の宣言が必要
静的型付けのメリット
一般的には、静的型付けを利用したコードを使う機会の方が多いでしょう。
静的型付けを使うと、以下のようなメリットがあります。
- コンパイルエラーでバグを見つけやすい
- ドキュメントが参照しやすい
デバッグが容易な静的型付けで Dart を書けば、スピーディーに開発する事ができます。
サンプルコード
今回は、弊社を紹介するサンプルコードを作成しました。
シンプルなビューであれば、１時間足らずで作成できますよ！
以下からサンプルコードが参照できます。
【DartPad】
https://dartpad.dev/257b234f0038b4b3d08212a9ae887eb4
中央上部にある Run ボタンをクリックして、実行結果を確認してみてください。
デザインをカスタマイズ
Flutter では、ThemeData を利用して、アプリ全体でテーマを統一する事ができます。
ベースのテーマを継承しつつカスタマイズ可能なので、短いコードで好みのデザインを表現できますよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | final ThemeData myTheme = ThemeData( primarySwatch: MaterialColor(4280361249, { 50: Color(0xfff2f2f2), 100: Color(0xffe6e6e6), 200: Color(0xffcccccc), 300: Color(0xffb3b3b3), 400: Color(0xff999999), 500: Color(0xff808080), 600: Color(0xff666666), 700: Color(0xff4d4d4d), 800: Color(0xff333333), 900: Color(0xff191919) }), brightness: Brightness.dark, primaryColor: Color(0xff212121), accentColor: Color(0xff64ffda), ); |
MaterialApp の theme にmyTheme を渡し、レイアウト要素を表現する ListView 内にそれぞれの UI を配置しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: myTheme, home: Scaffold( appBar: AppBar( title: Text('会社紹介'), ), body: ListView( children: [ Image.network( 'https://rightcode.co.jp/wp-content/uploads/2019/02/540-540_5.jpg', width: 600, height: 240, fit: BoxFit.cover, ), titleSection, buttonSection, textSection, ], ), ), ); |
さいごに
今回は「開発スピード」に焦点を当て、Flutter をご紹介しました。
Flutter を利用することで、 スピーディーに iOS とAndroid のネイティブアプリが開発できるようになります。
本記事が Flutter アプリ開発のお役に立てれば幸いです！
こちらの記事もオススメ！
書いた人はこんな人
- 「好きを仕事にするエンジニア集団」の（株）ライトコードです！
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。
システム開発依頼・お見積もり大歓迎！
また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です！
インターンや新卒採用も行っております。
以下よりご応募をお待ちしております！
https://rightcode.co.jp/recruit
ITエンタメ10月 13, 2023Netflixの成功はレコメンドエンジン？- ライトコードの日常8月 30, 2023退職者の最終出社日に密着してみた！
- ITエンタメ8月 3, 2023世界初の量産型ポータブルコンピュータを開発したのに倒産!?アダム・オズボーン
- ITエンタメ7月 14, 2023【クリス・ワンストラス】GitHubが出来るまでとソフトウェアの未来
関連記事
採用情報
\ あの有名サービスに参画!? /
バックエンドエンジニア
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界を変える…！ /
Androidエンジニア
\ みんなが使うアプリを創る /
iOSエンジニア
