さまざまな画面サイズに応じてフラッターアプリをレスポンシブにする方法は?


84

さまざまな画面サイズに応じてレスポンシブにするのに苦労しています。レスポンシブにする方法は?

@override
       Widget build(BuildContext context) {
       return new Container(
       decoration: new BoxDecoration(color: Colors.white),
       child: new Stack(
        children: [
          new Padding(
            padding: const EdgeInsets.only(bottom: 350.0),
            child: new GradientAppBar(" "),
          ),
          new Positioned(
            bottom: 150.0,
            height: 260.0,
            left: 10.0,
            right: 10.0,
            child: new Padding(
              padding: new EdgeInsets.all(10.0),
              child: new Card(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const ListTile(
                      title: const Text(
                        'LOGIN',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.50,
                          fontFamily: "Helvetica",
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.00,
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        controller: _user1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a username'),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person_pin),
                      title: new TextField(
                        controller: _pass1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a password'),
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          new Positioned(
            bottom: 70.0,
            left: 15.0,
            right: 05.0,
            child: new ButtonTheme.bar(
            // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 13.0),
                    child: new Text(
                      'REGISTER HERE',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/facebook');
                    },
                  ),
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 22.0),
                    child: new Text(
                      'FORGOT PASSWORD?',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/Forgot');
                    },
                  ),
                ],
              ),
            ),
          ),
          new Positioned(
            bottom: 73.0,
            height: 180.0,
            left: 20.0,
            right: 52.0,
            child: new Padding(
              padding: new EdgeInsets.all(0.00),
              child: new ButtonTheme(
                minWidth: 10.0,
                height: 20.0,
                padding: new EdgeInsets.only(right: 37.0),
                child: new ButtonBar(children: <Widget>[
                  new CupertinoButton(
                      borderRadius:
                          const BorderRadius.all(const Radius.circular(36.0)),
                      padding: new EdgeInsets.only(left: 70.0),
                      color: const Color(0xFF426DB7),
                      child: new Text(
                        "     LOGIN                            ",
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 12.50,
                            fontFamily: "Handwriting",
                            fontWeight: FontWeight.w500,
                            letterSpacing: 0.00),
                      ),
                      onPressed: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

回答:


71

MediaQueryクラスの使用:

MediaQueryData queryData;
queryData = MediaQuery.of(context);

MediaQuery:メディアクエリが指定されたデータに解決されるサブツリーを確立します。

MediaQueryData:メディア(ウィンドウなど)に関する情報。

デバイスのピクセル比を取得するには:

queryData.devicePixelRatio

デバイス画面の幅と高さを取得するには:

queryData.size.width
queryData.size.height

テキストの倍率を取得するには:

queryData.textScaleFactor

AspectRatioクラスの使用:

ドキュメントから:

子のサイズを特定のアスペクト比にしようとするウィジェット。

ウィジェットは最初に、レイアウト制約で許可されている最大幅を試します。ウィジェットの高さは、幅と高さの比率として表される、指定されたアスペクト比を幅に適用することによって決定されます。

たとえば、16:9の幅:高さのアスペクト比の値は16.0 /9.0になります。最大幅が無限大の場合、最大高さにアスペクト比を適用して初期幅を決定します。

次に、2番目の例を考えてみましょう。今回は、アスペクト比が2.0で、レイアウトの制約により、幅が0.0から100.0の間、高さが0.0から100.0の間である必要があります。幅100.0(許容される最大)と高さ50.0(アスペクト比に一致する)を選択します。

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

また、使用することができます


3
デバイスの幅と高さを取得できますqueryData。テストサイズ、パディング、マージンを設定するにはどうすればよいですか。
ファーハナ

28

このクラスは、initメソッドを使用してクラスを初期化するのに役立ちます。

import 'package:flutter/widgets.dart';

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context){
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth/100;
    blockSizeVertical = screenHeight/100;
    _safeAreaHorizontal = _mediaQueryData.padding.left +
        _mediaQueryData.padding.right;
    _safeAreaVertical = _mediaQueryData.padding.top +
        _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;
    safeBlockVertical = (screenHeight - _safeAreaVertical)/100;
  }
}

次に、ウィジェットディメンションでこれを行います

Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
    height: SizeConfig.safeBlockVertical * 10, //10 for example
    width: SizeConfig.safeBlockHorizontal * 10, //10 for example
    );}

この投稿者へのすべてのクレジット:https//medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a


このSizeConfigクラスでEdgeInsetsの下部を追加するにはどうすればよいですか?
Farwa

コンテナのパディングが機能すると思います。あなたを助けるために私に言ってみてください!

16

私がやっていることは、画面の幅と高さを取得し、そこから100 * 100のグリッドを計算して、物を配置およびスケーリングし、再利用できる静的変数として保存することです。ほとんどの場合、非常にうまく機能します。このような:

AppConfig.width = MediaQuery.of(context).size.width;
AppConfig.height = MediaQuery.of(context).size.height;
AppConfig.blockSize = AppConfig.width / 100;
AppConfig.blockSizeVertical = AppConfig.height / 100;

次に、次のように、これらの値に従ってすべてをスケーリングします。

double elementWidth = AppConfig.blockSize * 10.0;   // 10% of the screen width

または

double fontSize = AppConfig.blockSize * 1.2;

安全領域(ノッチなど)がレイアウトを強制終了することがあるので、これも考慮することができます。

AppConfig.safeAreaHorizontal = MediaQuery.of(context).padding.left +
    MediaQuery.of(context).padding.right;

double screenWidthWithoutSafeArea = AppConfig.width - AppConfig.safeAreaHorizontal;

これは、最近のいくつかのプロジェクトでうまく機能しました。


1
fontSizesを計算する方法は?幅や高さに基づいて計算するのは良いですか?
HarshBhavsar19年

私は幅に基づいてそれらを計算しています。しかし、正直なところ、横向きモードと縦向きモードの両方をサポートするアプリでは試していません。ただし、両方の方向で異なる方法で計算できる場合があります。
datayeah

これは、画面密度の違いの問題をどのように正確に解決しますか?画面を100 * 100グリッドブロックに分割すると言うことで、結果のブロックがすべて同じサイズ(つまり正方形)であるように聞こえますが、そうではありません。垂直方向(画面の高さ)のピクセル数が水平方向(画面の幅)の2倍のデバイスを使用している場合、結果のブロックは正方形ではなく長方形になります。つまり、コードで解決しようとしたのと同じ問題が発生します。これを証明するために、複数の画面密度でコードをテストします。ですから、これは私にとって本当に解決策ではありません。
SilSur

@SilSur、ブロックがどのデバイスや密度でも同じサイズではないことを確認してください。ただし、それが機能する理由です(ほとんどの場合)。ブロックの幅または高さ、あるいはその両方に関して位置とサイズを計算する場合は、画面に追加するウィジェットごとに決定する必要があります。私は、デバイス固有の修正なしで、iphone、ipad、またはandroidの電話/タブレットで実行されるアプリでこの方法を使用しました。風景と肖像画。しかし、この方法ではまだ複雑なUIの問題を完全に解決できるわけではありません。私はまだこれを処理するためのより良いものを探しています。
datayeah

9

MediaQueryクラスを確認する

たとえば、現在のメディア(たとえば、アプリを含むウィンドウ)のサイズを知るために、:によって返されるMediaQueryData.sizeプロパティを読み取ることができます。MediaQueryDataMediaQuery.ofMediaQuery.of(context).size

したがって、次のことができます。

 new Container(
                      height: MediaQuery.of(context).size.height/2,
..            )

位置付けの代わりにmediaQueryを使用するという意味ですか?
praveen Dp 2018

何をしようとしているのかわかりません
aziza 2018

スタック内に配置されたパディングを使用します。画面サイズに調整しました。応答性を高めるために、何の代わりにメディアクエリを使用する必要がありますか?
praveen Dp 2018

5

スケールサイズの入力として、幅または高さのパーセンテージを使用できます。

fontSize: MediaQuery.of(_ctxt).size.height * 0.065

最後の乗数が、テキストがアクティブなエミュレーターに適しているように見える値を持っている場合。

以下は、すべてのスケーリングされたディメンションが1か所に集中するように設定する方法です。このようにMedia.of()して、コード全体で呼び出しを探すことなく、ホットリロードを使用して簡単かつ迅速に再実行できます。

  1. すべてのマッピングを保存するファイルを作成しますappScale.dart

    class AppScale {
      BuildContext _ctxt;
    
      AppScale(this._ctxt);
    
      double get labelDim => scaledWidth(.04);
      double get popupMenuButton => scaledHeight(.065); 

      double scaledWidth(double widthScale) {
        return MediaQuery.of(_ctxt).size.width * widthScale;
      }
    
      double scaledHeight(double heightScale) {
        return MediaQuery.of(_ctxt).size.height * heightScale;
      }
    }

  1. 次に、スケーリングされた値が必要な場所でそれを参照します

    AppScale _scale = AppScale(context);

    // ... 

    Widget label1 = Text(
      "Some Label",
      style: TextStyle(fontSize: _scale.labelDim),
    );

この投稿の回答に感謝します


4

私はここで他の人(@ datayeah&Vithani Ravi)のソリューションを少し激しくノックしてきたので、この可変画面密度スケーリングの問題を解決するための私自身の試みを共有するか、黙ってみようと思いました。したがって、私はこの問題に堅実/固定の基盤からアプローチします。すべてのスケーリングは、2:1(高さ:幅)の固定(不変)比に基づいています。私は、アプリ全体ですべての面倒な作業(および便利なコードフィネス)を行うヘルパークラス「McGyver」を持っています。この「McGyver」クラスには、静的メソッドと静的定数クラスのメンバーのみが含まれています。

比率スケーリング方法:2:1のアスペクト比に基づいて、幅と高さの両方を個別にスケーリングします。幅と高さの入力値を取得し、それぞれを幅と高さの定数で除算し、最後に、それぞれの幅と高さの入力値をスケーリングするための調整係数を計算します。実際のコードは次のようになります。

import 'dart:math';
import 'package:flutter/material.dart';

class McGyver {

  static const double _fixedWidth = 410;    // Set to an Aspect Ratio of 2:1 (height:width)
  static const double _fixedHeight = 820;   // Set to an Aspect Ratio of 2:1 (height:width) 

  // Useful rounding method (@andyw solution -> /programming/28419255/how-do-you-round-a-double-in-dart-to-a-given-degree-of-precision-after-the-decim/53500405#53500405)
  static double roundToDecimals(double val, int decimalPlaces){
    double mod = pow(10.0, decimalPlaces);
    return ((val * mod).round().toDouble() / mod);
  }

  // The 'Ratio-Scaled' Widget method (takes any generic widget and returns a "Ratio-Scaled Widget" - "rsWidget")
  static Widget rsWidget(BuildContext ctx, Widget inWidget, double percWidth, double percHeight) {

    // ---------------------------------------------------------------------------------------------- //
    // INFO: Ratio-Scaled "SizedBox" Widget - Scaling based on device's height & width at 2:1 ratio.  //
    // ---------------------------------------------------------------------------------------------- //

    final int _decPlaces = 5;
    final double _fixedWidth = McGyver._fixedWidth;
    final double _fixedHeight = McGyver._fixedHeight;

    Size _scrnSize = MediaQuery.of(ctx).size;                // Extracts Device Screen Parameters.
    double _scrnWidth = _scrnSize.width.floorToDouble();     // Extracts Device Screen maximum width.
    double _scrnHeight = _scrnSize.height.floorToDouble();   // Extracts Device Screen maximum height.

    double _rsWidth = 0;
    if (_scrnWidth == _fixedWidth) {   // If input width matches fixedWidth then do normal scaling.
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * (percWidth / 100)), _decPlaces);
    } else {   // If input width !match fixedWidth then do adjustment factor scaling.
      double _scaleRatioWidth = McGyver.roundToDecimals((_scrnWidth / _fixedWidth), _decPlaces);
      double _scalerWidth = ((percWidth + log(percWidth + 1)) * pow(1, _scaleRatioWidth)) / 100;
      _rsWidth = McGyver.roundToDecimals((_scrnWidth * _scalerWidth), _decPlaces);
    }

    double _rsHeight = 0;
    if (_scrnHeight == _fixedHeight) {   // If input height matches fixedHeight then do normal scaling.
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * (percHeight / 100)), _decPlaces);
    } else {   // If input height !match fixedHeight then do adjustment factor scaling.
      double _scaleRatioHeight = McGyver.roundToDecimals((_scrnHeight / _fixedHeight), _decPlaces);
      double _scalerHeight = ((percHeight + log(percHeight + 1)) * pow(1, _scaleRatioHeight)) / 100;
      _rsHeight = McGyver.roundToDecimals((_scrnHeight * _scalerHeight), _decPlaces);
    }

    // Finally, hand over Ratio-Scaled "SizedBox" widget to method call.
    return SizedBox(
      width: _rsWidth,
      height: _rsHeight,
      child: inWidget,
    );
  }

}

.........。

次に、次のように「rsWidget()」メソッドを静的に呼び出すだけで、ウィジェット(私の完璧主義者の病気ではすべてのUI)を個別にスケーリングします。

  // Step 1: Define your widget however you like (this widget will be supplied as the "inWidget" arg to the "rsWidget" method in Step 2)...
  Widget _btnLogin = RaisedButton(color: Colors.blue, elevation: 9.0, 
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(McGyver.rsDouble(context, ScaleType.width, 2.5))),
                                  child: McGyver.rsText(context, "LOGIN", percFontSize: EzdFonts.button2_5, textColor: Colors.white, fWeight: FontWeight.bold),
                                  onPressed: () { _onTapBtnLogin(_tecUsrId.text, _tecUsrPass.text); }, );

  // Step 2: Scale your widget by calling the static "rsWidget" method...
  McGyver.rsWidget(context, _btnLogin, 34.5, 10.0)   // ...and Bob's your uncle!!

クールなのは、「rsWidget()」メソッドがウィジェットを返すことです!! したがって、スケーリングされたウィジェットを_rsBtnLogin、あらゆる場所で使用するように別の変数に割り当てることができます。またはMcGyver.rsWidget()build()メソッド内で完全なメソッド呼び出しをインプレースで使用することもできます(ウィジェットツリーに配置するために必要な方法)。正常に動作します。

それらのより鋭敏なコーダーのために:あなたは私が2つの追加の比率スケーリングされた方法を使用しMcGyver.rsText()McGyver.rsDouble()(上記のコードでは定義されていません)私の中でRaisedButton()-だから私は基本的にこのスケーリングのものに夢中になることに気付くでしょう...私は私のアプリにどんなスケールや画面密度でも完全にピクセルパーフェクト!私はint、double、padding、text(デバイス間でUIの一貫性を必要とするすべて)を比率でスケーリングします。幅のみに基づいてテキストをスケーリングしますが、他のすべてのスケーリングに使用する軸を指定します(上記のコード例の呼び出しにScaleType.width使用された列挙型で行われたMcGyver.rsDouble()ように)。

私はこれがおかしいことを知っています-そしてメインスレッドでやるべきことはたくさんあります-しかし誰かがここで私の試みを見て、私の画面密度1:1スケーリングに対するより良い(より軽量な)解決策を見つけるのを手伝ってくれることを願っています悪夢。


1
@ Abbas.M-はい、比率スケーリングコード行に小さな変更を加えました[更新されたコードを参照]。これは、実際の1:1比率スケーリングソリューションに最も近いと思います-かなりの数を試しましたこれを取得するためのオプションの。この更新されたコードにはまだいくつかの奇妙な[エッジケース]スケーリングの問題がありますが、複数の密度の画面でのUIの類似性は非常に説得力があり、更新されたコードの画面間で非常に微妙な違いが見られます。ご意見をお聞かせください。フィードバックをお待ちしております。
SilSur

メインスレッドについて明らかなことは、初期化とアプリ初期化メインブロックへの呼び出しを移動することです。画面サイズはアプリ初期化後に変更されないため、各ウィジェットのレンダリングではなく、アプリ初期化でメインスレッドが1回だけヒットします
Fred Grott

@SilSur、あなたのソリューションはとても素晴らしく見えます。マクガイバーのクラス全体を共有してもよろしいですか?
デビッド

@ David-McGyverクラスは非常に重いクラスです(そしてプロジェクト固有です)。この例で使用したものには、UIスケーリングの問題に関係のない多くの関数があります。したがって、クラス全体をアップロードするのはやり過ぎ/非効率的です。ただし、クラスを少し改善し、別のSO質問別のバージョンのコードを投稿しました。おそらく、提供されたURLで、改善されたコードの行に沿ってスケーリングコードを更新できます。
SilSur

4

多くの調査とテストを経て、現在Android / iOSからFlutterに変換しているアプリのソリューションを開発しました。

AndroidとiOSでは、基本フォントサイズに適用される「スケーリング係数」を使用して、画面サイズに相対的なテキストサイズをレンダリングしました。

この記事は非常に役に立ちました:https//medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a

マテリアルデザインの誤植スタイルのフォントサイズを取得するために、StatelessWidgetを作成しました。MediaQueryを使用してデバイスの寸法を取得し、倍率を計算してから、マテリアルデザインのテキストサイズをリセットします。ウィジェットを使用して、カスタムのマテリアルデザインテーマを定義できます。

使用されるエミュレーター:

  • Pixel C-9.94 "タブレット
  • Pixel 3-5.46 "電話
  • iPhone 11 ProMax-5.8インチ電話

標準のフォントサイズで

拡大縮小されたフォントサイズ

set_app_theme.dart(SetAppThemeウィジェット)

import 'package:flutter/material.dart';
import 'dart:math';

class SetAppTheme extends StatelessWidget {

  final Widget child;

  SetAppTheme({this.child});

  @override
  Widget build(BuildContext context) {

    final _divisor = 400.0;

    final MediaQueryData _mediaQueryData = MediaQuery.of(context);

    final _screenWidth = _mediaQueryData.size.width;
    final _factorHorizontal = _screenWidth / _divisor;

    final _screenHeight = _mediaQueryData.size.height;
    final _factorVertical = _screenHeight / _divisor;

    final _textScalingFactor = min(_factorVertical, _factorHorizontal);

    final _safeAreaHorizontal = _mediaQueryData.padding.left + _mediaQueryData.padding.right;
    final _safeFactorHorizontal = (_screenWidth - _safeAreaHorizontal) / _divisor;

    final _safeAreaVertical = _mediaQueryData.padding.top + _mediaQueryData.padding.bottom;
    final _safeFactorVertical = (_screenHeight - _safeAreaVertical) / _divisor;

    final _safeAreaTextScalingFactor = min(_safeFactorHorizontal, _safeFactorHorizontal);

    print('Screen Scaling Values:' + '_screenWidth: $_screenWidth');
    print('Screen Scaling Values:' + '_factorHorizontal: $_factorHorizontal ');

    print('Screen Scaling Values:' + '_screenHeight: $_screenHeight');
    print('Screen Scaling Values:' + '_factorVertical: $_factorVertical ');

    print('_textScalingFactor: $_textScalingFactor ');

    print('Screen Scaling Values:' + '_safeAreaHorizontal: $_safeAreaHorizontal ');
    print('Screen Scaling Values:' + '_safeFactorHorizontal: $_safeFactorHorizontal ');

    print('Screen Scaling Values:' + '_safeAreaVertical: $_safeAreaVertical ');
    print('Screen Scaling Values:' + '_safeFactorVertical: $_safeFactorVertical ');

    print('_safeAreaTextScalingFactor: $_safeAreaTextScalingFactor ');

    print('Default Material Design Text Themes');
    print('display4: ${Theme.of(context).textTheme.display4}');
    print('display3: ${Theme.of(context).textTheme.display3}');
    print('display2: ${Theme.of(context).textTheme.display2}');
    print('display1: ${Theme.of(context).textTheme.display1}');
    print('headline: ${Theme.of(context).textTheme.headline}');
    print('title: ${Theme.of(context).textTheme.title}');
    print('subtitle: ${Theme.of(context).textTheme.subtitle}');
    print('body2: ${Theme.of(context).textTheme.body2}');
    print('body1: ${Theme.of(context).textTheme.body1}');
    print('caption: ${Theme.of(context).textTheme.caption}');
    print('button: ${Theme.of(context).textTheme.button}');

    TextScalingFactors _textScalingFactors = TextScalingFactors(
        display4ScaledSize: (Theme.of(context).textTheme.display4.fontSize * _safeAreaTextScalingFactor),
        display3ScaledSize: (Theme.of(context).textTheme.display3.fontSize * _safeAreaTextScalingFactor),
        display2ScaledSize: (Theme.of(context).textTheme.display2.fontSize * _safeAreaTextScalingFactor),
        display1ScaledSize: (Theme.of(context).textTheme.display1.fontSize * _safeAreaTextScalingFactor),
        headlineScaledSize: (Theme.of(context).textTheme.headline.fontSize * _safeAreaTextScalingFactor),
        titleScaledSize: (Theme.of(context).textTheme.title.fontSize * _safeAreaTextScalingFactor),
        subtitleScaledSize: (Theme.of(context).textTheme.subtitle.fontSize * _safeAreaTextScalingFactor),
        body2ScaledSize: (Theme.of(context).textTheme.body2.fontSize * _safeAreaTextScalingFactor),
        body1ScaledSize: (Theme.of(context).textTheme.body1.fontSize * _safeAreaTextScalingFactor),
        captionScaledSize: (Theme.of(context).textTheme.caption.fontSize * _safeAreaTextScalingFactor),
        buttonScaledSize: (Theme.of(context).textTheme.button.fontSize * _safeAreaTextScalingFactor));

    return Theme(
      child: child,
      data: _buildAppTheme(_textScalingFactors),
    );
  }
}

final ThemeData customTheme = ThemeData(
  primarySwatch: appColorSwatch,
  // fontFamily: x,
);

final MaterialColor appColorSwatch = MaterialColor(0xFF3787AD, appSwatchColors);

Map<int, Color> appSwatchColors =
{
  50  : Color(0xFFE3F5F8),
  100 : Color(0xFFB8E4ED),
  200 : Color(0xFF8DD3E3),
  300 : Color(0xFF6BC1D8),
  400 : Color(0xFF56B4D2),
  500 : Color(0xFF48A8CD),
  600 : Color(0xFF419ABF),
  700 : Color(0xFF3787AD),
  800 : Color(0xFF337799),
  900 : Color(0xFF285877),
};

_buildAppTheme (TextScalingFactors textScalingFactors) {

  return customTheme.copyWith(

    accentColor: appColorSwatch[300],
    buttonTheme: customTheme.buttonTheme.copyWith(buttonColor: Colors.grey[500],),
    cardColor: Colors.white,
    errorColor: Colors.red,
    inputDecorationTheme: InputDecorationTheme(border: OutlineInputBorder(),),
    primaryColor: appColorSwatch[700],
    primaryIconTheme: customTheme.iconTheme.copyWith(color: appColorSwatch),
    scaffoldBackgroundColor: Colors.grey[100],
    textSelectionColor: appColorSwatch[300],
    textTheme: _buildAppTextTheme(customTheme.textTheme, textScalingFactors),
    appBarTheme: customTheme.appBarTheme.copyWith(
        textTheme: _buildAppTextTheme(customTheme.textTheme, textScalingFactors)),

//    accentColorBrightness: ,
//    accentIconTheme: ,
//    accentTextTheme: ,
//    appBarTheme: ,
//    applyElevationOverlayColor: ,
//    backgroundColor: ,
//    bannerTheme: ,
//    bottomAppBarColor: ,
//    bottomAppBarTheme: ,
//    bottomSheetTheme: ,
//    brightness: ,
//    buttonBarTheme: ,
//    buttonColor: ,
//    canvasColor: ,
//    cardTheme: ,
//    chipTheme: ,
//    colorScheme: ,
//    cupertinoOverrideTheme: ,
//    cursorColor: ,
//    dialogBackgroundColor: ,
//    dialogTheme: ,
//    disabledColor: ,
//    dividerColor: ,
//    dividerTheme: ,
//    floatingActionButtonTheme: ,
//    focusColor: ,
//    highlightColor: ,
//    hintColor: ,
//    hoverColor: ,
//    iconTheme: ,
//    indicatorColor: ,
//    materialTapTargetSize: ,
//    pageTransitionsTheme: ,
//    platform: ,
//    popupMenuTheme: ,
//    primaryColorBrightness: ,
//    primaryColorDark: ,
//    primaryColorLight: ,
//    primaryTextTheme: ,
//    secondaryHeaderColor: ,
//    selectedRowColor: ,
//    sliderTheme: ,
//    snackBarTheme: ,
//    splashColor: ,
//    splashFactory: ,
//    tabBarTheme: ,
//    textSelectionHandleColor: ,
//    toggleableActiveColor: ,
//    toggleButtonsTheme: ,
//    tooltipTheme: ,
//    typography: ,
//    unselectedWidgetColor: ,
  );
}

class TextScalingFactors {

  final double display4ScaledSize;
  final double display3ScaledSize;
  final double display2ScaledSize;
  final double display1ScaledSize;
  final double headlineScaledSize;
  final double titleScaledSize;
  final double subtitleScaledSize;
  final double body2ScaledSize;
  final double body1ScaledSize;
  final double captionScaledSize;
  final double buttonScaledSize;

  TextScalingFactors({

    @required this.display4ScaledSize,
    @required this.display3ScaledSize,
    @required this.display2ScaledSize,
    @required this.display1ScaledSize,
    @required this.headlineScaledSize,
    @required this.titleScaledSize,
    @required this.subtitleScaledSize,
    @required this.body2ScaledSize,
    @required this.body1ScaledSize,
    @required this.captionScaledSize,
    @required this.buttonScaledSize
  });
}

TextTheme _buildAppTextTheme(

    TextTheme _customTextTheme,
    TextScalingFactors _scaledText) {

  return _customTextTheme.copyWith(

    display4: _customTextTheme.display4.copyWith(fontSize: _scaledText.display4ScaledSize),
    display3: _customTextTheme.display3.copyWith(fontSize: _scaledText.display3ScaledSize),
    display2: _customTextTheme.display2.copyWith(fontSize: _scaledText.display2ScaledSize),
    display1: _customTextTheme.display1.copyWith(fontSize: _scaledText.display1ScaledSize),
    headline: _customTextTheme.headline.copyWith(fontSize: _scaledText.headlineScaledSize),
    title: _customTextTheme.title.copyWith(fontSize: _scaledText.titleScaledSize),
    subtitle: _customTextTheme.subtitle.copyWith(fontSize: _scaledText.subtitleScaledSize),
    body2: _customTextTheme.body2.copyWith(fontSize: _scaledText.body2ScaledSize),
    body1: _customTextTheme.body1.copyWith(fontSize: _scaledText.body1ScaledSize),
    caption: _customTextTheme.caption.copyWith(fontSize: _scaledText.captionScaledSize),
    button: _customTextTheme.button.copyWith(fontSize: _scaledText.buttonScaledSize),

  ).apply(bodyColor: Colors.black);
}

main.dart(デモアプリ)

import 'package:flutter/material.dart';
import 'package:scaling/set_app_theme.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: SetAppTheme(child: HomePage()),
    );
  }
}


