☰

画面の幅/高さのパーセンテージに合わせて要素のサイズを変更する 質問する

tag-icon • tag-icon flutter dart flutter-layout screen-size
画面の幅/高さのパーセンテージに合わせて要素のサイズを変更する 質問する

画面サイズ (幅/高さ) に応じて要素のサイズを設定する簡単な方法 (LayoutBuilder 以外) はありますか? たとえば、CardView の幅を画面幅の 65% に設定するにはどうすればよいですか。

これはメソッド内では実行できないbuildため (当然ですが)、ビルド後まで延期する必要があります。このようなロジックを配置する推奨される場所はありますか?

ベストアンサー1

これは、言及されたソリューションのいくつかを実装した補足回答です。

分数サイズのボックス

ウィジェットが 1 つしかない場合は、FractionallySizedBoxウィジェットを使用して、使用可能なスペースを埋める割合を指定できます。ここでは、緑色がContainer使用可能な幅の 70%、使用可能な高さの 30% を埋めるように設定されています。

分数サイズのボックス 
Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

拡大

ウィジェットを使用すると、ウィジェットが行にある場合は水平方向に、列にExpandedある場合は垂直方向に、使用可能なスペースを埋めることができます。flex複数のウィジェットでプロパティを使用して、ウィジェットに重みを与えることができます。ここでは、緑がContainer幅の 70% を占め、黄色がContainer幅の 30% を占めています。

拡大

垂直にしたい場合は、Rowを に置き換えてくださいColumn。

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

補足コード

main.dart参考までにコードを記載します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}

おすすめ記事