neura’s blog

ブログの一言説明 (Description)

flutter初心者のレスポンシブデザイン

初心者がflutterでのAndroidアプリの開発で躓いた所を書きます

 

flutterの環境構築をしていざアイデアを具現化してアプリを作ろう!ってなったときまず設計でuiを考えますが、レスポンシブデザインについてどのように対応するか考えてしまいませんか?

 

特にAndroid端末は機種が無限にあり、解像度が豊富なだけでなく、機種依存の独自機能が盛り込まれていることも多いです。

 

ContainerやCardの親ウィジェットが配置が自由だしとりあえず殆どContainarで配置できれば楽だと思ったんですがレスポンシブに対応していません。解像度が変わると配置が全て変わってしまいます。

 

そのためRow(行) Column(桁)のような親ウィジェットで作る必要があるのですが当然UI設計が難しくなります。

複雑なUIにするとデバッグも大変になって詰みます。

 

まずエラーは出る前提なのでいかにデバッグが必要な範囲を減らせるか?という点は設計段階から考えてください。

 

ウィジェットを増やせば増やす程、ビルドできる可能性が低くなります。詰んだら最後、解決方法が記載されているサイトが少ない上、エラーメッセージを読んでその通りに改善してもバグが取れないことがあります。そのような事が起きてしまうとデバッグ神社を立ててビルド出来ることを祈るしかなくなります…

 

まず初心者はポートフォリオのように一旦ビルドまで進むためにも自分の端末だけでも綺麗に表示されれば良いのではないでしょうか?

 

 

 

他の方法も考えてみましょう。

 

★SwiftUIで開発する方法

iosアプリのみの開発の場合はswiftだとswiftuiというfluttwrflowのようなフレームワークがあり、エミュ上で視覚的にuiを作れるみたいなのでiosのみのアプリ開発ならこちらの方がいいかもしれません。

以前からストーリーボードといった視覚的に開発できるフレームワークがありましたが、この新しいフレームワークが出てきた事により、さらに開発しやすくなりました。

flutterflowよりはまだ、解説記事も豊富です。しかしかなり新しめのmacosが入ったmacが必要なので開発には初期投資が必要です。(flutterでの開発でもビルド時はmacが必要です)

iphone端末は数が少ないのでレスポンシブデザインに対応しやすいです。

またiosSafariが端末に組み込まれている仕様など、設計思想からしデバッグもflutterより楽だと考えられます。

 

★webviewでサイトを表示する方法

ストアに出すならwebviewに価値を依存しすぎると審査落ちリスクがあります。またwebviewだとgoogle.comなど表示ができないサイトは多いです。サイト上でGoogleのアカウントを使ってログインする事もできません。

このような機能はfirebaseやGCPなどで対応する必要があります

普通にhtml,css,jsでウェブサイトを作ってレスポンシブ対応をしたほうがいいかもしれません。アプリより必要工数も少ないと思います。ios,android全機種,pc全対応のサイトを作ることも狙えます。

 

 

 

なにかあればコメントいただけると嬉しいです。