FractionallySizedBoxで「ボタンの高さ＝画面の高さの◯％」にしたい

Question

前提・実現したいこと

「FractionallySizedBox」というウィジェットで画面の40％という比率でボタンのサイズを決めたい。

・ボタンのサイズが画面の40％
・ボタンの上下に画面の30％の余白スペース

該当のソースコード

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【Flutter#51】FractionallySizedBox'),
      ),
      body: Column(
        children: <Widget>[
          Flexible( //ボタン上のスペース
            child: FractionallySizedBox(
              heightFactor: 0.30, //縦の30％のサイズ
            ),
          ),
          Container(
            alignment: Alignment.center,
            child: FractionallySizedBox(
                heightFactor: 0.40, //縦の40％のサイズ
                widthFactor: 0.50, //幅の50％のサイズ
                child: RaisedButton(
                  child: Text('Tap this button.\nConsole「OK」'),
                  onPressed: _onPressed,
                )),
          ),
          Flexible( //ボタン下のスペース
            child: FractionallySizedBox(
              heightFactor: 0.30, //縦の30％のサイズ
            ),
          ),
        ],
      ),
    );
  }
}

void _onPressed() {
  print('OK');
}

発生している問題・エラーメッセージ

・BoxConstraints（w = 187.5、h = Infinity）
つまり高さが無限なのに対して40％を指定しているからエラーが出ていると認識しています。
では高さを指定するには…？

・上下に30％の余白をいれているはずが…
なぜか、上寄りになってしまう。
下の余白としていれた「FractionallySizedBox」を外すと
上部の余白の30％は適用される

Performing hot restart...
Syncing files to device iPhone SE (2nd generation)...
Restarted application in 770ms.

══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderSemanticsAnnotations's layout() function by the
following function, which probably computed the invalid constraints in question:
  RenderFractionallySizedOverflowBox.performLayout
(package:flutter/src/rendering/shifted_box.dart:960:13)
The offending constraints were:
  BoxConstraints(w=187.5, h=Infinity)

The relevant error-causing widget was:
  FractionallySizedBox file:///Users/aiueo/Desktop/flutter_app/lib/main.dart:27:20

和訳
ホットリスタートを実行しています...
ファイルをデバイスiPhoneSE（第2世代）に同期しています...
770msでアプリケーションを再起動しました。

==╡ライブラリのレンダリングによって引き起こされた例外╞========================================= ================
次のアサーションがperformLayout（）中にスローされました。
BoxConstraintsは、無限の高さを強制します。
これらの無効な制約は、RenderSemanticsAnnotationsのlayout（）関数に提供されました。
次の関数。おそらく問題の無効な制約を計算しました。
RenderFractionallySizedOverflowBox.performLayout
（package：flutter / src / rendering / shifted_box.dart：960：13）
問題のある制約は次のとおりです。
BoxConstraints（w = 187.5、h = Infinity）

関連するエラーの原因となるウィジェットは次のとおりです。
FractionallySizedBox file：///Users/aiueo/Desktop/flutter_app/lib/main.dart：27：20

試したこと

①ボタンの中「heightFactor: 0.40,」を外す
これをするとエラーはなくなりますが、
「ボタンサイズを画面の高さの40％にしていする」という結果が得られません。

②「Column」を外し、ウィジェット をボタンのみにする。
ボタンのみだとボタンが想定したサイズになります。

その他

これよりもっと良い方法あるよ！とか、
そもそもその使い方を想定したウィジェットじゃない！などの
ご指摘等もお待ちしておりますので宜しくお願い致します。

Answer 1

こんな感じでしょうか？是非一度実行してみてください。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【Flutter#51】FractionallySizedBox'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(
            flex: 3,
            child: FractionallySizedBox(
              heightFactor: 1,
            ),
          ),
          Flexible(
            flex: 4,
            child: Center(
              child: FractionallySizedBox(
                  heightFactor: 1.0,
                  widthFactor: 0.50,
                  child: RaisedButton(
                    child: Text('Tap this button.\nConsole「OK」'),
                    onPressed: _onPressed,
                  )),
            ),
          ),
          Flexible(
            flex: 3,
            child: FractionallySizedBox(
              heightFactor: 1,
            ),
          ),
        ],
      ),
    );
  }
}

void _onPressed() {
  print('OK');
}

FractionallySizedBoxをRowやColumnで使う場合は、仰る通り高さを指定やる必要があるのですが、今回はその役目を、Flexibleに担当してもらっています。
Flexibleは僕が説明するよりもflutterチームが作ってくれた動画をみた方が遥かに分かりやすいと思うので、そちらを載せておきます。
Flexibleの動画

FractionallySizedBoxのheightFactorは、あくまでも自分が利用可能なスペースのうちの何%を使うか指定するものなので、今回FractionallySizedBoxが使えるスペースは、Flexibleでかなり制限されたのちのスペースということになります。

    ①Flexible(
            //10分の3
            flex: 3,
            child: FractionallySizedBox(
                         //10分の3
            heightFactor: 0.3,
            ),
          ),
    ②Flexible(
            //10分の4
            flex: 4,
            child:....
          ),
    ③Flexible(
            //10分の3
            flex: 3,
            child:....
          ),

例えば、①のようにしてしまと、
3/(3+3+4) [flexibleでのflexが全体10のうちの3という意味です]✖︎ 0.3 ←heightFactorで、①はbodyの高さのうちの9%の高さとなることが予想されます。
(多分そうなります。間違えていたらすみません！)

今回の実装は、FractionallySizedBoxの他に、
MediaQueryで画面サイズを取ってきたり、SpacerとExpandedを組み合わせるなどの方法が考えられると思います。
是非一度調べてみてください。

Comments

[Risney]

返答遅くなってしまい申し訳ありません。
とてもご丁寧にありがとうございます！

まずは「flex: ,」でFractionallySizedBox自体にサイズを与えて、
その与えたサイズの中で調整するのが「heightFactor」ってイメージですね！

とても説明がわかりやすく、
理解することができました。

他の方法も時間があるときに試したたいと思います。
ありがとうございました！

Answer 2

taiso.itsukages様のやり方に習い、
以下の方法で実現できました！
ありがとうございました！

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('【Flutter#51】FractionallySizedBox'),
      ),
      body: Column(
        children: <Widget>[ //↓画面の縦サイズからAppBarの高さを引かれている前提
          Flexible( //ボタン上のスペース
            flex: 3, //画面の縦の3割(※必須)
            child: FractionallySizedBox(
              heightFactor: 1.0, //使える高さの100%(※必須)
            ),
          ),
          Flexible(
        flex: 4, //画面の縦の4割(※必須)
          child: Container(
            alignment: Alignment.center,
            child: FractionallySizedBox(
              heightFactor: 1.0, //使える高さの縦の100%(※必須)
                widthFactor: 0.60, //使える幅の60％
                child: RaisedButton(
                  child: Text('Tap this button.\nConsole「OK」'),
                  onPressed: _onPressed,
                )),
      )
      ),
          Flexible( //ボタン下のスペース
            flex: 3, //画面の縦の3割(※必須)
            child: FractionallySizedBox(
              heightFactor: 1.0, //使える高さの縦の100%(※必須)
            ),
          ),
        ],
      ),
    );
  }
}

void _onPressed() {
  print('OK');
}