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 { 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.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://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSgswb98Ga7aJjIaNvqUWBsjMkdR18xzp3pyg&usqp=CAU"), ), 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", () {}), SizedBox(width: 16), 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), onPressed: onPressed); } }