EP.14 Music Player UI Using Animated Builder in Flutter

January 15, 2022

Overview

In this blog we create a Music player ui using Neumorphic design and Animated Builder in Flutter.

Source Code

import 'dart:math' as math;
import 'package:flutter_neumorphic/flutter_neumorphic.dart';

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

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

class _MusicPlayerState extends State<MusicPlayer>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  bool _isPlaying = true;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5),
    );
    _animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      appBar: AppBar(
        backgroundColor: Colors.grey.shade200,
        shadowColor: Colors.transparent,
        leading: Neumorphic(
          margin: const EdgeInsets.all(5),
          style: NeumorphicStyle(
              shape: NeumorphicShape.concave,
              boxShape: NeumorphicBoxShape.roundRect(BorderRadius.circular(40)),
              depth: 2,
              lightSource: LightSource.topRight,
              color: Colors.grey.shade200),
          child: const Icon(
            Icons.arrow_back,
            size: 25,
            color: Colors.black,
          ),
        ),
      ),
      body: Column(
        children: [
          SizedBox(
            width: MediaQuery.of(context).size.width,
            child: AnimatedBuilder(
              animation: _animationController,
              builder: (context, _) {
                return GestureDetector(
                  child: Transform.rotate(
                    angle: math.pi * 2 * _animationController.value,
                    child: Image.asset(
                      "assets/images/vinyl.png",
                      fit: BoxFit.fill,
                    ),
                  ),
                );
              },
            ),
          ),
          const SizedBox(
            height: 25,
          ),
          const Text(
            "Boom Shaka Laka",
            style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),
          ),
          const SizedBox(
            height: 10,
          ),
          const Text(
            "Jake",
            style: TextStyle(
                fontSize: 20, fontWeight: FontWeight.w500, color: Colors.grey),
          ),
          const SizedBox(
            height: 40,
          ),
          const Padding(
            padding: EdgeInsets.symmetric(horizontal: 25),
            child: NeumorphicProgress(
              duration: Duration(milliseconds: 500),
              height: 20,
              percent: 0.5,
              style: ProgressStyle(
                accent: Colors.green,
                depth: 2,
              ),
            ),
          ),
          const SizedBox(
            height: 30,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              NeumorphicIcon(
                Icons.fast_rewind,
                size: 60,
                style: NeumorphicStyle(
                    intensity: 15, color: Colors.grey.shade200, depth: 2),
              ),
              const SizedBox(
                width: 20,
              ),
              GestureDetector(
                onTap: () => {
                  setState(() {
                    _isPlaying = !_isPlaying;
                    _isPlaying
                        ? _animationController.repeat()
                        : _animationController.stop();
                  })
                },
                child: NeumorphicIcon(
                  _isPlaying ? Icons.pause : Icons.play_arrow,
                  size: 85,
                  style: NeumorphicStyle(
                      intensity: 20, color: Colors.grey.shade200, depth: 2),
                ),
              ),
              const SizedBox(
                width: 20,
              ),
              NeumorphicIcon(
                Icons.fast_forward,
                size: 60,
                style: NeumorphicStyle(
                    intensity: 20, color: Colors.grey.shade200, depth: 2),
              ),
            ],
          )
        ],
      ),
    );
  }
}