tangheem/lib/ui/screens/home_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:tangheem/api/tangheem_user_api_client.dart';
import 'package:tangheem/app_state/surah_app_state.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/models/surah_model.dart';
import 'package:tangheem/models/tangheem_type_model.dart';
import 'package:tangheem/ui/screens/quran_screen.dart';
import 'package:tangheem/ui/screens/tangheem_screen.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';

class HomeScreen extends StatefulWidget {
  static const String routeName = "/";

  HomeScreen({Key key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  TextEditingController _searchController = TextEditingController();
  FocusNode _searchFocusNode = FocusNode();

  List<String> _surahList = [];
  List<String> _tangheemList = [];

  int _selectedSurah = -1;
  int _selectedTangheemType = -1;

  SurahModel _surahModel;
  TangheemType _tangheemType;

  @override
  void initState() {
    super.initState();
    SystemChannels.textInput.invokeMethod('TextInput.hide');
    getSurahAndTangheemTypes();
  }

  void getSurahAndTangheemTypes() async {
    Utils.showLoading(context);
    try {
      _surahModel = await TangheemUserApiClient().getSurahs();
      SurahAppState().setSurahModel(_surahModel);
      _tangheemType = await TangheemUserApiClient().getTangheemType();
      _surahList = _surahModel.data.map((element) => element.nameAR).toList();
      _tangheemList = _tangheemType?.data?.where((element) => element.isActive)?.toList()?.map((element) => element.tangheemTypeName)?.toList() ?? [];
      setState(() {});
    } catch (ex, tr) {
      Utils.handleException(ex, null);
    } finally {
      Utils.hideLoading(context);
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: SingleChildScrollView(
        padding: EdgeInsets.fromLTRB(16, 16, 16, 0),
        physics: BouncingScrollPhysics(),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              "موسوعةالأداء القرآني",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
            ),
            SizedBox(height: 4),
            Text(
              "للأساليب اللغوية",
              style: TextStyle(fontSize: 20, color: ColorConsts.primaryBlue, height: 1),
            ),
            SizedBox(height: 8),
            Text(
              "تساعدك موسوعة \"تنغيم\" على أداء الأساليب اللغوية القرآنية (كالاستفهام والأمر والنهي والإتمام) بما يخدم معنى الآية. وقد أشرف عليها متخصصون في اللغة العربية والدراسات القرآنية.",
              style: TextStyle(fontSize: 14, color: ColorConsts.textGrey, height: 1),
            ),
            SizedBox(height: 32),
            Row(
              children: [
                Expanded(
                  child: CommonDropDownButton(_selectedTangheemType, hintText: "الأسلوب اللغوي", list: _tangheemList, onSelect: (index) {
                    if (_selectedTangheemType != index) {
                      setState(() {
                        _selectedTangheemType = index;
                      });
                    }
                  }),
                ),
                SizedBox(width: 8),
                Expanded(
                  child: CommonDropDownButton(_selectedSurah, hintText: "السورة", list: _surahList, onSelect: (index) {
                    if (_selectedSurah != index) {
                      setState(() {
                        _selectedSurah = index;
                      });
                    }
                  }),
                )
              ],
            ),
            SizedBox(height: 16),
            InkWell(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onTap: () async {
                if (_selectedTangheemType < 0) {
                  Utils.showToast("الرجاء اختيار نوع تنغيم");
                  return;
                }
                if (_selectedSurah < 0) {
                  Utils.showToast("الرجاء اختيار السورة");
                  return;
                }
                _searchFocusNode.unfocus();
                _searchFocusNode.canRequestFocus = false;
                var data = {"tangheemTypeName": _tangheemList[_selectedTangheemType], "surahData": _surahModel.data[_selectedSurah]};
                await Navigator.pushNamed(context, TangheemScreen.routeName, arguments: data);
                _searchFocusNode.canRequestFocus = true;
              },
              child: Container(
                height: 36,
                decoration: BoxDecoration(
                  color: ColorConsts.secondaryPink,
                  borderRadius: BorderRadius.circular(6),
                ),
                padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      "ابدأ البحث",
                      maxLines: 1,
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    ),
                    SizedBox(width: 12),
                    SvgPicture.asset("assets/icons/go_forward.svg", width: 20, height: 20, color: Colors.white),
                  ],
                ),
              ),
            ),
            SizedBox(height: 16),
             Container(
              height: 50,
              padding: EdgeInsets.only(top: 4, bottom: 6),
              child: TextField(
                controller: _searchController,
                focusNode: _searchFocusNode,
                style: TextStyle(color: ColorConsts.primaryBlack, fontSize: 14),
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.fromLTRB(4, 4, 4, 4),
                  alignLabelWithHint: true,
                  fillColor: Colors.white,
                  filled: true,
                  hintStyle: TextStyle(color: ColorConsts.textHintGrey, fontSize: 12),
                  hintText: "البحث عن سورة أو آية",
                  prefixIconConstraints: BoxConstraints(maxHeight: 16),
                  prefixIcon: Padding(
                    padding: EdgeInsets.only(right: 6),
                    child: SvgPicture.asset("assets/icons/search.svg"),
                  ),
                  suffixIcon: InkWell(
                    onTap: () async {
                      _searchFocusNode.unfocus();
                      if (_searchController.text.length < 1) {
                        Utils.showToast("يجب إدخال بعض الكلمات للبحث");
                        return;
                      }
                      _searchFocusNode.canRequestFocus = false;
                      var data = {"tangheemQuery": _searchController.text};
                      await Navigator.pushNamed(context, TangheemScreen.routeName, arguments: data);
                      _searchFocusNode.canRequestFocus = true;
                    },
                    splashColor: Colors.transparent,
                    highlightColor: Colors.transparent,
                    child: Container(
                      alignment: Alignment.center,
                      width: 80,
                      child: Text(
                        "بحث",
                        style: TextStyle(fontSize: 14, color: Colors.white),
                      ),
                      decoration: BoxDecoration(
                        color: ColorConsts.secondaryPink,
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(6),
                          topLeft: Radius.circular(6),
                        ),
                      ),
                    ),
                  ),
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(6), borderSide: BorderSide.none),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}