tangheem/lib/widgets/aya_player_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/classes/const.dart';
import 'dart:math' as math;

class AyaPlayerWidget extends StatefulWidget {
  AyaPlayerWidget({Key key}) : super(key: key);

  @override
  _AyaPlayerWidgetState createState() {
    return _AyaPlayerWidgetState();
  }
}

class _AyaPlayerWidgetState extends State<AyaPlayerWidget> {
  double sliderValue = 0.4;
  bool isPlaying = false;

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 8, bottom: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
        ),
      ),
      padding: EdgeInsets.all(8),
      child: Column(
        children: [
          Row(
            children: [
              Transform.rotate(
                angle: 180 * math.pi / 180,
                child: SvgPicture.asset(
                  "assets/icons/drop_menu.svg",
                  color: Const.secondaryOrange,
                  width: 16,
                ),
              ),
              Container(
                width: 50.0,
                margin: EdgeInsets.only(left: 8, right: 8),
                height: 50.0,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage("https://i.pinimg.com/originals/91/cf/45/91cf453d79f58df425b6b0267603ccb3.jpg"),
                  ),
                  borderRadius: BorderRadius.all(
                    Radius.circular(30.0),
                  ),
                ),
              ),
              Expanded(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "سورة البقسورة البقسورة البقرة",
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: Const.primaryBlack, height: 1),
                    ),
                    SizedBox(height: 4),
                    Text(
                      "الشيخ عبد الشيخ عبد العزيز الزهراني",
                      style: TextStyle(fontSize: 10, color: Const.textGrey1, height: 1),
                    ),
                  ],
                ),
              ),
              commonIconButton("assets/icons/download_aya.svg", () {}),
              commonIconButton("assets/icons/share_aya.svg", () {}),
              commonIconButton("assets/icons/bookmark.svg", () {}),
              commonIconButton("assets/icons/audio_level.svg", () {}),
            ],
          ),
          SizedBox(height: 8),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              commonIconButton("assets/icons/next_aya.svg", () {}),
              SizedBox(width: 4),
              commonIconButton(isPlaying ? "assets/icons/pause.svg" : "assets/icons/play_aya.svg", () {
                setState(() {
                  isPlaying = !isPlaying;
                });
              }),
              SizedBox(width: 4),
              commonIconButton("assets/icons/previous_aya.svg", () {}),
              Expanded(
                child: SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    activeTrackColor: Const.sliderBackground,
                    inactiveTrackColor: Const.secondaryOrange,
                    // trackShape: RoundedRectRangeSliderTrackShape(),
                    trackHeight: 8.0,
                    thumbColor: Const.primaryBlack,
                    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 10.0),
                    overlayColor: Colors.red.withAlpha(32),
                    overlayShape: RoundSliderOverlayShape(overlayRadius: 12.0),
                  ),
                  child: Slider(
                    value: sliderValue,
                    onChanged: (value) {
                      setState(() {
                        sliderValue = value;
                      });
                    },
                  ),
                ),
              ),
              Text(
                "06:00",
                style: TextStyle(color: Const.textGrey1, height: 1.1, fontFamily: "Roboto"),
              ),
            ],
          )
        ],
      ),
    );
  }

  Widget commonIconButton(String icon, VoidCallback onPressed) {
    return IconButton(constraints: BoxConstraints(), padding: EdgeInsets.only(right: 2), icon: SvgPicture.asset(icon, height: 16, width: 16, color: Const.textGrey), onPressed: onPressed);
  }
}