class HomePage extends StatelessWidget {

  final demoText = '0123456789';

  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Text Scaling with SetAppTheme',
            style: TextStyle(color: Colors.white),),
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display4.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display3.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display2.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.display1.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.headline.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.title.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.subtitle.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.body2.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.body1.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.caption.fontSize,
                    ),
                  ),
                  Text(
                    demoText,
                    style: TextStyle(
                      fontSize: Theme.of(context).textTheme.button.fontSize,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3
Place dependency in pubspec.yaml

flutter_responsive_screen: ^1.0.0

Function hp = Screen(MediaQuery.of(context).size).hp;
Function wp = Screen(MediaQuery.of(context).size).wp;

Example :
return Container(height: hp(27),weight: wp(27));

3
おそらく、次に「解決策」を投稿するときに、内部で何が起こっているのかを説明するのは素晴らしいことでしょうか。とにかく、私はこの依存関係についてGitHubをチェックしました。これは基本的に単一のクラス(16行のコード)であり、入力の幅と高さの値を受け取り、画面の幅と高さをパーセンテージでスケーリングします。これは基本的に@datayeahのソリューションと同じです。唯一の違いは、これがきちんとパッケージ化されていることです。datayeahと同じ問題がここに当てはまります-さまざまな画面密度のデバイスでの1:1スケーリングにはまったく良い解決策ではありません。画面密度の問題は、この「解決策」では解決されません。
SilSur

1

親のディメンションにMediaQueryを使用するか、コンテナとしてFractionallySizedBoxを使用できます。


1

この問題に対する私のアプローチは、datayeahが行った方法と似ています。ハードコードされた幅と高さの値がたくさんあり、特定のデバイスでアプリが正常に表示されました。そこで、デバイスの画面の高さを取得し、ハードコードされた値をスケーリングするための係数を作成しました。

double heightFactor = MediaQuery.of(context).size.height/708

ここで、708は特定のデバイスの高さです。


1

できるだけシンプルにするようにしています。ぜひお試しください。中画面、大画面、横向きモードに値を割り当てない場合、画面サイズに応じて値を提供する関数getresponsevalueを持つレスポンシブユーティリティを作成します。デフォルトでは、短い画面に割り当てられた値を提供します。どんな質問にも大歓迎です。改善したい

class SampleView extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return Center(
  child: Container(
    width: 200,
    height: 200,
    color: Responsive().getResponsiveValue(
        forLargeScreen: Colors.red,
        forMediumScreen: Colors.green,
        forShortScreen: Colors.yellow,
        forMobLandScapeMode: Colors.blue,
        context: context),
  ),
);

}}

 // utility class
          class Responsive {
            // function reponsible for providing value according to screensize
            getResponsiveValue(
                {dynamic forShortScreen,
                dynamic forMediumScreen,
                dynamic forLargeScreen,
                dynamic forMobLandScapeMode,
                BuildContext context}) {

              if (isLargeScreen(context)) {

                return forLargeScreen ?? forShortScreen;
              } else if (isMediumScreen(context)) {

                return forMediumScreen ?? forShortScreen;
              } 
           else if (isSmallScreen(context) && isLandScapeMode(context)) {

                return forMobLandScapeMode ?? forShortScreen;
              } else {
                return forShortScreen;
              }
            }
          
            isLandScapeMode(BuildContext context) {
              if (MediaQuery.of(context).orientation == Orientation.landscape) {
                return true;
              } else {
                return false;
              }
            }
          
            static bool isLargeScreen(BuildContext context) {
              return getWidth(context) > 1200;
            }
          
            static bool isSmallScreen(BuildContext context) {
              return getWidth(context) < 800;
            }
          
            static bool isMediumScreen(BuildContext context) {
              return getWidth(context) > 800 && getWidth(context) < 1200;
            }
          
            static double getWidth(BuildContext context) {
              return MediaQuery.of(context).size.width;
            }
          }

