Drawer ui improvement, tangheem screen added.
parent
62b54b918f
commit
ef69da80cb
@ -1,5 +1,5 @@
|
|||||||
sdk.dir=C:\\Users\\sikander.saleem\\Documents\\Sdks\\android
|
sdk.dir=C:\\Users\\sikander.saleem\\Documents\\Sdks\\android
|
||||||
flutter.sdk=C:\\Users\\sikander.saleem\\Documents\\Sdks\\flutter
|
flutter.sdk=C:\\Users\\sikander.saleem\\Documents\\Sdks\\flutter
|
||||||
flutter.buildMode=debug
|
flutter.buildMode=release
|
||||||
flutter.versionName=1.0.0
|
flutter.versionName=1.0.0
|
||||||
flutter.versionCode=1
|
flutter.versionCode=1
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue