Używanie haczyków w trzepoczącej sieci

Jak korzystać z haków Flutter we Flutter Web? Hmm…

Wszystko w jednym zasobie Flutter: https://flatteredwithflutter.com/flutter-web-and-flutter-hooks/

Zaczynać…

Strona internetowa: https://fir-signin-4477d.firebaseapp.com/#/

Omówimy pokrótce

1. Flutter Hooks.

Co to są haki Flutter?

Zanim odpowiemy na to pytanie, najpierw dowiedzmy się

Dlaczego Flutter Hooks?

Zgodnie z dokumentacją

StatefulWidgetcierpi na problem, bardzo trudno jest ponownie wykorzystać logikę initStatelub dispose. Na przykład AnimationController:

AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
  }

  @override
  void didUpdateWidget(Example oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.duration != oldWidget.duration) {
      _controller.duration = widget.duration;
    }
  }

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

Przedstawiamy Flutter Hooks

dependencies:
  flutter_hooks: ^0.9.0

class Example extends HookWidget {}

[Widżet], który może używać [Hook]

Jego użycie jest bardzo podobne do [StatelessWidget]. [HookWidget] nie ma żadnego cyklu życia i implementuje tylko metodę [build].

Różnica polega na tym, że może używać [Hook], co umożliwia [HookWidget] przechowywanie zmiennych danych bez implementowania [State].

Rzeczy do wzięcia :

• Implementuje tylko metodę kompilacji
• Ten widget może używać haków

class Example extends HookWidget {
  final Duration duration;

  const Example({Key key, @required this.duration})
      : assert(duration != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(duration: duration);
    return Container();
  }
}

Zobacz, jak używać hooków do walidacji strumieni

Flutter Web i strumienie

Co to są haki?

Haczyki to rodzaj obiektów, według których obowiązują następujące zasady….

• Mogą być używane tylko w buildmetodzie HookWidget.
• Można je ponownie wykorzystać.

Widget build(BuildContext context) {
  final controller = useAnimationController();
  final controller2 = useAnimationController();
  return Container();
}

• useState : tworzy zmienną i subskrybuje ją.
• kontekst użycia: uzyskuje BuildContextbudynek HookWidget.
• useValueChanged : obserwuje wartość i wywołuje wywołanie zwrotne po każdej zmianie wartości.
• useValueListenable : subskrybuje a ValueListenablei zwraca jego wartość.
• useTextEditingController : tworzy plikTextEditingController

Implementowanie haków Flutter

Tutaj możesz zobaczyć formularz z 5 polami wejściowymi. Rzeczy do zanotowania:

• Pierwsze 2 pola ( nazwa i nazwa kursu ) są polami obowiązkowymi
• Reszta to pola opcjonalne
• Przycisk Zapisz będzie wymagał wypełnienia obowiązkowych pól…
• Jeśli wszystko jest w porządku, pojawi się okno dialogowe potwierdzenia z danymi formularza (właśnie wprowadziłeś).

Po zapisaniu odpowiedź jest wysyłana i zapisywana… :)

• Każde pole wejściowe jest powiązane z zaczepem TextController ( useTextEditingController )

Każde pole obowiązkowe jest powiązane z hookiem ValueListenable ( useValueListenable )

final _nameListenable = useValueListenable(_namefield);

final _onSavePressed = useState(false);

final _validateFields =
        _nameListenable.text.isNotEmpty && _tutNameListenable.text.isNotEmpty;

Ważne kwestie:

• Nie wywołaliśmy setstate ani gdzieś nie zapisaliśmy żadnej wartości pośredniej.
• Wszystko jest połączone z hakiem, gdy wartość wewnątrz haka ulegnie zmianie, widżet haka zostanie powiadomiony…
• Aby uzyskać bieżącą wartość obowiązkowych pól, używamy hooka valueListenable…

Optymalizacje wydajności:

Domyślnie cały HookWidget jest powiadamiany o zmianie zaczepu, ale można to zmienić za pomocą

• HookBuilder

HookBuilder(
    builder: (context) {
       //YOUR WIDGET       
    },
),

W przypadku, gdy interesują Cię tylko wybrane hooki, z listy haczyków możesz je określić za pomocą useEffect

final _emailfield = useTextEditingController.fromValue(
      TextEditingValue.empty,
    );
useEffect(
    () {
      // YOUR LOGIC
    },
    [_emailfield],
);

Buforuje wystąpienie złożonego obiektu.

final stream = useMemoized(
      () => Stream<int>.periodic(
      const Duration(seconds: 1), (i) => i + 1),
);

Teraz możesz zasugerować mój następny artykuł, używając tego formularza: p…

Również uprzejmie zasugeruj wskazówki (w komentarzach), z którymi mogłeś się spotkać w przypadku haczyków typu trzepotanie…

Artykuły związane z Flutter Web:

Korzystanie z selektora w usługach Provider Firebase Hosting i Siteground

Hostowany adres URL: https://fir-signin-4477d.firebaseapp.com/#/

Kod źródłowy aplikacji Flutter Web App.

Uff… ..