Flutter - Run functions from outside the widget that use the controller in the widget

Question

I wrote a function that returns a SingleChildScrollView to the top. I want to execute this function on the buttons of outside this widget, how should I implement this?

Here's my current code.

timeline.dart

import 'package:flutter/material.dart';
import 'package:social_app/functions/functions.dart';
    
class TimeLinePage extends StatelessWidget {
  const TimeLinePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ScrollController timeLineScrollController = ScrollController();

    void timeLineJumpToTop() {
      jumpToTop(timeLineScrollController);
    }
...

functions.dart

import 'package:flutter/material.dart';

void jumpToTop(ScrollController scrollController) {
  scrollController.animateTo(0.0,
      duration: const Duration(milliseconds: 1000), curve: Curves.easeInOutQuart);
}

Thank you.

Where is the widget from which you want to call the `timeLineJumpToTop` function? Is that widget called inside the `TimeLinePage` widget or outside? — eNeM, Apr 05 '22 at 07:18

score 2 · Accepted Answer · answered Apr 05 '22 at 07:40

You can create your custom controller and use it in parent widget

typedef JumpToTopCallback = void Function();

class TimeLinePageController{

  TimeLinePageController();

  JumpToTopCallback? _onJumpToTopCallBack;

  set jumpToTopCallBack(JumpToTopCallback? onJumpToTop){
    _onJumpToTopCallBack = onJumpToTop;
  }

  void jumpToTop(){
    _onJumpToTopCallBack?.call();
  }
}


class TimeLinePage extends StatefulWidget {
  const TimeLinePage({
    this.controller,
    Key? key
  }) : super(key: key);

  final TimeLinePageController? controller;

  @override
  TimeLinePageState createState() => TimeLinePageState();
}

class TimeLinePageState extends State<TimeLinePage> {

  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    widget.controller?.jumpToTopCallBack = onJumpToTop;
    super.initState();
  }


  @override
  void dispose() {
    widget.controller?.jumpToTopCallBack = null;
    _scrollController.dispose();

    super.dispose();
  }

  void onJumpToTop(){
    _scrollController.animateTo(0.0,
      duration: const Duration(milliseconds: 1000), curve: Curves.easeInOutQuart);
  }


  @override
  Widget build(BuildContext context) {
    
    return SingleChildScrollView(
      controller: _scrollController
      child: ....
    );
  }
}

The parent widet can call the controller method.

class ParentWidget ....
{

    final _timeLinePageController = TimeLinePageController();


    @override
    Widget build(BuildContext context) {

        return TimeLinePage(
            controller: _timeLinePageController
        )
    );

    void jumpTo(){
        _timeLinePageController.jumpToTop();
    }
}

score 0 · Answer 2 · answered Apr 05 '22 at 07:32

You can add controller to you scrollable widget and jump to top scroll this widget. Below example for this.

class TimeLinePage extends StatefulWidget {
   const TimeLinePage({Key? key}) : super(key: key);

   @override
   State<StatefulWidget> createState() => _TimeLinePageState();
}

class _TimeLinePageState extends State<TimeLinePage> {
    ScrollController timeLineScrollController; // give this controller object to scrollview

   @override
   void initState() {
   timeLineScrollController = ScrollController();

   Future.delayed(const Duration(milliseconds: 1000), () {
      WidgetsBinding.instance!.addPostFrameCallback((_) {
        jumpToTop(timeLineScrollController);
      });
   });

   super.initState();
}

@override
Widget build(BuildContext context) {}
}

Flutter - Run functions from outside the widget that use the controller in the widget

2 Answers2