area_header

main.dart

import 'dart:math';

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

const darkBlue = Color.fromARGB(255, 18, 32, 47);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MyWidget(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return AreaHeader(
      leftWidget: Container(color: Colors.red, width:120, height: 40),
      centerWidget: Container(color: Colors.purple, width: 150, height: 60),
      rightWidget: Container(color: Colors.orange, width:80, height: 40),
    );
  }
}

class AreaHeader extends StatelessWidget {
  const AreaHeader({
    super.key,
    required this.leftWidget,
    required this.centerWidget,
    required this.rightWidget,
  });

  final Widget leftWidget, centerWidget, rightWidget;

  @override
  Widget build(BuildContext context) {
    return CustomBoxy(
      delegate: AreaHeaderBoxy(),
      children: [leftWidget, centerWidget, rightWidget],
    );
  }
}

class AreaHeaderBoxy extends BoxyDelegate {
  SliverSize widgetSize(
      BoxyChild widget, double minWidth, double maxWidth, BoxConstraints constraints) {
    return widget.layout(BoxConstraints(
      minWidth: minWidth,
      maxWidth: maxWidth,
      minHeight: constraints.minHeight,
      maxHeight: constraints.maxHeight,
    ));
  }

  @override
  Size layout() {
    final leftWidget = children[0];
    final centerWidget = children[1];
    final rightWidget = children[2];

    final totalWidth = constraints.maxWidth;

    // Lay out side widgets first to get their size
    final leftWidgetSize = widgetSize(leftWidget, 0, totalWidth, constraints);
    final rightWidgetSize = widgetSize(rightWidget, 0, totalWidth, constraints);

    var maxSideWidgetWidth = max(leftWidgetSize.width, rightWidgetSize.width);
    var maxSideWidgetHeight = max(leftWidgetSize.height, rightWidgetSize.height);

    // Center is totalWidth - 2x the largest widget width
    // also clamp it to 0 because it can go negative
    final centerWidth = max(0.0, totalWidth - maxSideWidgetWidth * 2);

    final centerWidgetSize = widgetSize(centerWidget, centerWidth, centerWidth, constraints);

    final maxWidgetHeight = max(maxSideWidgetHeight, centerWidgetSize.height);

    leftWidget.position(Offset(0, (maxWidgetHeight - leftWidgetSize.height) / 2));

    rightWidget.position(
        Offset(totalWidth - rightWidgetSize.width, (maxWidgetHeight - rightWidgetSize.height) / 2));

    // Position the center in the center
    centerWidget
        .position(Offset(maxSideWidgetWidth, (maxWidgetHeight - centerWidgetSize.height) / 2));

    return Size(
      totalWidth,
      maxWidgetHeight,
    );
  }
}