• トップ
  • ブログ一覧
  • 【Flutter】デザインスタイルを扱うThemeの実装方法
  • 【Flutter】デザインスタイルを扱うThemeの実装方法

    広告メディア事業部広告メディア事業部
    2020.11.16

    IT技術

    なぜ 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 要素」の両方をウィジェットで表現できるからです。

    1Center( // レイアウト要素
    2  child: Text('Sample')  // UI要素
    3)

    コンポーネントが 1 つの言語で 1 か所にまとめられているため、単一コードで柔軟な開発ができるのです。

    静的型付け言語

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

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

    静的型付けのメリット

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

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

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

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

    サンプルコード

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

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

    サンプルコード

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

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

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

    デザインをカスタマイズ

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

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

    1final ThemeData myTheme = ThemeData(
    2  primarySwatch: MaterialColor(4280361249, {
    3    50: Color(0xfff2f2f2),
    4    100: Color(0xffe6e6e6),
    5    200: Color(0xffcccccc),
    6    300: Color(0xffb3b3b3),
    7    400: Color(0xff999999),
    8    500: Color(0xff808080),
    9    600: Color(0xff666666),
    10    700: Color(0xff4d4d4d),
    11    800: Color(0xff333333),
    12    900: Color(0xff191919)
    13  }),
    14  brightness: Brightness.dark,
    15  primaryColor: Color(0xff212121),
    16  accentColor: Color(0xff64ffda),
    17);

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

    1MaterialApp(
    2  title: 'Flutter Demo',
    3  debugShowCheckedModeBanner: false,
    4  theme: myTheme,
    5  home: Scaffold(
    6    appBar: AppBar(
    7      title: Text('会社紹介'),
    8    ),
    9    body: ListView(
    10      children: [
    11        Image.network(
    12          'https://rightcode.co.jp/wp-content/uploads/2019/02/540-540_5.jpg',
    13          width: 600,
    14          height: 240,
    15          fit: BoxFit.cover,
    16        ),
    17        titleSection,
    18        buttonSection,
    19        textSection,
    20      ],
    21    ),
    22  ),
    23);

    さいごに

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

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

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

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

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
    featureImg2020.07.27IT・コンピューターの歴史特集IT・コンピューターの歴史をまとめていきたいと思います!弊社ブログにある記事のみで構成しているため、まだ「未完成状態」...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事