Flutter State Management using ValueNotifier and ValueListenableBuilder - No Packages

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024
  • Dashboard using `ValueNotifier` and `ValueListenableBuilder`.
    State Management by using built-in Flutter classes. No Packages.
    What is covered
    In this project, you are going to take a look at:
    - How to use `ValueNotifier` and `ValueListenableBuilder` to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree
    - State Management with build-in classes, no packages
    The Problem:
    - Dashboard app needs to chart espresso, coffee, and latte consumption
    - Drawing each bar, the chart needs to refresh independently for performance
    The Solution:
    - Use the `ValueNotifier` and `ValueListenableBuilder` to allow to selectively rebuild individual widgets for performance
    ValueNotifier and ValueListenableBuilder
    The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance
    1. Create a class that extends `ValueNotifier`
    2. Add fields to contain data defining them as `ValueNotifier`
    3. Add methods to modify data and call the `notifyListeners()` method
    4. Add the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field
    How it Works
    `ValueNotifier` and `ValueListenableBuilder` - The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance. Use fields to contain data defining them as `ValueNotifier`. Use methods to modify data and call the `notifyListeners()` method. Use the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field.
    GitHub: github.com/Jed...
    Twitter: / jedipixels
    Looking for Updates: JediPixels.dev
    Blog Article: jedipixels.dev...
    Subscribe: www.youtube.co...
    #flutter #fluttertutorial #dart #flutterdev

Комментарии • 7

  • @The_Fun_Era
    @The_Fun_Era Год назад +1

    finally a clear explanation for value notifier..gee thanks

  • @001Debjeet
    @001Debjeet Год назад

    I have used this but i get null error
    The following TypeErrorImpl was thrown building ValueListenableBuilder(state:
    _ValueListenableBuilderState#daaba):
    Unexpected null value.
    not able to find the solution for this

    • @JediPixels
      @JediPixels  Год назад

      I am using the following format:
      ```ValueNotifier numberOfEspresso = ValueNotifier(0);```
      ```
      ValueListenableBuilder(
      valueListenable: dashboardValueNotifier.value.numberOfEspresso,
      builder: (BuildContext context, int value, Widget? child) {
      debugPrint('numberOfEspresso: ${dashboardValueNotifier.value.numberOfEspresso.value}');
      return MoodVerticalBarWidget(
      icon: Icons.coffee_maker_outlined,
      numberToPlot: dashboardValueNotifier.value.numberOfEspresso.value,
      numberToPlotMax: numberToPlotMax,
      title: 'Espresso',
      );
      },
      ),
      ```

  • @adil_elkhallouki
    @adil_elkhallouki 2 года назад +1

    Thanks is very useful 👍