import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:tangheem/api/tangheem_user_api_client.dart'; import 'package:tangheem/classes/colors.dart'; import 'package:tangheem/classes/utils.dart'; import 'package:tangheem/models/aya_model.dart'; import 'package:tangheem/models/surah_model.dart'; import 'package:tangheem/widgets/auto_scroll_view/aya_scroll_view.dart'; import 'package:tangheem/widgets/auto_scroll_view/scroll_id.dart'; import 'package:tangheem/widgets/aya_player_widget.dart'; import 'package:tangheem/widgets/common_dropdown_button.dart'; import 'package:tangheem/widgets/text_highlight_widget.dart'; class SurahScreen extends StatefulWidget { static const String routeName = "/surah"; final SurahModel surahModel; final String query; SurahScreen({Key key, this.surahModel, @required this.query}) : super(key: key); @override _SurahScreenState createState() { return _SurahScreenState(); } } class _SurahScreenState extends State { GlobalKey _globalKey = GlobalKey(); int _selectedSurah = 0; int _selectedFromAya = 0; int _selectedToAya = 0; int _currentPage = 0; int _ayaInPage = 5; List _surahList = []; List _fromAyaList = []; List _toAyaList = []; SurahModel _surahModel; AyaModel _ayaModel; @override void initState() { super.initState(); scrollToId = ScrollToId(scrollController: scrollController); getSurah(); } void getSurah() async { Utils.showLoading(context); try { if (widget.surahModel == null) { _surahModel = await TangheemUserApiClient().getSurahs(); } else { _surahModel = widget.surahModel; } _surahList = _surahModel.data.map((element) => element.nameAR).toList(); filterData(); } catch (ex, tr) { Utils.handleException(ex, null); } finally { Utils.hideLoading(context); } } int numberOfAyah = 0; void filterData() { numberOfAyah = _surahModel?.data[_selectedSurah]?.numberOfAyahs ?? 0; var filteredAyahList = List.generate(getNextMultiple(numberOfAyah), (index) => index + 1).toList().where((element) => element == 1 || (element % 5) == 0).toList() ?? []; _fromAyaList = filteredAyahList.getRange(0, filteredAyahList.length - 1)?.toList() ?? []; _toAyaList = filteredAyahList.getRange(1, filteredAyahList.length)?.toList() ?? []; _currentPage = 0; _selectedFromAya = 0; _selectedToAya = 0; getAyaByRange(); } void getAyaByRange() async { Utils.showLoading(context); try { _ayaModel = await TangheemUserApiClient().getAyaByRange(_ayaInPage, 1, _selectedSurah + 1, _fromAyaList[_selectedFromAya], _toAyaList[_selectedToAya]); setState(() {}); } catch (ex, tr) { Utils.handleException(ex, null); } finally { Utils.hideLoading(context); } scrollToId.animateTo("$_currentPage", duration: Duration(milliseconds: 300), curve: Curves.ease); } int getNextMultiple(int num) { int multipleOf = 5; int nextDiff = multipleOf - (num % multipleOf); int total = num + nextDiff; return total; } @override void dispose() { super.dispose(); } final ScrollController scrollController = ScrollController(); ScrollToId scrollToId; @override Widget build(BuildContext context) { String _surahAya = _ayaModel?.data?.map((e) => e.ayahText)?.toList()?.fold("", (value, element) => value + element) ?? ""; return Container( padding: EdgeInsets.fromLTRB(16, 24, 16, 0), width: double.infinity, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "اقرأ القرآن الكريم", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1), ), SizedBox(height: 16), Row( children: [ Expanded( child: CommonDropDownButton(_selectedSurah, list: _surahList, onSelect: (index) { if (_selectedSurah != index) { _selectedSurah = index; _selectedToAya = 0; _selectedFromAya = 0; filterData(); } }), ), SizedBox(width: 4), Expanded( child: CommonDropDownButton(_selectedFromAya, list: _fromAyaList.map((e) => "من الاية" + " $e").toList(), onSelect: (index) { if (_selectedFromAya != index) { _selectedFromAya = index; _selectedToAya = index; _currentPage = index; getAyaByRange(); } }), ), SizedBox(width: 4), Expanded( child: CommonDropDownButton(_selectedToAya, list: _toAyaList.map((e) => "الى الاية" + " $e").toList(), onSelect: (index) { if (_selectedToAya != index) { _selectedToAya = index; _currentPage = index; getAyaByRange(); } }), ), ], ), SizedBox(height: 16), Expanded( child: Container( margin: EdgeInsets.only(top: 4, bottom: 4), padding: EdgeInsets.only(top: 16, bottom: 4, right: 16, left: 16), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(8), ), child: Column( children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ nextOptionButton( "assets/icons/prev.svg", _selectedSurah == 0 ? "" : _surahList[_selectedSurah - 1], _selectedSurah == 0 ? null : () { _selectedSurah = _selectedSurah - 1; filterData(); }), previousOptionButton( "assets/icons/next.svg", _selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? "" : _surahList[_selectedSurah + 1], _selectedSurah == (_surahList.isNotEmpty ? (_surahList.length - 1) : 0) ? null : () { _selectedSurah = _selectedSurah + 1; filterData(); }), ], ), Expanded( child: SingleChildScrollView( physics: BouncingScrollPhysics(), child: RepaintBoundary( key: _globalKey, child: Material( color: Colors.white, child: ListView( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, padding: EdgeInsets.only(top: 16, bottom: 8), children: [ Text( "بسم الله الرحمن الرحيم", textAlign: TextAlign.center, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1), ), SizedBox(height: 8), Container( padding: EdgeInsets.only(left: 4, right: 4), child: Text( _surahAya, textAlign: TextAlign.center, style: TextStyle( fontFamily: "UthmanicHafs", color: ColorConsts.primaryBlue, fontSize: 18, fontWeight: FontWeight.bold, ), ), ), ], ), ), ), ), ), SizedBox(height: 8), AyaScrollViewer( scrollDirection: Axis.horizontal, scrollToId: scrollToId, children: [ for (int i = 0; i < _fromAyaList.length; i++) ScrollContent( id: '$i', child: Text( " ${i + 1} ", style: TextStyle(fontSize: 16, color: _currentPage == i ? ColorConsts.secondaryOrange : ColorConsts.textHintGrey), ), ), ], ), SizedBox(height: 4), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ nextOptionButton( "assets/icons/prev_single.svg", "الآيات السابقة", _currentPage == 0 ? null : () { _currentPage = _currentPage - 1; _selectedFromAya = _selectedFromAya - 1; _selectedToAya = _selectedToAya - 1; getAyaByRange(); }), previousOptionButton( "assets/icons/next_single.svg", "الآيات التالية", _currentPage == (_toAyaList.isNotEmpty ? (_toAyaList.length - 1) : 0) ? null : () { _currentPage = _currentPage + 1; _selectedFromAya = _selectedFromAya + 1; _selectedToAya = _selectedToAya + 1; getAyaByRange(); }), ], ), ], ), ), ), AyaPlayerWidget(surahName: _surahList.isNotEmpty ? _surahList[_selectedSurah] : "", globalKey: _globalKey) ], ), ); } Widget nextOptionButton(String icon, String text, VoidCallback onPressed) { return InkWell( onTap: onPressed, child: onPressed == null ? SizedBox() : Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ SvgPicture.asset(icon, height: 12, width: 12), SizedBox(width: 4), Text( text, style: TextStyle(color: ColorConsts.textGrey), ), ], ), ); } Widget previousOptionButton(String icon, String text, VoidCallback onPressed) { return InkWell( onTap: onPressed, child: onPressed == null ? SizedBox() : Row( crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Text( text, style: TextStyle(color: ColorConsts.textGrey), ), SizedBox(width: 4), SvgPicture.asset(icon, height: 12, width: 12), ], ), ); } }