How to use Provider to show or hide FAB?

Question

I'm just starting to look at alternatives to setState() and therefore Provider. In the first program that I am looking at to implement Provider, the only setState() that I use is on the initial build(), and also when data changes in order to display a FAB when the FAB is not already displayed. There are six TextField widgets in this program, and they all have TextEditingControllers, so they all have their own state.

Is it feasible to use Provider in this situation when _tfDataHasChanged (bool) changes, and if so, how?

Code is below for the FAB creation:

Widget _createFab() {
    if (_tfDisplayOnly || !_tfDataHasChanged) return null;
    return FloatingActionButton(
      onPressed: _btnSubmitPressed,
      backgroundColor: _colorFab,
      mini: false,
      tooltip: _sBtnSubmitText /* Add or Create */,
      child: _iconFab,
    );
}

score 0 · Accepted Answer · answered Aug 23 '19 at 06:47

You can:

Widget _createFab( BuildContext context) {

    boolean showFab = Provider.of<ShowFab>(context).shouldShow;
    return showFab?FloatingActionButton(
      onPressed: _btnSubmitPressed,
      backgroundColor: _colorFab,
      mini: false,
      tooltip: _sBtnSubmitText /* Add or Create */,
      child: _iconFab,
    ):null;   
}

with the ShowFab class looking like

class ShowFab with ChangeNotifier {
  boolean shouldShow;

  void showFab( boolean show ){
    shouldShow = show;
    notifyListeners();
  }
}

Obviously your specific logic will be different, The ShowFab needs to be provided higher in the widget tree.

ChangeNotifierProvider<ShowFab>( builder: (context) => ShowFab(), child: .... )

How to use Provider to show or hide FAB?

1 Answers1