【Flutter】スクロールの表示を一番下にする方法

こんにちは。
今回は、スクロールの表示を一番下にする方法について説明します。
Listview.builderやSingleChildScrollViewなどのスクロール機能使用時に使えます。

方法

ボタンを押してControllerをScrollControllerを使用します。
その際に、animateToを使ってスクロールの動きを決めます。

• duration：スクロールする時間
• curve：Curveを設定

使用例

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final scrollController = ScrollController();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          ElevatedButton(
              onPressed: () {
                scrollController.animateTo(
                  scrollController.position.maxScrollExtent,
                  duration: const Duration(seconds: 1),
                  curve: Curves.bounceInOut,
                );
              },
              child: Text("Scroll To Bottom"))
        ],
      ),
      body: SingleChildScrollView(
        controller: scrollController,
        child: Column(
          children: [
            for (var i = 0; i < 30; i++)
              Container(
                height: 50,
                width: double.infinity,
                color: i.isEven ? Colors.lightGreen : Colors.white,
                child: Center(child: Text(i.toString())),
              ),
          ],
        ),
      ),
    );
  }
}

実行例

最後に

ここまで読んでいただき、ありがとうございました！
いいねしてくれたら、スキップして喜びます