StatefulWidget with didUpdateWidget

main.dart

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: _MyPage(),
    );
  }
}

class _MyPage extends StatefulWidget {
  @override
  State<_MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<_MyPage> {
  bool flag = true;
  late Timer t;
  
  @override
  void initState() {
    super.initState();
    t = Timer.periodic(
      const Duration(seconds: 2),
      (timer) {
        setState(() {
          flag = !flag;
        });
      },
    );
  }
  
  @override
  void dispose() {
    t.cancel();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Text('Flag: $flag'),
          _MyToggleWidget(
            value: flag,
            onChanged: (newValue) {
              setState(() {
                flag = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

class _MyToggleWidget extends StatefulWidget {
  final bool? value;
  final void Function(bool) onChanged;
  
  const _MyToggleWidget({required this.value, required this.onChanged});
  
  @override
  State<_MyToggleWidget> createState() => _MyToggleWidgetState();
}

class _MyToggleWidgetState extends State<_MyToggleWidget> {
  bool value = false;
  
  @override
  void initState() {
    value = widget.value ?? false;
    super.initState();
  }
  
  
  @override
  void didUpdateWidget(covariant _MyToggleWidget oldWidget) {
    if (widget.value != null) {
      setState(() {
        value = widget.value!;
      });
    }
    super.didUpdateWidget(oldWidget);
  }
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          value = !value;
        });
        widget.onChanged(value);
      },
      child: Text(
        'Toggle: $value',
        style: DefaultTextStyle.of(context).style.copyWith(
          color: value ? Colors.green : Colors.red,
        ),
      ),
    );
  }
}