ページ遷移せずに表示を変える

？を押したら説明が出る

まあ、アラートダイアログみたいなものだけれど、
もうちょっとガッツリ書きたいので、ちょっと工夫。

画面は二つ

初期画面は？のIconButtonと画像、
解説画面は、テキストとthumupのIconButton。
？にタッチすると解説画面になり、thumupにタッチすると戻る。

Visibilityを切り替える

• _isVisible判定を設定
• _toggleVisibilityを設定
• 二つの画面に相当するUIをそれぞれVisibiltyで囲う
• 二つのButtonにtoggleをattach

こんな感じ

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

  @override
  IndexPageState createState() => IndexPageState();

}

class IndexPageState extends State<IndexPage> {
  bool _isVisible = false; // テキストの表示状態を管理するフラグ

  void _toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible; // 表示状態を切り替える
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('四次元年表 for mobile'),
      ),
      body: Center(
        child: Column(
          children: [
            Visibility(     <= 初期画面をVisibilityで囲う
              visible: !_isVisible,　<= 最初に見えているほう
                child: Column(
                  children: [
                    IconButton(
                      onPressed: _toggleVisibility,　<= 切り替えボタン１
                      icon: const Icon(
                          Icons.question_mark_sharp,
                          color: Colors.green),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(60, 20, 60, 60),
                      child: ShadowedContainer(
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(15),
                                child: Image.asset('assets/images/cover.png')),
                          )),
                    ),
                  ],
                )
                ),
            Visibility(　　　　<= 解説画面もVisibilityで囲う
              visible: _isVisible,　　<= 最初は見えない
              child: Column(
                children: [
                  const CustomTextContainer(textContent:

                  ),
                const CustomTextContainer(textContent:

              ),
                const CustomTextContainer(textContent:
  
              ),
                IconButton(
                  onPressed: _toggleVisibility,   <= 切り替えボタン2
                  icon: const Icon(
                      Icons.thumb_up_alt_sharp,
                    color: Colors.green,
                  )),
                      ]),
            ),
          ],
        ),
      ),
    );
  }
}

おまけ

初期画面の画像を角丸にしたくて
ClipRectで囲んだんだけれど、うまくいかない。
で、正しくは

ClipRRect !

Rが二つあるのでした！　紛らわしい！