システム開発部のTです。Flutterでアプリを開発するということは、当然iOS、Android両方で見た目も同じUIができますよね？以下、iOS（左画像）、Android（右画像）両方で見た画面デザインです。 いかがでしょう。同じですよね！これがFlutterで作った場合のアプリの強みかと思います。 しかし、このマテリアルデザインの場合、どうしてもAndroidっぽいUIになるのは当然です。では、iOSみたいなフラットデザインにはできないものでしょうか。 Flutterの公式サイトには、Cupertino（iOS-Style）Widgetというのがあります。 https://flutter.dev/docs/development/ui/widgets/cupertino このWidgetを利用することで、以下のようにiOSっぽいデザインにすることも可能です。 こんな感じにUIをデザインすることが可能になりますが、可能であればプラットフォームごとにデザインが切り替わるようにできればと思ってしまいます。 本件では、iOS、Androidの各プラットフォーム上で動作するときに、自動で各プラットフォームに適したUIに切り替わってくれるライブラリ「flutter_platform_widgets」を紹介します。 flutter_platform_widgetsの追加 以下のページのライブラリをインストールします。https://pub.dev/packages/flutter_platform_widgets dependenciesにflutter_platform_widgetを追加してください。 その後、「pub get」でインストール完了です。 main.dartの整理 プロジェクト生成直後、余計なコメント等があるので、削除していきます。コメント削除後のmain.dartです。 上記のmain.dartに今回のflutter_platform_widgetを反映させます。 flutter_platform_widget反映 特に難しいことはありませんので、以下の内容にて書き換えていきます。 MyAppの書き換え MaterialAppをPlatformAppに書き換えます。MaterialAppに存在していたthemeについては存在しないので削除してください。 _MyHomePageState反映 こちらもMaterial系のwidgetを書き換えていきます。ScaffoldだったところをPlatformScaffoldに、appBarもPlatformAppBarにします。Scaffoldに存在していたfloatingActionButtonが存在しないので削除。代替えとして、PlatformIconButtonを追加しました。 以上、簡単な置き換えでしたが、上記にて動作確認してみます。 動作確認 iOS、Androidそれぞれで実行した結果が以下になります。 UI部品が少ないので、物足りないところではございますが、OSに合ったスタイルになれたかと思います。OSごとに分ける必要がある場合、参考にしてみていただければと思います。PlatformWidgetのUI部品は他にも存在するので試してみてください。 まとめ ここまで使ってみての所感ですが、やはりMaterialWidgetのほうが種類も使いやすいものも多いように見えました。実際には、flutter_platform_widget以外にも同系統のライブラリもあるので、ご自身に合うライブラリで実装していただければと思います。

Read more of this post