flutter - 如何在 flutter 音频播放器应用程序中显示音乐栏

Question

我正在使用 flutter 开发音频播放器应用程序，我正在使用 on_audio_query package从存储中获取音频文件，以及 just_audio package用于音频播放器。

我想知道如何创建类似图中显示的栏的东西

提前致谢

Answer 1

我在 dartpad 中为您写了一个解决方案:https://dartpad.dev/?id=491a65532b2f92590c71a48be4836135

在我的示例中，您可以使用流来更新播放按钮周围的进度指示器。看看我的 getSecondsFromCurrentMinute 方法。将其替换为您的包中的流。

完整代码:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.black,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Align(
          alignment: Alignment.bottomCenter,
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  // Get the the seconds from current minute.
  //
  // TODO: Make this your actual progress indicator
  Stream<int> getSecondsFromCurrentMinute() async* {
    final now = DateTime.now();
    final seconds = now.second;
    yield seconds;
    await Future.delayed(Duration(seconds: 1 - seconds));
    yield* getSecondsFromCurrentMinute();
  }

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      heightFactor: .15,
      widthFactor: 1,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // Song cover
          Container(
            width: 40,
            height: 40,
            decoration: BoxDecoration(
                color: Colors.white, borderRadius: BorderRadius.circular(10)),
          ),

          // Padding
          SizedBox(width: 15),

          // Title and artist
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Title
              Text(
                "AUD-20190208-WA0007",
                style: Theme.of(context).textTheme.headline5,
              ),
              // Artist
              Text(
                "Unknown artist",
                style: Theme.of(context)
                    .textTheme
                    .bodyText2
                    ?.copyWith(color: Colors.grey.withOpacity(.6)),
              ),
            ],
          ),

          // Padding between first 2 columns and Icons
          Expanded(child: SizedBox.expand()),

          //
          // Play button and progress indicator
          //
          StreamBuilder<int>(
              stream: getSecondsFromCurrentMinute(),
              builder: (context, AsyncSnapshot<int> snapshot) {
                double percentageOfSecond = (snapshot.data ?? 0) / 60;

                return Container(
                  width: 40,
                  height: 40,
                  child: Stack(
                    children: [
                      // the circle showing progress
                      Positioned(
                        top: 0,
                        left: 0,
                        child: Container(
                          width: 40,
                          height: 40,
                          child: CircularProgressIndicator(
                            value: percentageOfSecond,
                            valueColor: AlwaysStoppedAnimation<Color>(
                              Colors.red,
                            ),
                            backgroundColor: Colors.red.withOpacity(0.15),
                          ),
                        ),
                      ),
                      // the play arrow, inside the circle
                      Positioned(
                        top: 0,
                        left: 0,
                        child: Container(
                          width: 35,
                          height: 35,
                          child: IconButton(
                            icon: Icon(
                              Icons.play_arrow,
                              color: Colors.red,
                            ),
                            onPressed: () {},
                          ),
                        ),
                      ),
                    ],
                  ),
                );
              }),

          SizedBox(width: 8),

          Container(
            width: 40,
            height: 40,
            child: GestureDetector(
              onTap: () {},
              child: Icon(
                Icons.skip_next,
                color: Colors.red,
              ),
            ),
          ),

          //
          SizedBox(width: 8),

          Container(
            width: 40,
            height: 40,
            child: GestureDetector(
              onTap: () {},
              child: Icon(
                Icons.menu,
                color: Colors.red,
                size: 35,
              ),
            ),
          ),

          // Extra padding at the end of the row
          SizedBox(width: 30),
        ],
      ),
    );
  }
}