import 'package:flutter/cupertino.dart'; import 'package:flutter/material.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/aya_tangheem_property.dart'; import 'package:tangheem/models/aya_tangheem_type.dart'; import 'package:tangheem/models/aya_tangheem_type_mapped.dart'; import 'package:tangheem/models/surah_model.dart'; import 'package:tangheem/widgets/aya_player_widget.dart'; import 'package:tangheem/widgets/text_highlight_widget.dart'; class TangheemScreen extends StatefulWidget { static const String routeName = "/tangheem"; final tangheemTypeName; final SurahModelData surah; TangheemScreen({Key key, this.surah, this.tangheemTypeName}) : super(key: key); @override _TangheemScreenState createState() { return _TangheemScreenState(); } } class _TangheemScreenState extends State { GlobalKey _globalKey = GlobalKey(); List _tangheemInsideTableTrueList = []; List _tangheemInsideTableValueList = []; List _tangheemInsideTableEmptyList = []; List _tangheemWords = []; int _currentTangheemPage = -1; AyatTangheemTypeMapped _ayatTangheemTypeMapped; AyatTangheemTypeMappedData _ayatTangheemTypeMappedData; @override void initState() { super.initState(); _tangheemInsideTableValueList = []; _tangheemInsideTableEmptyList = []; getTangheemData(); } void getTangheemData() async { Utils.showLoading(context); try { _ayatTangheemTypeMapped = await TangheemUserApiClient().getAyaTangheemTypeMapped(0, widget.tangheemTypeName); if (_ayatTangheemTypeMapped.data.length > 0) _currentTangheemPage = 0; } catch (ex, tr) { Utils.handleException(ex, null); } finally { Utils.hideLoading(context); } filterData(); } void filterData() { _ayatTangheemTypeMappedData = _ayatTangheemTypeMapped.data[_currentTangheemPage]; _tangheemWords.add(_ayatTangheemTypeMappedData.highlightText ?? ""); _tangheemInsideTableTrueList = _ayatTangheemTypeMappedData?.property?.where((element) => element.isInsideTable)?.toList() ?? []; _tangheemInsideTableValueList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isNotEmpty)?.toList() ?? []; _tangheemInsideTableEmptyList = _ayatTangheemTypeMappedData?.property?.where((element) => (!element.isInsideTable) && (element.propertyValue ?? "").isEmpty)?.toList() ?? []; setState(() {}); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.fromLTRB(16, 24, 16, 0), width: double.infinity, child: _ayatTangheemTypeMappedData == null ? SizedBox() : Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( widget.tangheemTypeName ?? "", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1.5), ), SizedBox(height: 8), Text( "هنا نضع\" تعريف بالاستفهام وتداخل الأساليب\"", style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1), ), SizedBox(height: 8), Expanded( child: Container( margin: EdgeInsets.only(top: 4, bottom: 4), padding: EdgeInsets.only(top: 8, bottom: 8, right: 4, left: 4), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(8), ), child: Column( children: [ Expanded( child: SingleChildScrollView( physics: BouncingScrollPhysics(), child: RepaintBoundary( key: _globalKey, child: Material( color: Colors.white, child: ListView( physics: NeverScrollableScrollPhysics(), shrinkWrap: true, padding: EdgeInsets.all(4), children: [ TextHighLightWidget( text: _ayatTangheemTypeMappedData.ayahText ?? "", valueColor: ColorConsts.primaryBlue, highlights: _tangheemWords, style: TextStyle( fontFamily: "UthmanicHafs", fontSize: 18, fontWeight: FontWeight.bold, ), ), SizedBox(height: 16), ListView.separated( itemCount: _tangheemInsideTableValueList.length, physics: NeverScrollableScrollPhysics(), shrinkWrap: true, separatorBuilder: (context, index) { return Divider( color: Colors.white, height: 1, thickness: 0, ); }, itemBuilder: (context, index) { return Row( children: [ Expanded( child: Container( height: 40, padding: EdgeInsets.only(left: 4, right: 8), alignment: Alignment.centerRight, child: Text( _tangheemInsideTableValueList[index].propertyText, style: TextStyle(fontWeight: FontWeight.bold, color: ColorConsts.secondaryOrange), ), color: ColorConsts.secondaryWhite, ), ), SizedBox(width: 8), Expanded( child: Container( height: 40, padding: EdgeInsets.only(left: 4, right: 8), alignment: Alignment.centerRight, child: Text( _tangheemInsideTableValueList[index].propertyValue, style: TextStyle(color: ColorConsts.primaryBlack), ), color: ColorConsts.secondaryWhite, ), ) ], ); }), if (_tangheemInsideTableTrueList.isNotEmpty) Container( color: ColorConsts.primaryBlue, margin: EdgeInsets.only(top: 8, bottom: 8), padding: EdgeInsets.all(8), child: Column( children: [ Text( widget.tangheemTypeName ?? "", style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), ), SizedBox(height: 8), tangheemPropertyView(_tangheemInsideTableTrueList) ], ), ), tangheemPropertyView(_tangheemInsideTableEmptyList) ], ), ), ), ), ), SizedBox(height: 4), Padding( padding: EdgeInsets.only(left: 4, right: 4), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ nextOptionButton( "assets/icons/prev_single.svg", "الآيات السابقة", (_currentTangheemPage == 0 || (_ayatTangheemTypeMapped.data.length < 1)) ? null : () { _currentTangheemPage = _currentTangheemPage - 1; filterData(); }), previousOptionButton( "assets/icons/next_single.svg", "الآيات التالية", (_currentTangheemPage == (_ayatTangheemTypeMapped.data.length - 1) || (_ayatTangheemTypeMapped.data.length < 1)) ? null : () { _currentTangheemPage = _currentTangheemPage + 1; filterData(); }), ], ), ), ], ), ), ), AyaPlayerWidget(surahName: _ayatTangheemTypeMappedData.surahNameAr ?? "", globalKey: _globalKey, voiceNoteList: _ayatTangheemTypeMappedData.voiceNote ?? []) ], ), ); } 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), ], ), ); } Widget tangheemPropertyView(List tangheemPropertyList) { return Container( color: Colors.white, child: ListView.separated( itemCount: tangheemPropertyList.length, physics: NeverScrollableScrollPhysics(), padding: EdgeInsets.zero, shrinkWrap: true, separatorBuilder: (context, index) { return Divider( color: Colors.white, height: 1, thickness: 0, ); }, itemBuilder: (context, index) { return Container( color: ColorConsts.secondaryWhite, padding: EdgeInsets.all(8), child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [ Text( tangheemPropertyList[index].propertyText ?? "", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12, color: ColorConsts.secondaryOrange), ), SizedBox(height: 4), Text( tangheemPropertyList[index].propertyValue ?? "", style: TextStyle(fontSize: 12, color: ColorConsts.secondaryPink), ), ], ), ); }, ), ); } }