Как показать только показ прогресса / индикатор прогресса для выбранного индекса в listview.builder? - PullRequest
1 голос
/ 27 апреля 2020

Итак, я создал код для отображения индикатора прогресса загруженного файла (видео) после нажатия кнопки загрузки под каждым видео.

Индикатор прогресса работает и отлично отображает прогресс.

API JSON Структура: https://pastebin.com/raw/JPCyaKMn

Задача :

enter image description here

Показывает прогресс для всех видео в ListView.builder после нажатия кнопки загрузки под контейнером видео.

Я хочу, чтобы прогресс показывался только для выбранного (выбранного) видео контейнера, как бы я это сделал?

Мой код :

@override
  Widget build(BuildContext context) {
    return data != null
        ? WillPopScope(
            onWillPop: () async => false,
            child: Scaffold(
              body: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SafeArea(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10, top: 50.0, bottom: 10.0),
                      child: Text(
                        "Videos",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 32.0,
                            fontWeight: FontWeight.w700),
                      ),
                    ),
                  ),
                  Expanded(
                    child: ListView.builder(
                      itemCount: data.body.videos.length,
                      itemBuilder: (context, index) {
                        return Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            InkWell(
                              onTap: () async {},
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 20),
                                child: Column(
                                  children: <Widget>[
                                    Container(
                                      width: MediaQuery.of(context).size.width -
                                          40,
                                      margin: const EdgeInsets.only(
                                          bottom: 0, top: 20),
                                      height: 70,
                                      decoration: BoxDecoration(
                                        borderRadius: BorderRadius.only(
                                            topLeft: Radius.circular(5),
                                            topRight: Radius.circular(5),
                                            bottomLeft: Radius.zero,
                                            bottomRight: Radius.zero),
                                        color: Colors.white,
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            downloading ? Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 20),
                              child: LinearProgressIndicator(
                                value: _progress,
                              ),
                            ) : Container(),
                            Center(
                              child: SizedBox(
                                width: 128,
                                child: MaterialButton(
                                  minWidth: 40,
                                  child: Center(
                                    child: Text(
                                      "Download",
                                      style: TextStyle(color: Colors.white),
                                    ),
                                  ),
                                  height: 40,
                                  color: Colors.red,
                                  onPressed: () async {
                                    _getDownload(data
                                        .body.videos[index].backblazeVideoId);
                                  },
                                ),
                              ),
                            ),
                          ],
                        );
                      },
                    ),
                  ),
                ],
              ),
              resizeToAvoidBottomPadding: false,
              backgroundColor: thirdcolor,
            ),
          )
        : CircularProgressIndicator();
  }

Моя функция загрузки :

// Returns a file (mp4) after the API is given credentials & the fileid of the tapped video
_getDownload(String fileid) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String email = prefs.getString('email');
    String token = prefs.getString('accesstoken');

    final Directory docDir = await getExternalStorageDirectory();

    String docPath = docDir.path;
    File docFile = File('$docPath/$fileid.mp4');
    var dio = Dio();
    var response = await dio.post(
        "https://api.myvideovault.com/profile/downloadVideo",
        data: {
          "email": email,
          "token": token,
          "method": "download",
          "fileid": fileid
        },
        options: Options(contentType: "application/x-www-form-urlencoded"),
        onReceiveProgress: (received, total) {
      String lol = "${((received / total) * 100).toInt()} %";
      double haha = received/total;
      print("${received ~/ total} %");

      setState(() {
        downloading = true;
        _progress = haha;
      });
    });
  }

1 Ответ

2 голосов
/ 27 апреля 2020

Проблема в том, что ваша переменная downloading сообщает вам, загружается ли какое-либо из ваших видео. Это будет работать, если вы передадите index в качестве параметра _getDownload и сохраните index кнопки, которая вызвала _getDownload.
Затем вы можете использовать это как условие вашего троичного оператора, чтобы показать линейный прогресс показатель.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...