responsive_framework と flutter_screenutil

responsive_framework と flutter_screenutil はどちらもレスポンシブ対応を助ける便利なライブラリですが、そもそもの目的やアプローチが違います。プロジェクトのニーズに合わせて選ぶとよいでしょう。

flutter_screenutil の特徴

• 設計稿ベースの等比縮放
  • .w、.h、.sp といった拡張を使い、デザインカンプ（例：375×812pt）上の数値をそのまま真機にマッピング
  • 文字・コンテナ・間隔・角丸などあらゆる要素を “一律” に等比変換
• 初期設定がシンプル
  • ScreenUtilInit(designSize: Size(…, …)) 一回書くだけで、あとは自由
• 強み
  • デザイン通りの見た目を短期間で再現したい
  • チームで「デザインの数値」を厳密に守りたい
• 留意点
  • 文字サイズまで強制的に等比されるため、超大画面だと文字が巨大化しすぎるリスクも
  • レイアウトよりも「等比」が中心なので、Flex＋自動折り返し系との併用が若干面倒

responsive_framework の特徴

• ブレイクポイント＆グリッド／レスポンシブラッパー
  • MaterialApp の builder にラップして、画面幅ごとに自動でレイアウトを切り替えたり、スケールさせたりできる
  • CSS ライクに「MOBILE / TABLET / DESKTOP」などのブレイクポイント設定が可能
• コンテナやテキストを“自動スケーリング”
  • ウィジェット単位でのスケーリングコンテナ（ResponsiveRowColumn や ResponsiveGridView）を提供
• 強み
  • ブレイクポイントベースなので、スマホ・タブレット・PC でまったく異なる構成を簡単に実現
  • あらかじめ組み込まれたグリッドレイアウトで、複雑な多カラム構成も楽
• 留意点
  • 細かいデザイン数値を一切守るわけではなく、あくまで大まかな“閾値”での切り替え重視
  • グリッドやレスポンシブレイアウトに慣れてないと最初は少し学習コストあり

選び方の目安

シチュエーション	オススメ
デザインカンプをそのまま等比再現したい	flutter_screenutil
スマホ／タブレット／デスクトップで構成を切り替えたい	responsive_framework
デザイン厳守＋細かい数値指示が多い	flutter_screenutil
ブレイクポイント／グリッド中心の開発	responsive_framework
小規模 or プロトタイプ	flutter_screenutil（設定がシンプル）
大規模 or 複数画面サイズに対応	responsive_framework

まとめ

ぽよぽよチェスでは flutter_screenutil を使っていますが、超大画面では文字サイズが大きくなりすぎる問題があります。今後は responsive_framework に移行する予定です。