Flutter音乐播放插件jiosaavn_wrapper的使用

本文将详细介绍如何在Flutter项目中使用jiosaavn_wrapper插件来实现音乐播放功能。通过简单的代码示例，您可以快速上手并集成该插件到您的项目中。

环境准备

在开始之前，请确保您已经配置好Flutter开发环境，并且安装了以下依赖：

• Flutter SDK
• Dart SDK

此外，在pubspec.yaml文件中添加jiosaavn_wrapper依赖：

dependencies:
  jiosaavn_wrapper: ^版本号
  cached_network_image: ^版本号

运行flutter pub get以获取依赖。

使用步骤

1. 初始化项目

创建一个新的Flutter项目，并在lib/main.dart中编写代码。

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:jiosaavn_wrapper/jiosaavn_wrapper.dart';
import 'package:jiosaavn_wrapper/modals/playlist.dart';
import 'package:jiosaavn_wrapper/modals/search_result.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JioSaavnWrapper Example App',
      home: HomeScreen(),
    );
  }
}

2. 构建UI界面

我们将构建一个简单的音乐播放界面，包含搜索功能和热门歌曲列表。

搜索功能

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool searching = false;
  String searchQuery = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: searching ? Colors.white : null,
        title: !searching
            ? Text('Awesome Music')
            : CupertinoSearchTextField(
                onChanged: (searchQuery) {
                  setState(() => this.searchQuery = searchQuery.toLowerCase());
                },
              ),
        actions: [
          IconButton(
            onPressed: () {
              setState(() => searching = !searching);
            },
            icon: Icon(
              searching ? Icons.cancel_outlined : Icons.search,
              color: searching ? Colors.black : null,
            ),
          )
        ],
      ),
      body: Container(
        margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        child: searching
            ? searchQuery.isEmpty
                ? Center(
                    child: Text('搜索 Something e.g. 歌曲名或歌手名...'),
                  )
                : _buildSearchList()
            : _buildTopSongs(),
      ),
    );
  }

搜索结果列表

FutureBuilder<SearchResult> _buildSearchList() {
  return FutureBuilder<SearchResult>(
    future: JioSaavnWrapper.instance.fetchSearchResults(searchQuery: searchQuery),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        return ListView.builder(
          itemCount: snapshot.data!.songs.length,
          itemBuilder: (context, index) => ListTile(
            leading: SizedBox(
              height: 48,
              width: 48,
              child: CachedNetworkImage(
                imageUrl: snapshot.data!.songs[index].image,
              ),
            ),
            title: Text(snapshot.data!.songs[index].title),
            subtitle: Text(
              snapshot.data!.songs[index].description,
              maxLines: 2,
            ),
          ),
        );
      } else {
        if (snapshot.hasError) {
          return Center(
            child: Text('未找到结果...'),
          );
        } else {
          return Center(
            child: Text('搜索歌曲名或歌手名...'),
          );
        }
      }
    },
  );
}

热门歌曲列表

FutureBuilder<Playlist?> _buildTopSongs() {
  return FutureBuilder<Playlist?>(
      future: JioSaavnWrapper.instance.fetchTopSongs(),
      builder: (context, snapshot) =>
          snapshot.hasData
              ? ListView.builder(
                  itemCount: snapshot.data?.songs.length ?? 0,
                  itemBuilder: (context, index) => Card(
                    elevation: 10,
                    child: ListTile(
                      title: Text(
                        snapshot.data!.songs[index].title,
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                      subtitle: Text(
                        snapshot.data!.songs[index].subtitle,
                        maxLines: 2,
                      ),
                      leading: SizedBox(
                        height: 48,
                        width: 48,
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(5),
                          child: CachedNetworkImage(
                            imageUrl: snapshot.data!.songs[index].mediumResImage,
                          ),
                        ),
                      ),
                      trailing: Icon(Icons.play_arrow_outlined),
                    ),
                  ),
                )
              : snapshot.hasError
                  ? Center(
                      child: SelectableText(
                        snapshot.error.toString(),
                      ),
                    )
                  : Center(
                      child: CircularProgressIndicator(),
                    ));
}