ScrollBar();

スマホ版が気に入らない

基本iPadアプリとして開発しているけれど、
iPadユーザーが思いのほか少ないという事実に直面して、
スマホサイズのlayoutも用意する今日この頃。
基本的にRawをやめて、なんでもColumnどんどん繋げていくのだけれど、
そうすると、とても長い画面になる。
それでも、Scrollしていく動作と連動していればいいんだが、
「Buttonにtouchしたら表示されるChip」が
そのとき見えていない下のほうに表示されたりすると、
やっぱりゼッタイ、イライラするよね。

インジケーターをつけよう

少なくとも、
「もっと下の方にいろいろありますよ」とか、
「今のActionで画面がさらに長くなりましたよ」とか、
気づいて貰うために･･･
そうだ、インジケーターつけよう！

          return Scaffold(
            appBar: AppBar(
              leading: const NavigationButton(
                  destinationPage: IndexPage(),
                  buttonText: 'INDEX'),
              leadingWidth: 100,
              title: Text(AppLocalizations.of(context)!.indexA),
            ),
            floatingActionButton: FloatingActionButton.extended(
                onPressed: () async {         略       },
                label: const Text('SAVE')),
            body: Container(
              constraints: const BoxConstraints.expand(),
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/sea.png'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Scrollbar(　　　　<=ここと
                thumbVisibility: true,　<=ここと
                thickness: 10.0,　　　　　<=ここ  幅はdefaultだと8かな？
                child: Center(
                  child: SingleChildScrollView(
                    child: Column(　　以下略

背景色と被ってちょっと存在感ないので色を変えたかったけど、うまくいかなかった。
それでちょっと幅広にしてみました。
悪目立ちするよりは、これぐらいでいいかな。

さあ、リリース作業に入ろう！