【Flutter】FlutterのiOSデザインについて

はじめに

Flutterでアプリを作るとき、Dartでコードを書きながら画面を作っていきます。
その時にWidget(入力項目やテキストなどの部品)を組み合わせたり、Widgetの位置をWidgetで決めたりします。このWidgetにはマテリアルデザインというGoogleが提唱したUI・UXの設計原則のデザインのWidgetがたくさんあり、Flutter画面の大部分を構築することになります。(FlutterとマテリアルデザインはGoogleが出しているので密接なつながりがあります。)
ただiOSのデザインのようにするための方法もあるので、それらを調べて行きたいと思います。

Cupertino(クパティーノ)パッケージ

Cupertinoライブラリは、iOSデザインに対応したWidgetがあるパッケージです。
iOS風のダイアログやアクションシート、ボタン、日付ピッカーなどを表示することができます。
公式にもどのようなWidgetが用意してあるか書いてあります。


CupertinoButtonとElevatedButtonでは元のデザインが違う


ただ、iOSのデザインが全て実現できるわけではなく、実現できないようなものもあります。iPadとiPhoneでデザインが異なるアクションシートでは、iPhoneは想定通りになってもiPadではiPhoneのデザインになったりしました。
このようにどうしてもiOSのようなデザインを実現できない場合は、デザインを変更する必要がある場合があります。
https://pub.dev/packages/cupertino_icons


マテリアルデザインのaddと比べたら少し+でも違いました。

おわりに

FlutterでもiOS風なデザインのアプリが作れます。しかし、実現しない場合は工夫するかデザインを変更する必要がありそうです。
デザインのことはあまり詳しくなかったのですが、より使いやすいUI・UXを実現するためにデザインを勉強していきたいなと思います。

この記事が気に入ったらサポートをしてみませんか?