What Are controllers in flutter?

A controller can be used to customize the behavior of a widget. You can pass a custom implementation of a controller.

Sometimes a controller holds state that has a different lifecycle than the widget it is associated with like https://docs.flutter.io/flutter/widgets/TextEditingController-class.html


I like to think of Controllers as a way to programmatically apply changes in your app that would normally come from user interactions. Controllers are objects you can attach to certain Widgets, and then use those objects to control the behaviour of that Widget. Let's look at some examples:

When using a ListView, you can attach a ScrollController to programmatically interact with the ListView. Maybe you want to scroll the ListView to a certain position when someone presses a button, or you want information about the current offset in your list.

Another similar example is attaching a PageController to a PageView. Maybe something happens in your app where you want to automatically move to the first page in your PageView. With an attached PageController, you could call myPageController.animateToPage() to do that.

A third example is when working with the library for Google Maps, you can attach a GoogleMapController and use that to perform all kinds of actions, like moving the map to new coordinates, zooming, rotating, adding markers, etc.

Lastly, to look at one of the examples you gave, when working with a TextFormField you can attach a TextEditingController to get information about the current value, or perhaps clear the textfield automatically when a "Reset" button is pressed.

When using controllers, the recommended way is to keep them in your state. The code example below is not complete, but hopefully gives you a sense on how to initiate, attach and use a controller, in this case a PageController.

class _ControllerDemoState extends State<ControllerDemo> {
  /// Declare the variable to use.
  PageController pageController;

  @override
  void initState() {
    super.initState();
    /// Instantiate the PageController in initState.
    pageController = PageController();
  }

  /// When this method is called, we can use the pageController to automatically
  /// animate the PageView to the first page.
  void onButtonPress() {
    pageController.animateToPage(
      0,
      curve: Curves.easeInOut,
      duration: Duration(milliseconds: 200),
    );
  }

  return PageView(
    /// Attach the controller to the PageView.
    controller: pageController,
    children: [
      ...
    ]
  ),
}

Using Controllers properly can be a very powerful way to control the behaviour of your app and is worth learning more about. Good luck!


In flutter, controllers are a means to give control to the parent widget over its child state.

The main selling point of controllers is that they remove the need of a GlobalKey to access the widget State. This, in turn, makes it harder to do anti-pattern stuff and increase performances.

Controllers also allow having a complex API without having thousands of callbacks on the widget. They also allow to not "lift the state up", as the State is still managed by the child.

Tags:

Flutter