☰

さまざまな画面サイズに応じてフラッターアプリをレスポンシブにするにはどうすればいいですか? 質問する

tag-icon • tag-icon flutter dart responsive-design screen responsive
さまざまな画面サイズに応じてフラッターアプリをレスポンシブにするにはどうすればいいですか? 質問する

さまざまな画面サイズに応じてレスポンシブにすることが困難です。 どうすればレスポンシブにできますか?

@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: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

ベストアンサー1

使用MediaQueryクラス:

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

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

メディアクエリデータ: メディア（ウィンドウなど）に関する情報。

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

queryData.devicePixelRatio

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

queryData.size.width
queryData.size.height

テキストのスケール係数を取得するには:

queryData.textScaleFactor

使用AspectRatioクラス：

ドキュメントより:

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

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

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

次に、アスペクト比が 2.0 で、レイアウト制約により幅が 0.0 ～ 100.0、高さが 0.0 ～ 100.0 になる必要がある 2 番目の例を考えてみましょう。幅 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,
      )
    ),
  ),
),

また、:

おすすめ記事