0

フラッターウィキからこのページをチェックしてください:

レスポンシブアプリの作成

LayoutBuilderクラスを使用します。そのビルダープロパティから、BoxConstraintsを取得します。制約のプロパティを調べて、何を表示するかを決定します。たとえば、maxWidthがwidthブレークポイントよりも大きい場合は、左側にリストがある行を持つScaffoldオブジェクトを返します。幅が狭い場合は、そのリストを含む引き出し付きのScaffoldオブジェクトを返します。デバイスの高さ、アスペクト比、またはその他のプロパティに基づいてディスプレイを調整することもできます。制約が変更されると(たとえば、ユーザーが電話を回転させたり、アプリをNougatのタイルUIに配置したりすると)、ビルド機能が再実行されます。


0

libフォルダーのフォルダー名(response_screen)にファイル名(app_config.dart)を作成します。

import 'package:flutter/material.dart';

class AppConfig {
  BuildContext _context;
  double _height;
  double _width;
  double _heightPadding;
  double _widthPadding;

  AppConfig(this._context) {
    MediaQueryData _queryData = MediaQuery.of(_context);
    _height = _queryData.size.height / 100.0;
    _width = _queryData.size.width / 100.0;
    _heightPadding =
    _height - ((_queryData.padding.top + _queryData.padding.bottom) / 100.0);
    _widthPadding =
      _width - (_queryData.padding.left + _queryData.padding.right) / 100.0;
  }

