1. HOME
  2. ブログ
  3. IT技術
  4. 【Flutter】デザインスタイルを扱うThemeの実装方法
【Flutter】デザインスタイルを扱うThemeの実装方法

【Flutter】デザインスタイルを扱うThemeの実装方法

なぜ Flutter だとスピーディーに開発できるのか?

アプリ開発の要は「品質」と「スピード」。

最近では、移り変わりの激しいユーザーニーズに対応する為に、開発スピードを重視する傾向にあります。

そこで、Google が開発したフレームワークが「Flutter」です。

【Flutter 公式ドキュメント】
https://flutter.dev/docs

Flutter に採用されている Dart ってどんなプログラミング言語?

Flutter は、プログラミング言語に「Dart」を採用しています。

Dart は、もともと JavaScript の代替として Google が開発した言語。

そのため、JavaScript や Java と共通点が多く、プログラミング経験者はもちろん、初心者でも扱いやすい仕様になっています。

Dart を使う4つのメリット

Dart には、以下のようなメリットがあります。

Dart を使う4つのメリット

これら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 つの言語で 1 か所にまとめられているため、単一コードで柔軟な開発ができるのです。

静的型付け言語

Dart は、「動的型付け」と「静的型付け」の両方に対応しています。

  1. 動的型付け言語:データ型の宣言は不要
  2. 静的型付け言語:データ型の宣言が必要

静的型付けのメリット

一般的には、静的型付けを利用したコードを使う機会の方が多いでしょう。

静的型付けを使うと、以下のようなメリットがあります。

  1. コンパイルエラーでバグを見つけやすい
  2. ドキュメントが参照しやすい

デバッグが容易な静的型付けで Dart を書けば、スピーディーに開発する事ができます。

サンプルコード

今回は、弊社を紹介するサンプルコードを作成しました。

シンプルなビューであれば、1時間足らずで作成できますよ!

サンプルコード

以下からサンプルコードが参照できます。

【DartPad】
https://dartpad.dev/257b234f0038b4b3d08212a9ae887eb4

中央上部にある Run ボタンをクリックして、実行結果を確認してみてください。

デザインをカスタマイズ

Flutter では、ThemeData を利用して、アプリ全体でテーマを統一する事ができます。

ベースのテーマを継承しつつカスタマイズ可能なので、短いコードで好みのデザインを表現できますよ。

MaterialApp の theme にmyTheme を渡し、レイアウト要素を表現する ListView 内にそれぞれの UI を配置しています。

さいごに

今回は「開発スピード」に焦点を当て、Flutter をご紹介しました。

Flutter を利用することで、 スピーディーに iOS とAndroid のネイティブアプリが開発できるようになります。

本記事が Flutter アプリ開発のお役に立てれば幸いです!

こちらの記事もオススメ!


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア