Response Page - by Simon Lightfoot - Humpday Q&A - 6th September 2023

responsive_page.dart

// MIT License
//
// Copyright (c) 2023 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
//
import 'dart:math' as math;

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

void main() {
  runApp(const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Home(),
  ));
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      child: SafeArea(
        child: ResponsivePage(
          master: Placeholder(
            color: Colors.red,
            child: InkWell(
              onTap: () => print('master'),
            ),
          ),
          detail: Placeholder(
            color: Colors.blue,
            child: InkWell(
              onTap: () => print('detail'),
            ),
          ),
        ),
      ),
    );
  }
}

// Responsive widget that looks different depending on available
// space, with custom render object

class ResponsivePage extends MultiChildRenderObjectWidget {
  ResponsivePage({
    super.key,
    required this.master,
    required this.detail,
  }) : super(children: [master, detail]);

  final Widget master;
  final Widget detail;

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderResponsivePage();
  }

  @override
  void updateRenderObject(
      BuildContext context, covariant RenderResponsivePage renderObject) {
    super.updateRenderObject(context, renderObject);
    //renderObject.;
  }
}

class ResponsivePageParentData extends ContainerBoxParentData<RenderBox> {}

class RenderResponsivePage extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, ResponsivePageParentData>,
        RenderBoxContainerDefaultsMixin<RenderBox, ResponsivePageParentData> {
  bool _showingMaster = false;

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! ResponsivePageParentData) {
      child.parentData = ResponsivePageParentData();
    }
  }

  @override
  void performLayout() {
    size = constraints.biggest;

    final masterSize = math.max(200.0, size.width * 0.2);
    _showingMaster = (size.width > 600.0);

    final masterBox = firstChild!;
    final detailBox = lastChild!;
    masterBox.layout(
      BoxConstraints.tightFor(width: masterSize, height: size.height),
    );
    detailBox.layout(
      BoxConstraints.tightFor(
        width: size.width - (_showingMaster ? masterSize : 0.0),
        height: size.height,
      ),
    );
    (masterBox.parentData as ResponsivePageParentData).offset = Offset.zero;
    (detailBox.parentData as ResponsivePageParentData).offset =
        _showingMaster ? Offset(masterSize, 0.0) : Offset.zero;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (_showingMaster) {
      final masterBox = firstChild!;
      final masterData = (masterBox.parentData as ResponsivePageParentData);
      context.paintChild(masterBox, masterData.offset + offset);
    }
    final detailBox = lastChild!;
    final detailData = (detailBox.parentData as ResponsivePageParentData);
    context.paintChild(detailBox, detailData.offset + offset);
  }

  @override
  bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
    if (_showingMaster) {
      final masterBox = firstChild!;
      final masterData = (masterBox.parentData as ResponsivePageParentData);
      final isHit = result.addWithPaintOffset(
        offset: masterData.offset,
        position: position,
        hitTest: (BoxHitTestResult result, Offset transformed) {
          assert(transformed == position - masterData.offset);
          return masterBox.hitTest(result, position: transformed);
        },
      );
      if (isHit) {
        return true;
      }
    }

    final detailBox = lastChild!;
    final detailData = (detailBox.parentData as ResponsivePageParentData);
    final isHit = result.addWithPaintOffset(
      offset: detailData.offset,
      position: position,
      hitTest: (BoxHitTestResult result, Offset transformed) {
        assert(transformed == position - detailData.offset);
        return detailBox.hitTest(result, position: transformed);
      },
    );
    if (isHit) {
      return true;
    }

    return false;
  }
}