  double rH(double v) {
   return _height * v;
  }

  double rW(double v) {
    return _width * v;
  }

  double rHP(double v) {
    return _heightPadding * v;
  }

 double rWP(double v) {
   return _widthPadding * v;
 }
}

その後:

import 'responsive_screen/app_config.dart';
 ...
class RandomWordsState extends State<RandomWords> {
  AppConfig _ac;
  ...
  @override
  Widget build(BuildContext context) {
    _ac = AppConfig(context);
    ...
    return Scaffold(
      body: Container(
        height: _ac.rHP(50),
        width: _ac.rWP(50),
        color: Colors.red,
        child: Text('Test'),
      ),
    );
    ...
  }


0
  padding: EdgeInsets.only(
      left: 4.0,
      right: ResponsiveWidget.isSmallScreen(context) ? 4: 74, //Check for screen type
      top: 10,
      bottom: 40),

これはGoogleの推奨では問題ありませんが、完全ではない可能性があります。


0

ResponsiveBuilderまたはScreenTypeLayoutを使用

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:responsive_builder/responsive_builder.dart';

class Sample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.black,
      ),
      body: ResponsiveBuilder(
        builder: (context, info) {
          var screenType = info.deviceScreenType;
          String _text;
          switch (screenType){
            case DeviceScreenType.desktop: {
              _text = 'Desktop';
              break;
            }
            case DeviceScreenType.tablet: {
              _text = 'Tablet';
              break;
            }
            case DeviceScreenType.mobile: {
              _text = 'Mobile';
              break;
            }
            case DeviceScreenType.watch: {
              _text = 'Watch';
              break;
            }
            default:
              return null;
          }
          return Center(child: Text(_text, style: TextStyle(fontSize: 32, color: Colors.black),));
        },
      ),
    );
  }
}

// screen type layout
ScreenTypeLayout.builder(
  mobile: MobilePage(),
  tablet: TabletPage(),
  desktop: DesktopPage(),
  watch: Watchpage(),
);


0

さまざまな画面サイズに対応するレスポンシブUIを作成する最も簡単な方法は、Sizerプラグインです。

タブレットでも、どの画面サイズのデバイスでもレスポンシブUIを作成できます。このプラグインを確認してください⬇️https //pub.dev/packages/sizer

.h  - for widget height
.w  - for widget width
.sp - for font size

使用.h.w.spこのような値の後に⬇️

例:

Container(
  height: 10.0.h,  //10% of screen height
  width: 80.0.w,   //80% of screen width
  child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);

私はこのプラグインで多くのレスポンシブアプリを構築しました。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.