获取IntroductionScreen中globalHeader与dotsContainer间距并设置PageViewModel高度

复现方式 #

执行命令导入依赖包：

flutter pub add introduction_screen

将Flutter示例项目的代码替换为以下内容即可复现场景：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TestIntroductionScreen(),
    );
  }
}

class TestIntroductionScreen extends StatelessWidget {
  const TestIntroductionScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    double maxHeight = MediaQuery.of(context).size.height -
        (MediaQuery.of(context).padding.top +
            kToolbarHeight +
            MediaQuery.of(context).padding.bottom);
    double maxWidth = MediaQuery.of(context).size.width -
        MediaQuery.of(context).padding.right -
        MediaQuery.of(context).padding.left;
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomePage'),
      ),
      body: Column(
        children: [
          Container(
            width: maxWidth,
            height: maxHeight * 2 / 3,
            color: Colors.green,
            child: IntroductionScreen(
              globalBackgroundColor: Colors.black,
              globalHeader: const Align(
                  alignment: Alignment.topLeft,
                  child:
                      Text('   Your Pages:', style: TextStyle(fontSize: 20, color: Colors.white))),
              showDoneButton: false,
              showBackButton: true,
              next: const Icon(Icons.arrow_forward, color: Colors.white),
              back: const Icon(Icons.arrow_back, color: Colors.white),
              pages: [buildTestPage(maxWidth, maxHeight)],
              controlsMargin: const EdgeInsets.all(0),
              controlsPadding: const EdgeInsets.all(0),
            ),
          ),
          Container(
            width: maxWidth,
            height: maxHeight * 1 / 3,
            color: Colors.orange,
            child: Container(),
          ),
        ],
      ),
    );
  }

  PageViewModel buildTestPage(double width, double height) {
    double pageHeight = height * 2 / 3;
    return PageViewModel(
      // useScrollView: false,
      titleWidget: Container(width: width, height: pageHeight, color: Colors.purple),
      body: '',
      decoration: const PageDecoration(
        contentMargin: EdgeInsets.all(0),
        titlePadding: EdgeInsets.only(top: 24, bottom: 0),
        footerPadding: EdgeInsets.all(0),
        bodyPadding: EdgeInsets.all(0),
        imagePadding: EdgeInsets.all(0),
        fullScreen: false,
      ),
    );
  }
}

需求说明 #

需要获取IntroductionScreen组件中globalHeader与dotsContainer之间的精确高度，并将该值赋值给PageViewModel的pageHeight变量，这样设置useScrollView: false时不会触发像素溢出错误。

简单来说：要让下图中的紫色Container完全适配globalHeader和dotsContainer之间的可用空间，且不可滚动，请勿提供使用Expanded组件的解决方案。

现有思路 #

IntroductionScreen的高度由父容器定义（本案例中为maxHeight * 2/3），理论上只需从中减去globalHeader（包含字号为20的Text组件）和dotsContainer的高度就能得到目标可用高度，但目前缺少dotsContainer的高度数据，寻求解决办法。

内容的提问来源于stack exchange，提问作者Ulmer