Flutter中固定与滚动区域的最优实现方案探讨

我之前开发包含固定区域与滚动区域的Flutter页面时，一直采用试错法，始终没得到最优解。本次研究后实现了一套方案，组件层级结构如下：

Scaffold:
    body: Column
        Widgets（固定区域内容）
        Expanded
            child: RawScrollbar
                child: SingleChildScrollView
                    child: Row
                        children: Column
                            children: Widgets（滚动区域内容）

这套方案用到了较多Widget，但如果这已经是最优解的话就无需改动。想请教是否存在更简化或更高效的实现方式？

以下是测试代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage();
  @override
  State<MyHomePage> createState() => _MyHomePage();
}

class _MyHomePage extends State<MyHomePage> {
  final ScrollController _wScrollController = ScrollController();
  final TextStyle _wStyle = TextStyle(fontSize: 24, color: Colors.blue);
  
  @override
  void dispose() {
    _wScrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('Scrolling Test'),
          centerTitle: true,
        ),
        body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          SizedBox(height: 20),
          SizedBox(height: 100, child: Text('Page Heading', style: _wStyle)),
          Icon(Icons.directions_boat_filled_rounded,
              size: 100, color: Colors.blue),
          SizedBox(height: 25),
          Text("Select Option", style: _wStyle),
          SizedBox(height: 20),
          Expanded(
              child: RawScrollbar(
                  thumbVisibility: true,
                  thumbColor: Colors.blueGrey[100],
                  shape: const StadiumBorder(),
                  thickness: 12,
                  padding: EdgeInsets.only(left: 2),
                  minThumbLength: 100,
                  scrollbarOrientation: ScrollbarOrientation.right,
                  controller: _wScrollController,
                  child: SingleChildScrollView(
                      primary: false,
                      controller: _wScrollController,
                      child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children:
                                  _fnCreateButtons(10) /* 按钮列表 */,
                            )
                          ]))))
        ]));
  }

  // 创建按钮列表
  List<Widget> _fnCreateButtons(int iCount) {
    List<Widget> lswButtons = [];
    for (int iNdx = 0; iNdx < iCount; iNdx++) {
      lswButtons.add(SizedBox(
          height: 100,
          child: ElevatedButton(
              onPressed: () {}, child: Text('Selection ${iNdx + 1}'))));
    }
    return lswButtons;
  }
}

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