Automatic scrolling with animated typer animated text kit in flutter

Question

I am looking for a way to implement this in Flutter. Auto-scroll as animated text kit typer is typing out contents like following

I tried using this as a function for the scrollController in a listview but it only gets stuck

  scrollToListBottom() async {
    while (_isTyping == true) {
      _scrollController.animateTo(
        _scrollController.position.maxScrollExtent,
        duration: const Duration(milliseconds: 100),
        curve: Curves.easeIn,
      );
      log("----------------------in the loop --------------------------");
    }
    await _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeIn,
    );
  }

score 1 · Answer 1 · answered Aug 17 '23 at 06:32

You can use NotificationListener<ScrollMetricsNotification> to listen to metric changes and scroll down.

NotificationListener<ScrollMetricsNotification>(
          onNotification: (notification) {
            print(notification.metrics.extentAfter);
            if (notification.metrics.extentAfter > 12) {
              scrollController.animateTo(scrollController.position.maxScrollExtent,
                 duration: const Duration(milliseconds: 300), curve: Curves.linear);
            }
            return true;
          },
          child: SingleChildScrollView(
            controller: scrollController,
            physics: const BouncingScrollPhysics(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                40.hbox,
                const Header().cntr(),
                80.hbox,
                FutureBuilder(
                  future: Future.delayed(const Duration(seconds: 2)),
                  builder: (_, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const TitleText(text: 'Starting Portfolio...');
                    } else {
                      return const TitleText(text: 'Started Portfolio');
                    }
                  },
                ),
                Consumer<HomeProvider>(
                  builder: (_, value, __) {
                    return ListView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      itemCount: value.terminalHistory.length,
                      itemBuilder: (_, index) {
                        return value.terminalHistory[index].pOnly(t: 10);
                      },
                    );
                  },
                ),
              ],
            ).p16(),
          ),
        );

For me the extentAfter 12 was appropriate , you can playaround that as you see fit.

OutPut

Automatic scrolling with animated typer animated text kit in flutter

1 Answers1