Лучший способ передать выбранный индекс во флаттере - PullRequest
Новая
       0

Лучший способ передать выбранный индекс во флаттере

0 голосов
/ 20 июня 2020

У меня есть данные из firestore enter image description here

Мне нужно отобразить имя на одной странице и имя контента на другой странице и, следовательно, эпизоды

Есть ли лучший способ, чем эта

страница телешоу 

FutureBuilder(
            future: Provider.of<Data>(context).fetchShows(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(
                      onTap: () {
                        tvSelected = index;
                        Navigator.push(context, MaterialPageRoute(
                            builder: (BuildContext context) {
                          return SeasonsPage(selectedTv: tvSelected);
                        }));
                      },
                      child: Container(
                        margin: EdgeInsets.all(10.0),
                        width: 100.0,
                        color: Colors.orangeAccent,
                        child: Text(snapshot.data[index].name),
                      ),
                    );
                  },
                );
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }),

страница сезонов: 

FutureBuilder(
        future: Provider.of<Data>(context).fetchShows(),
        builder: (context, snapshot) => snapshot.hasData
            ? ListView.builder(
                itemCount: snapshot.data[selectedTv].content.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: () {
                      selectedSeason = index;
                      Navigator.push(context, MaterialPageRoute(
                          builder: (BuildContext context) {
                        return EpisodesPage(
                          selectedTv: selectedTv,
                          selectedSeason: selectedSeason,
                        );
                      }));
                    },
                    child: Container(
                      margin: EdgeInsets.all(10.0),
                      width: 100.0,
                      color: Colors.orangeAccent,
                      child: Text(
                          snapshot.data[selectedTv].content[index].name),
                    ),
                  );
                },
              )
            : Center(child: CircularProgressIndicator()),
      ),

страница эпизодов: 

FutureBuilder(
        future: Provider.of<Data>(context).fetchShows(),
        builder: (context, snapshot) => snapshot.hasData
            ? ListView.builder(
                itemCount: snapshot.data[selectedTv].content[selectedSeason]
                    .episodes.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.all(10.0),
                    width: 100.0,
                    color: Colors.orangeAccent,
                    child: Text(snapshot.data[selectedTv]
                        .content[selectedSeason].episodes[index]),
                  );
                },
              )
            : Center(child: CircularProgressIndicator()),
      ),

посмотрите когда я прохожу страницу маршрута ............................. ............... .............. ...........................

1 Ответ

1 голос
/ 20 июня 2020

Сначала вы создаете новый класс провайдера, который будет содержать индексы выбранного в настоящий момент ТВ, эпизода и сезона, как показано ниже: 

class CurrentIndexProvider with ChangeNotifier {
  int _selectedTv;
  int _selectedSeason;
  int _selectedEpisode;

  set selectedTv(int newIndex) {
    this._selectedTv = newIndex;
    notifyListeners();
  }

  set selectedSeason(int newIndex) {
    this._selectedSeason = newIndex;
    notifyListeners();
  }

  set selectedEpisode(int newIndex) {
    this._selectedEpisode = newIndex;
    notifyListeners();
  }

  int get selectedTv => this._selectedTv;
  int get selectedSeason => this._selectedSeason;
  int get selectedEpisode => this._selectedEpisode;
}

Затем ваша страница телешоу станет: 

final selectedItems = Provider.of<CurrentIndexProvider>(context);
FutureBuilder(
            future: Provider.of<Data>(context).fetchShows(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return InkWell(
                      onTap: () {
                        // tvSelected = index; -->we dont need this anylonger
                        //we set the current show number to the index of the current 
                        //listview item when tapped
                        selectedItems.selectedSeason=index; 
                        Navigator.push(context, MaterialPageRoute(
                            builder: (BuildContext context) {
                          return SeasonsPage(
                            //we don't need to pass anything in the constructor again
                            // selectedTv: tvSelected
                            );
                        }));
                      },
                      child: Container(
                        margin: EdgeInsets.all(10.0),
                        width: 100.0,
                        color: Colors.orangeAccent,
                        child: Text(snapshot.data[index].name),
                      ),
                    );
                  },
                );
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            }),

ваша страница сезонов становится 

final selectedItems = Provider.of<CurrentIndexProvider>(context);
FutureBuilder(
    future: Provider.of<Data>(context).fetchShows(),
    builder: (context, snapshot) => snapshot.hasData
        ? ListView.builder(
            itemCount: snapshot.data[ selectedItems.selectedTv].content.length,
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              return InkWell(
                onTap: () {
                  //selectedSeason = index; --> we dont need this any longer
                  selectedItems.selectedSeason=index;
                  Navigator.push(context, MaterialPageRoute(
                      builder: (BuildContext context) {
                    return EpisodesPage(
                      //we don't need any parameter in the constructor now
                      // selectedTv: selectedTv,
                      // selectedSeason: selectedSeason,
                    );
                  }));
                },
                child: Container(
                  margin: EdgeInsets.all(10.0),
                  width: 100.0,
                  color: Colors.orangeAccent,
                  child: Text(
                      snapshot.data[selectedItems.selectedTv].content[index].name),
                ),
              );
            },
          )
        : Center(child: CircularProgressIndicator()),
  ),

И, наконец, страница эпизодов становится 

   final selectedItems = Provider.of<CurrentIndexProvider>(context);
FutureBuilder(
        future: Provider.of<Data>(context).fetchShows(),
        builder: (context, snapshot) => snapshot.hasData
            ? ListView.builder(
                itemCount: snapshot.data[selectedItems.selectedTv ].content[selectedItems.selectedSeason]
                    .episodes.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    margin: EdgeInsets.all(10.0),
                    width: 100.0,
                    color: Colors.orangeAccent,
                    child: Text(snapshot.data[selectedItems.selectedTv]
                        .content[selectedItems.selectedSeason].episodes[index]),
                  );
                },
              )
            : Center(child: CircularProgressIndicator()),
      ),

Благодаря этому вы можете получить доступ к текущему выбранному телешоу, сезонам или даже эпизодам где угодно. внутри кода с помощью provider. надеюсь, это помогло

...