Выровняйте несколько кнопок по центру веб-страницы flutter - PullRequest
0 голосов
/ 02 августа 2020

Я пытаюсь выровнять нижнюю часть страницы по центру, это отображается правильно на мобильном устройстве, но в Интернете выглядит не так. Как мне расположить все 4 кнопки musi c и текст в центре страницы. Я попробовал «Выровнять по центру фрианда», но оба варианта не поместили их в центр виджета. Моя цель - получить кнопку в центре страницы в зависимости от размера страницы, если размер страницы небольшой, код ниже - это хорошо, но когда я максимизирую браузер, он не отображается в центре.

Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  // child: Expanded(child: slider()),
                  child: kIsWeb ? null : slider(),
                ),
                Marquee(
                  child: Text(inuseAudioinfo.title ?? appname,
                      softWrap: true,
                      style: TextStyle(
                        // color: AppColors.black.withAlpha(90),
                        color: AppColors.black.withAlpha(150),
                        fontSize: 16,
                      )),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                    top: BorderSide(color: Colors.red[300]),
                    // bottom: BorderSide(color: AppColors.white)
                  )),
                  child: Wrap(
                    spacing: kIsWeb
                        ? MediaQuery.of(context).size.width * 0.1
                        : 25, // space between two icons
                    children: <Widget>[
                      IconButton(
                        icon: Icon(
                          inuseAudioinfo.isRepeat
                              ? Icons.repeat_one
                              : Icons.repeat,
                          color: inuseAudioinfo.isRepeat
                              ? AppColors.brown
                              : AppColors.black,
                        ),
                        onPressed: () {
                          print("User clicked Repeat one.");
                          if (inuseAudioinfo.playId != null) {
                            Duration seekdur = new Duration(seconds: 10);
                            if (inuseAudioinfo.isRepeat) {
                              setState(() {
                                inuseAudioinfo.isRepeat = false;
                              });
                            } else {
                              setState(() {
                                inuseAudioinfo.isRepeat = true;
                              });
                            }
                          } else {
                            commonmethod.displayDialog(
                              context,
                              "",
                              "Please select song to play.",
                              Icon(
                                Icons.library_music,
                                size: 100,
                                color: AppColors.red200,
                              ),
                            );
                          }
                        },
                      ),
                      IconButton(
                          icon: Icon(
                            inuseAudioinfo.isPlaying
                                ? Icons.pause
                                : Icons.play_arrow,
                            color: AppColors.black,
                          ),
                          onPressed: () {
                            _player(_songId);
                          }),
                      IconButton(
                          icon: Icon(
                            Icons.stop,
                            color: AppColors.black,
                          ),
                          onPressed: () {
                            if (inuseAudioinfo.isPlaying) {
                              // _inuseAudioinfo.audioPlayer.stop();
                              inuseAudioinfo.duration =
                                  new Duration(seconds: 0);
                              inuseAudioinfo.audioPlayer.stop();
                              setState(() {
                                inuseAudioinfo.isPlaying = false;
                                // position = new Duration(seconds: 0);
                                // _duration = new Duration();
                              });
                            }

                            // isPlaying = false;
                          }),
                      IconButton(
                          icon: Icon(
                            Icons.shuffle,
                            color: inuseAudioinfo.isShuffle
                                ? AppColors.brown
                                : AppColors.black,
                          ),
                          onPressed: () {
                            if (inuseAudioinfo.isShuffle) {
                              setState(() {
                                inuseAudioinfo.isShuffle = false;
                              });
                            } else {
                              setState(() {
                                inuseAudioinfo.isShuffle = true;
                              });
                            }
                          }),
                    ],
                  ),
                ),
                // ),
                // ),
              ],
            )

введите описание изображения здесь

1 Ответ

1 голос
/ 07 августа 2020

удалить Wrap () и использовать Row(mainAxisAlignment: MainAxisAlignment.center,)

...