Провайдер Flutter и потоки

Втекает, выходит…

Как прослушивать данные в реальном времени отдельно от StreamBuilder….? Хм…..

Использование селектора в Провайдере

Использование селектора в провайдере
Использование селектора в провайдере medium.com

Все в одном ресурсе Flutter: https://flatteredwithflutter.com/how-to-use-stream-provider-in-flutter/

Начинать…

Недавно команда Flutter анонсировала пакет управления состоянием под названием Provider на Google I / O 2019.

Как использовать…

Добавьте эту зависимость в свой pubspec.yaml.

provider: ^2.0.0+1

Слушайте данные…

У нас был StreamBuilder во Flutter…

Несомненно, лучший виджет для прослушивания данных в реальном времени…

Это требует двух аргументов

Поток
Конструктор, который может преобразовывать элементы потока в виджеты.

StreamBuilder(
  stream: //YOUR STREAM, 
  builder: (BuildContext context, AsyncSnapshot snapshot){ 
  return //YOUR CHILD; 
})

Теперь у нас также есть StreamProvider …… .. :)

Это исходит из пакета провайдера.

StreamProvider<LocationModelNormal>.value(
    initialData: LocationModelNormal.initialData(),
    stream: locationStreamInstance.specificLocation(_secondWonder),
    child: SecondStreamWidget(),
),

В StreamProvider нам нужно указать тип объекта, который мы слушаем….

В приведенном выше случае LocationModelNormal (класс модели)…

LocationModelNormal класс (ниже)….

class LocationModelNormal {
  final String name;

  final String url;

  final GeoPoint coordinates;

  final String videoURL;

  LocationModelNormal({
    this.name,
    this.url,
    this.coordinates,
    this.videoURL,
  });

  factory LocationModelNormal.fromMap(Map<String, dynamic> data) {
    return LocationModelNormal(
      name: data['name'] ?? '',
      url: data['url'] ?? '',
      coordinates: data['location'] ?? null,
      videoURL: data['link'] ?? '',
    );
  }

  factory LocationModelNormal.initialData() {
    return LocationModelNormal(
      coordinates: null,
      name: '',
      videoURL: '',
      url:'',
    );
  }
}

2. Затем мы предоставляем initialData.

В нашем случае LocationModelNormal.initialData ()…. (См. Фрагмент выше)

3. Наконец, мы предоставляем дочерний виджет.

В нашем случае SecondStreamWidget ()…

Очень похоже на StreamBuilder, верно !!!!!!!!! :)

Доступ к данным в Child…

Теперь, когда у нас настроен StreamProvider, нам нужно показать результаты в дочернем элементе…

Для доступа к данным (у вашего ребенка)…

var data = Provider.of<LocationModelNormal>(context);

Здесь мы указали результат, ожидаемый от нашего потока, используя Provider.of ‹Type› (context) ..

В нашем случае Type = LocationModelNormal.

В действии,

Padding(
     padding: const EdgeInsets.symmetric(horizontal: 8.0),
     child: Text(‘${data.name}'),
),

где данные = указанная выше переменная…

Слушайте изменения в сети…

При внедрении большого количества значений в большие приложения Provider может быстро стать довольно вложенным, поэтому у нас есть MultiProvider

MultiProvider(
  providers: [
    Provider<Foo>.value(value: foo),
    Provider<Bar>.value(value: bar),
    Provider<Baz>.value(value: baz),
  ],
  child: someWidget,
)

Вариант использования…

В нашем примере мы слушаем изменения сети, прежде чем загружать другие потоки… ..

Как сделать,

Установите зависимость подключение
Оберните свое MaterialApp с помощью MultiProvider…

return MultiProvider(
  providers: [
    StreamProvider<ConnectionStatus>.value(
           stream:streamConnectivityService().connectivityController.stream,
    ),
  ],
  child: MaterialApp(
     home: Home(),
  ),
);

Здесь класс модели - ConnectionStatus…

Теперь ваш домашний виджет получит изменения в подключении к сети ... Вы можете соответственно отображать различные пользовательские интерфейсы ...

Испускаемые значения….

Wi-Fi, офлайн или мобильные данные….

Widget build(BuildContext context) {
    var network = Provider.of<ConnectionStatus>(context);
    final _width = MediaQuery.of(context).size.width;
    final _height = MediaQuery.of(context).size.height;

    if (network == ConnectionStatus.wifi ||
        network == ConnectionStatus.mobileData) {
      return Container(
        child: child,
      );
    }

    return Container(
      height: _height,
      width: _width,
      child: Text('YOU ARE OFFLINE'),
    );
}

Статьи, связанные с Flutter:

Flutter Web и машинное обучение
Используете машинное обучение во Flutter Web? Проверить сейчас! medium.com

Провайдер - и его типы
Ознакомьтесь с провайдерами и его типами medium.com