All Devices Aspect Ratio by Flutter

こんにちはEveryDaySoft代表の永田です。

今回は題名のすべてのデバイスのアスペクト比対応について紹介したします。

PackageのScreenUtilなどは有名ですが、他にも方法はあります。

 

挙動

 

主な機能

FractionallySizedBoxは、Flutterのウィジェットで、親ウィジェットに対する相対的なサイズで幅と高さを指定することができます。つまり、親ウィジェットの幅や高さの一部(例えば、50%や80%など)を使用して子ウィジェットのサイズを決定することができます。

FractionallySizedBoxは、widthFactorおよびheightFactorプロパティを使用して、親ウィジェットの幅および高さに対する子ウィジェットの幅および高さの割合を指定します。widthFactorおよびheightFactorの値は0から1の間で指定され、1は親ウィジェットの幅または高さと同じサイズを意味します。

例えば、FractionallySizedBoxを使用して、親ウィジェットの幅の80%および高さの40%のサイズを持つ子ウィジェットを作成できます。

 

AspectRatioは、Flutterのウィジェットで、子ウィジェットのサイズを特定のアスペクト比に制約するために使用されます。アスペクト比は、幅と高さの比率で表され、一般的な例として16:9や4:3などがあります。AspectRatioウィジェットは、子ウィジェットの幅と高さの関係を維持しながら、可能な限り親ウィジェットの空間を埋めるように子ウィジェットを拡大・縮小します。

AspectRatioウィジェットは、aspectRatioプロパティを使用して、子ウィジェットの幅と高さの比率を指定します。例えば、アスペクト比が16:9の子ウィジェットを作成するには、以下のようにAspectRatioウィジェットを使用します。

 

コード

https://gist.github.com/DaisukeNagata/1175b1fa039659c5b61c43512d0008c7

 

packageだけでは対応できない場合など試してみてください。

貴重なお時間お読みくださいまして、誠にありがとうございます。