Bubbling sample by Flutter

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String tex = 'child';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bubbling sample'),
      ),
      body: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          setState(() {
            tex = 'parent';
          });
          return true;
        },
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: ChildWidget(
            tex: tex,
          ),
        ),
      ),
    );
  }
}

class ChildWidget extends StatelessWidget {
  const ChildWidget({super.key, required this.tex});
  final String tex;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150, // コンテナの高さ
      color: Colors.grey[200],
      margin: const EdgeInsets.all(8.0),
      child: NotificationListener<ScrollNotification>(
        onNotification: (ScrollNotification notification) {
          return false; // false is propagate the notification
        },
        child: SingleChildScrollView(
          child: Column(
            children: List.generate(
              20,
              (itemIndex) => Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Bubbling $tex'),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

default.mov