`vsync` property in TabController constructor

Question

According to this: sample code

I created my own implementation of TabController:

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {

  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: choices.length);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        bottomNavigationBar: new Material(
          color: Colors.blue,
          child: new TabBar(
            controller: _tabController,
            isScrollable: false,
            tabs: choices.map((Choice choice) {
              return new Tab(
                text: null,
                icon: new Icon(choice.icon),
              );
            }).toList(),
          ),
        ),
        appBar: new AppBar(
          title: const Text('Swap'),
        ),
        body: new TabBarView(
          controller: _tabController,
          children: choices.map((Choice choice) {
            return new Padding(
              padding: const EdgeInsets.all(16.0),
              child: new ChoiceCard(choice: choice),
            );
          }).toList(),
        ),
      ),
    );
  }
}

In line: _tabController = new TabController(vsync: this, length: choices.length); I got error this message:

error: The argument type '_MyAppState' can't be assigned to the parameter type 'TickerProvider'. (argument_type_not_assignable at [swap] lib/main.dart:24)

What is wrong with my code?

Collin Jackson · Accepted Answer · 2017-10-20T16:13:50.697

169

Add with TickerProviderStateMixin to the end of your State’s class declaration.

edited Oct 20 '17 at 16:13

answered Oct 20 '17 at 14:29

Collin Jackson

110,240
31
221
152

It was that. Now Im getting weird log in console during changing tabs: `Another exception was thrown: 'package:flutter/src/rendering/object.dart': Failed assertion: line 2257 pos 12: 'fragment is _InterestingSemanticsFragment': is not true.` – Kamil Harasimowicz Oct 20 '17 at 14:35
Doesn’t sound related, maybe restart app / upgrade your Flutter? – Collin Jackson Oct 20 '17 at 14:36
You might get hot Reload issues using StateMixin, if you do, try to use TickerProviderStateMixin instead of SingleTickerProviderStateMixin – Ruan Apr 19 '20 at 10:35

score 40 · Answer 2 · edited Jun 01 '20 at 12:10

40

Simply add with TickerProviderStateMixin at the end of extends state class as follows:

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
//...
}

edited Jun 01 '20 at 12:10

Alireza Rahmani Khalili

2,727
2
32
33

answered Jun 01 '20 at 08:04

Harsh Kumar

501
4
4

score 19 · Answer 3 · answered Jan 17 '19 at 04:02

As Answered earlier adding the mixin, TickerProviderStateMixin should do the job or you can also use SingleTickerProviderStateMixin if you only need a Single Ticker.

But what is Does TickerProviders really do?

vsync takes a TickerProvider as an argument , that's why we use SingleTickerProviderStateMixin and as the named describes TickerProvider provides Ticker which simply means it tells our app about the Frame update(or Screen Update), so that our AnimationController can generate a new value and we can redraw the animated widget.

score 10 · Answer 4 · answered Aug 25 '21 at 06:27

Add TickerProviderStateMixin at the end of class state

Here is the full example

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

class _HomeState extends State<Home> with TickerProviderStateMixin {
  MotionTabController? _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = new MotionTabController(initialIndex: 1, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController!.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

score 8 · Answer 5 · answered Jun 27 '20 at 09:29

Question is very generic, so need to describe more

Vsync used for

vsync is the property that represents the TickerProvider (i.e., Tick is similar to clock's tick which means that at every certain duration TickerProvider will render the class state and redraw the object.)
vsync property is required only on that constructor which requires to render its class state at every certain off-set time when we need to render our components or widgets to redraw and reflect the UI.
vsync can be used with the classes which require certain transition or animation to re-render to draw different objects.

Internal Implementation

TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
: assert(length != null && length >= 0),
  assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)),
  _index = initialIndex,
  _previousIndex = initialIndex,
  _animationController = AnimationController.unbounded(
    value: initialIndex.toDouble(),
    vsync: vsync,
  );

TabController uses AnimationController internally for the rendering of the tab bar state

Its really seems like that could have been an optional parameter. — user48956, Dec 08 '20 at 22:51

score 7 · Answer 6 · edited Jun 12 '22 at 10:47

7

In GetX

I found a solution just add with SingleGetTickerProviderMixin to be the full code as the below one:

import 'package:get/get.dart';
import 'package:flutter/material.dart';

class ControllerViewModel extends GetxController with GetSingleTickerProviderStateMixin {
  AnimationController _controller;
  @override
  void onInit() {
    // TODO: implement onInit
    super.onInit();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 2500,
      ),
    );
  }
}

edited Jun 12 '22 at 10:47

Abdelrahman Tareq

1,874
3
17
32

answered Dec 29 '21 at 07:50

Jithin U. Ahmed

1,495
1
19
29

It Worked , thanks a lot. but SingleGetTickerProviderMixin showing as deprecated. – abdulec90 Feb 23 '22 at 12:03

score 6 · Answer 7 · answered Feb 04 '22 at 04:54

The above answers are correct but you have to declare a tabbar in class and initialize the tabbar from iniState, else the vsync variable doesn't accept 'this' Following code may help you.

class _MatchesState extends State<Matches> with SingleTickerProviderStateMixin {
  TabController? tabController;
  @override
  void initState() {
    tabController = TabController(
      length: 2,
      vsync: this,
      initialIndex: 0,
    );
    super.initState();
  }

score 0 · Answer 8 · answered Jun 02 '20 at 13:31

0

Add any of these SingleTickerProviderStateMixin/ TickerProviderStateMixin mixins at the end of the statement like below:

Eg:

class _ListingViewState extends State with SingleTickerProviderStateMixin { }

answered Jun 02 '20 at 13:31

rohit

1
1

score 0 · Answer 9 · answered Feb 11 '23 at 18:58

0

just extend with SingleTickerProviderStateMixin in class you can see here full code

answered Feb 11 '23 at 18:58

aktarul ahsan mashud

34
4

`vsync` property in TabController constructor

9 Answers9

Here is the full example