main.dart

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(primarySwatch: Colors.blue),
      home: const _MyHomePage(),
    );
  }
}

class _MyHomePage extends StatelessWidget {
  const _MyHomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: const [
          _UpperWidget(),
          _BottomWidget(),
        ],
      ),
    );
  }
}

class _UpperWidget extends StatelessWidget {
  const _UpperWidget();

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      color: Colors.teal.shade50,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const [
            Text('メッセージ1'),
            SizedBox(height: 16),
            Text('メッセージ2'),
            SizedBox(height: 16),
            Text('メッセージ3'),
            Text('メッセージ4（はみ出し部分で隠れます）'),
          ],
        ),
      ),
    );
  }
}

class _BottomWidget extends StatelessWidget {
  const _BottomWidget();

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      clipBehavior: Clip.none,
      children: [
        Container(
          color: Colors.yellow.shade50,
          width: double.infinity,
          height: 200,
          child: const Center(
            child: Text('高さ200固定のボックス'),
          ),
        ),
        Positioned(
          top: -53, // 出っ張り部分の高さを指定する必要がある
          child: Container(
            color: Colors.yellow,
            padding: const EdgeInsets.all(16),
            child: const Text('でっぱり部分'),
          ),
        ),
      ],
    );
  }
}