web-dev-qa-db-ja.com

フラッター画面サイズ

フラッターで新しいアプリケーションを作成しましたが、異なるデバイスを切り替えるときに画面サイズに問題がありました。

Pixel 2XL画面サイズを使用してアプリケーションを作成しました。ListViewの子を持つコンテナがあるため、コンテナの高さと幅を含めるように求められました。

そのため、デバイスを新しいデバイスに切り替えると、コンテナーが長すぎてエラーがスローされます。

アプリケーションがすべての画面に最適化されるようにするにはどうすればよいですか？

dartscreenflutterscreen-size
22
Tom O'Sullivan

次を使用できます。

  • double width = MediaQuery.of(context).size.width;
  • double height = MediaQuery.of(context).size.height;
74
yashthakkar1173

widthを取得するのは簡単ですが、heightは扱いにくい場合があります。以下はheightを処理する方法です

// full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// height without SafeArea
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// height without status bar
double height2 = height - padding.top;

// height without status and toolbar
double height3 = height - padding.top - kToolbarHeight;
2
CopsOnRoad

MediaQuery.of(context).size.widthおよびMediaQuery.of(context).size.heightは非常に機能しますが、特定の高さ幅を設定するために、常にwidth/20などの式を記述する必要があります。

フラッターで新しいアプリケーションを作成しましたが、異なるデバイスを切り替えるときに画面サイズに問題がありました。

はい、flutter_screenutilプラグイン 画面とフォントサイズの調整に利用できます。 UIにさまざまな画面サイズで適切なレイアウトを表示させてください！

使用法：

依存関係を追加：

インストールする前に最新バージョンを確認してください。

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

次のインポートをDartコードに追加します：

import 'package:flutter_screenutil/flutter_screenutil.Dart';

システムの「フォントサイズ」アクセシビリティオプションに応じて、フィットサイズとフォントサイズを初期化して設定します

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//If you wang to set the font size is scaled according to the system's "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

使用：

//for example:
//rectangle
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

////If you want to display a square:
Container(
           width: ScreenUtil().setWidth(300),
           height: ScreenUtil().setWidth(300),
            ),

詳細については、更新された ドキュメント を参照してください

注：私はこのプラグインをテストして使用しましたが、iPadを含むすべてのデバイスで本当にうまく機能します

これが誰かを助けることを願っています

1
Rahul Mahadik