Flutter で Nas 音楽プレーヤーを作成する (2)

1//フォームサイズを取得する
2Size _size = MediaQuery.of(context).size;
3//右側が表示したい部分です。まず幅を計算し、それを表示したい画像の幅で割ります。
4double _rightWidth = (_size.width - 160) / 180;
5//次に切り捨て
6int _count = _rightWidth.truncate();

1MasonryGridView.count(
2              crossAxisCount: _count,
3              mainAxisSpacing: 10,
4              crossAxisSpacing: 10,
5              itemCount: _albums!.length,
6              itemBuilder: (context, index) {
7                return ...
8              }

 1ClipRRect(
 2  borderRadius: BorderRadius.circular(15),
 3  child: Image.network(
 4    _temURL,
 5    fit: BoxFit.cover,
 6    frameBuilder: (context, child, frame,wasSynchronouslyLoaded) {
 7      if (wasSynchronouslyLoaded) {
 8        return child;
 9      }
10      return AnimatedSwitcher(
11        child: frame != null
12          ? child
13          : Image.asset("assets/images/logo.jpg"),
14        duration: const Duration(milliseconds: 2000),
15      );
16    },
17  ),
18)

 1//現在のリソース ID を監視します。これは音楽の再生だけでなく、歌手の写真などの取得にも使用されます。
 2ValueNotifier<String> activeSongValue = ValueNotifier<String>("1");
 3
 4//現在のプレイリストを監視する
 5ValueNotifier<List> activeList = ValueNotifier<List>([]);
 6
 7//現在のソングシーケンスをモニタリングする
 8ValueNotifier<int> activeIndex = ValueNotifier<int>(0);
 9
10//上記と同様に、現在の曲を監視します。これは、曲名、アーティスト名、アルバム名を入力する必要があるため、データベース クエリを保存するためだけに渡されます。それ以外の場合は、これを渡す必要はありません。
11ValueNotifier<Map> activeSong = ValueNotifier<Map>(Map());
12
13//順序が狂っているかどうかを監視します。これは、トリガーの順序が狂っていることを監視するために使用されます。
14ValueNotifier<bool> isShuffleModeEnabledNotifier = ValueNotifier<bool>(false);
15
16//最初の曲かどうかを監視する
17ValueNotifier<bool> isFirstSongNotifier = ValueNotifier<bool>(true);
18
19//最後の曲かどうかを監視します。これは、エラーの報告を避けるために、前の曲と次の曲のボタンをブロックするためです。
20ValueNotifier<bool> isLastSongNotifier = ValueNotifier<bool>(true);

 1onTap: () async {
 2  activeSongValue.value = _tem.id;
 3  //曲が収録されているアルバム 曲リスト
 4  activeList.value = _songs!;
 5  //現在の曲のキュー
 6  activeIndex.value = index;
 7  //現在のソングを組み立てる
 8  Map _activeSong = new Map();
 9  String _url = await getCoverArt(_tem.id);
10  _activeSong["artist"] = _tem.artist;
11  _activeSong["url"] = _url;
12  _activeSong["title"] = _tem.title;
13  _activeSong["album"] = _tem.album;
14  activeSong.value = _activeSong;
15}

1ValueListenableBuilder<String>(
2   valueListenable: activeSongValue,
3   builder: ((context, value, child) {
4   if (value != "1") {
5      setAudioSource();
6   }
7   return ...

 1Future<void> setAudioSource() async {
 2    //1. 声明
 3    final playlist = ConcatenatingAudioSource(
 4      useLazyPreparation: true,
 5      shuffleOrder: DefaultShuffleOrder(),
 6      children: await _getPlayList(),
 7    );
 8    //3. プレイリストを追加し、現在再生中の曲を設定します
 9    await _player.setAudioSource(playlist,
10        initialIndex: activeIndex.value, initialPosition: Duration.zero);
11    //4. プレイを開始する
12    _player.play();
13}
14
15  _getPlayList() async {
16    List<AudioSource> children = [];
17    List _songs = activeList.value;
18    把触发的时候传的值拿出来
19    for (var element in _songs) {
20      Songs _song = element;
21      //2. データベースにアクセスして音楽ファイルのアドレスを入力します。
22      String _url = await getSongStreamUrl(_song.id);
23      children.add(AudioSource.uri(Uri.parse(_url), tag: _song.id)); //ここでの tag の設定に注意してください。これは、後の監視に使用されます。
24    }
25    return children;
26  }

 1  void _listenForChangesInSequenceState() {
 2    //当
 3    //播到下一首的时候触发
 4    _player.sequenceStateStream.listen((sequenceState) async {
 5      //没东西的时候滚粗
 6      if (sequenceState == null) return;
 7
 8      // 更新当前播放歌曲的信息
 9      final currentItem = sequenceState.currentSource;
10      //拿到生成播放列表的时候放到tag里面的id
11      final _title = currentItem?.tag as String?;
12      //去数据库查资料拿到歌曲信息
13      final _tem = await getSong(_title.toString());
14      //更新当前歌曲id
15      activeSongValue.value = _title.toString();
16
17      //拼装当前歌曲
18      Map _activeSong = new Map();
19      String _url = await getCoverArt(_tem["id"]);
20      _activeSong["artist"] = _tem["artist"];
21      _activeSong["url"] = _url;
22      _activeSong["title"] = _tem["title"];
23      _activeSong["album"] = _tem["album"];
24      activeSong.value = _activeSong;
25
26      // 这里监控乱序的，我没用，自己写了一个（主要是先写了乱序的逻辑，后做的播放列表，懒得改了）
27      // isShuffleModeEnabledNotifier.value = sequenceState.shuffleModeEnabled;
28
29      //拿到播放列表
30      final playlist = sequenceState.effectiveSequence;
31      //判断上一首下一首，然后把值传进去给按钮做状态判断
32      if (playlist.isEmpty || currentItem == null) {
33        isFirstSongNotifier.value = true;
34        isLastSongNotifier.value = true;
35      } else {
36        isFirstSongNotifier.value = playlist.first == currentItem;
37        isLastSongNotifier.value = playlist.last == currentItem;
38      }
39    });
40  }

 1        IconButton(
 2          icon: const Icon(
 3            Icons.fast_rewind,
 4            color: kTextColor,
 5          ),
 6          onPressed: () {
 7            if (widget.player.position.inSeconds - 15 > 0) {
 8              widget.player.seek(
 9                  Duration(seconds: widget.player.position.inSeconds - 15));
10            }
11          },
12        ),

 1ValueListenableBuilder<bool>(
 2            valueListenable: isLastSongNotifier,
 3            builder: (_, isLast, __) {
 4              return IconButton(
 5                icon: Icon(
 6                  Icons.skip_next,
 7                  color: isLast ? badgeDark : kTextColor,
 8                ),
 9                onPressed: () {
10                  (isLast) ? null : widget.player.seekToNext();
11                },
12              );
13            }),

 1     # To add assets to your application, add an assets section, like this:
 2     assets:
 3       - assets/images/
 4     fonts:
 5       - family: NotoSansSC
 6         fonts:
 7           - asset: assets/fonts/NotoSansSC-Regular.otf
 8       - family: ChivoMono
 9         fonts:
10           - asset: assets/fonts/ChivoMono-Regular.ttf

1   Text(
2           formatSongDuration(widget.position),
3           style: TextStyle(
4               color: borderColor, fontFamily: 'ChivoMono', fontSize: 12),
5         )

1return MaterialApp(
2      debugShowCheckedModeBanner: false,
3      title: 'XiuMusic',
4      theme: ThemeData(fontFamily: 'NotoSansSC'),
5      home: MainScreen(),
6    );