FlutterでWidgetのサイズを取得する方法

2023年12月4日FlutterでRowの中身を同じ高さにする【IntrinsicHeight】

ウィジェットからサイズを取得して、
レイアウトを設定する方法です。

注意点は、StatefulWidgetじゃないとできないってことです。
ちなみに、何かを参考にしたわけではないので、やり方がある可能性はあります。

サイズが欲しいWidgetにキーを設定する

final _key = GlobalKey();

Container(
  key: _key,
  child: Text('SizeGetSample'),
),

高さを取得する

ビルドされたときに、高さが取得できるようになるみたいので、
ビルドのコールバックに登録します。

@override
void initState() {
  SchedulerBinding.instance!.addPostFrameCallback((_) {
    setState(() {
      height = _key.currentContext!.size!.height;
    });
  });
  super.initState();
}

サンプルソース

class SizeGetSample extends StatefulWidget {
  const SizeGetSample({Key? key}) : super(key: key);

  @override
  _SizeGetSample createState() => _SizeGetSample();
}

class _SizeGetSample extends State<SizeGetSample> {
  final _key = GlobalKey();
  double height = 0;
  @override
  void initState() {
    SchedulerBinding.instance!.addPostFrameCallback((_) {
      setState(() {
        height = _key.currentContext!.size!.height;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        key: _key,
        child: Text('SizeGetSample'),
      ),
      SizedBox(
        height: height,
        color: Colors.red,
      ),
    ]);
  }
}