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 アプリ開発のお役に立てれば幸いです!

記事を書いた人

\ Flutter好き多し! /
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

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


ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア