Flutter web响应式布局

flutter用于web开发时，页面适配不同大小，以及页面窗口缩小、放大时的适配操作。
本文主要介绍当页面窗口大小缩小、放大时（页面宽度、高度改变）出现对应的滚动条。
主要使用Scrollbar和SingleChildScrollView，横向方向和垂直方向分别用Scrollbar和SingleChildScrollView控制，此外还需要创建横向和垂直方向的控制器。
所使用的控件有：
ConstrainedBox 设置最大、最小尺寸
LayoutBuilder 的constraints用于计算判断当前页面窗口的尺寸大小
NotificationListener 滚动的监听
Scrollbar 滚动
SingleChildScrollView 滚动view

效果图：

代码示例：

import 'package:flutter/material.dart';

class WebPage extends StatefulWidget {
  @override
  _WebPageState createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  ScrollController _verticalController = ScrollController();
  ScrollController _horizontalController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        minWidth: 1200,
        minHeight: 800,
      ),
      child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
        final shouldScrollVertical = constraints.maxHeight <= 800.0;
        final contentHeight =
            shouldScrollVertical ? 800.0 : constraints.maxHeight;

        final shouldScrollHorizontal = constraints.maxWidth <= 1200.0;
        final contentWidth =
            shouldScrollHorizontal ? 1200.0 : constraints.maxWidth;

        return NotificationListener(
          onNotification: (ScrollNotification notification) {
            // print('=====>${notification.metrics}->${notification.metrics.axis}');

            return false;
          },
          child: Scrollbar(
            thumbVisibility: shouldScrollVertical,
            controller: _verticalController,
            //垂直
            child: SingleChildScrollView(
              controller: _verticalController,
              scrollDirection: Axis.vertical,
              physics: shouldScrollVertical
                  ? AlwaysScrollableScrollPhysics()
                  : NeverScrollableScrollPhysics(),
              //水平
              child: Scrollbar(
                thumbVisibility: shouldScrollHorizontal,
                controller: _horizontalController,
                child: SingleChildScrollView(
                  controller: _horizontalController,
                  scrollDirection: Axis.horizontal,
                  physics: shouldScrollHorizontal
                      ? AlwaysScrollableScrollPhysics()
                      : NeverScrollableScrollPhysics(),
                  child: UnconstrainedBox(
                    child: SizedBox(
                      height: contentHeight,
                      width: contentWidth,
                      child: ListView(
                        children: [
                          Container(
                            height: 300,
                            color: Colors.cyan,
                            child: Text(
                              '1',
                              style: TextStyle(color: Colors.deepPurple),
                            ),
                          ),
                          Container(
                            height: 400,
                            color: Colors.lightBlueAccent,
                            child: Text(
                              '1',
                              style: TextStyle(color: Colors.deepPurple),
                            ),
                          ),
                          Container(
                            height: 500,
                            color: Colors.red,
                            child: Text(
                              '1',
                              style: TextStyle(color: Colors.deepPurple),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      }),
    );
  }
}