Flutterで『同じdp指定』なのにズレる理由と、flutter_screenutilで実現する大画面でも崩れないUI設計

実際のピクセル数 = dp × (DPI / 160)   
　　              = dp × devicePixelRatio

Copy

10dp × (360 / 160) = 22.5px

Copy

// 横幅の30%を指定
MediaQuery.of(context).size.width * 0.3

Copy

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: MediaQuery.of(context).size.width * 0.04, // 画面幅の4%
  ),
);

Copy

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // flutter_screenutilの初期化
    // designSize: デザイン時の基準となる画面サイズ（例：FigmaやXDで設計したサイズを指定）
    // minTextAdapt: テキストサイズの自動調整を有効化
    // splitScreenMode: 分割画面モード対応
    // builder: ScreenUtilInitのコンテキスト外でもライブラリを使いたい場合のみ利用
    return ScreenUtilInit(
      designSize: const Size(1080, 1920), // ここをデザイン基準サイズに合わせて設定
      minTextAdapt: true, // テキストサイズも画面サイズに合わせて調整
      splitScreenMode: true, // 分割画面でも正しくスケーリング
      builder: (_, child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'ScreenUtil Sample',
          // テーマ内でもScreenUtilのスケーリングを利用可能
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018
                .apply(fontSizeFactor: 1.sp), // フォントサイズもスケーリング
          ),
          home: child, // childに指定したウィジェットがホーム画面になる
        );
      },
      child: const HomePage(), // アプリのホーム画面
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              Container(
                width: 540, // 幅をスケーリング
                height: 100, // 高さをスケーリング
                color: Colors.blueAccent,
                child: Center(
                  child: Text(
                    'Hello, Flutter!',
                    style: TextStyle(fontSize: 24.sp), // フォントサイズもスケーリング
                  ),
                ),
              ),
              Container(
                width: 540.w, // 幅をスケーリング
                height: 100.h, // 高さをスケーリング
                color: Colors.orange,
                child: Center(
                  child: Text(
                    'Hello, Flutter!',
                    style: TextStyle(fontSize: 24.sp), // フォントサイズもスケーリング
                  ),
                ),
              ),
            ],
          ),
          Image.asset(
            'assets/icon/hoge.jpeg',
            width: 1080.w,
            height: 1100.h,
            fit: BoxFit.cover,
          ),
          Row(
            children: [
              Container(
                width: 540.w, // 幅をスケーリング
                height: 720.h, // 高さをスケーリング
                color: Colors.red,
                child: Center(
                  child: Text(
                    'Hello, Flutter!',
                    style: TextStyle(fontSize: 24.sp), // フォントサイズもスケーリング
                  ),
                ),
              ),
              Container(
                width: 540.w, // 幅をスケーリング
                height: 720.h, // 高さをスケーリング
                color: Colors.green,
                child: Center(
                  child: Text(
                    'Hello, Flutter!',
                    style: TextStyle(fontSize: 24.sp), // フォントサイズもスケーリング
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Copy