tangheem/lib/ui/search_screen.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:math' as math;
import 'package:tangheem/classes/const.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';

class SearchScreen extends StatefulWidget {
  static const String routeName = "/search";
  final String query;

  SearchScreen({Key key, @required this.query}) : super(key: key);

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

class _SearchScreenState extends State<SearchScreen> {
  double sliderValue = 0.4;
  bool isPlaying = false;

  @override
  void initState() {
    super.initState();
    searchQuery();
  }

  void searchQuery() {}

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

  @override
  Widget build(BuildContext context) {
    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: Const.primaryBlue, height: 1),
          ),
          SizedBox(height: 16),
          Row(
            children: [
              Expanded(
                child: CommonDropDownButton("سورة البقرة", onPressed: () {}),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton("من الاية" + " 158", onPressed: () {}),
              ),
              SizedBox(width: 4),
              Expanded(
                child: CommonDropDownButton("الى الاية" + " 123", onPressed: () {}),
              ),
            ],
          ),
          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.only(
                  topLeft: Radius.circular(8),
                  topRight: Radius.circular(8),
                ),
              ),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      nextOptionButton("assets/icons/go_forward.svg", "سورة الفاتحة", () {}),
                      previousOptionButton("assets/icons/go_forward.svg", "سورة آل عمران", () {}),
                    ],
                  ),
                  Expanded(
                    child: ListView(
                      physics: BouncingScrollPhysics(),
                      padding: EdgeInsets.only(top: 16, bottom: 8),
                      children: [
                        Text(
                          "بسم الله الرحمن الرحيم",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20, color: Const.primaryBlue, height: 1),
                        ),
                        SizedBox(height: 8),
                        Expanded(
                          child: Container(
                            padding: EdgeInsets.only(left: 4, right: 4),
                            child: Text(
                              "إِنَّ الصَّفَا وَالْمَرْوَةَ مِنْ شَعَائِرِ اللَّهِ ۖ فَمَنْ حَجَّ الْبَيْتَ أَوِ اعْتَمَرَ فَلَا جُنَاحَ عَلَيْهِ أَنْ يَطَّوَّفَ بِهِمَا ۚ وَمَنْ تَطَوَّعَ خَيْرًا فَإِنَّ اللَّهَ شَاكِرٌ عَلِيمٌ ﴿158﴾ إِنَّ الَّذِينَ يَكْتُمُونَ مَا أَنْزَلْنَا مِنَ الْبَيِّنَاتِ وَالْهُدَىٰ مِنْ بَعْدِ مَا بَيَّنَّاهُ لِلنَّاسِ فِي الْكِتَابِ ۙ أُولَٰئِكَ يَلْعَنُهُمُ اللَّهُ وَيَلْعَنُهُمُ اللَّاعِنُونَ ﴿159﴾ إِلَّا الَّذِينَ تَابُوا وَأَصْلَحُوا وَبَيَّنُوا فَأُولَٰئِكَ أَتُوبُ عَلَيْهِمْ ۚ وَأَنَا التَّوَّابُ الرَّحِيمُ ﴿160﴾ إِنَّ الَّذِينَ كَفَرُوا وَمَاتُوا وَهُمْ كُفَّارٌ أُولَٰئِكَ عَلَيْهِمْ لَعْنَةُ اللَّهِ وَالْمَلَائِكَةِ وَالنَّاسِ أَجْمَعِينَ ﴿161﴾ خَالِدِينَ فِيهَا ۖ لَا يُخَفَّفُ عَنْهُمُ الْعَذَابُ وَلَا هُمْ يُنْظَرُونَ ﴿162﴾ وَإِلَٰهُكُمْ إِلَٰهٌ وَاحِدٌ ۖ لَا إِلَٰهَ إِلَّا هُوَ الرَّحْمَٰنُ الرَّحِيمُ ﴿163﴾إِنَّ فِي خَلْقِ السَّمَاوَاتِ وَالْأَرْضِ وَاخْتِلَافِ اللَّيْلِ وَالنَّهَارِ وَالْفُلْكِ الَّتِي تَجْرِي فِي الْبَحْرِ بِمَا يَنْفَعُ النَّاسَ وَمَا أَنْزَلَ اللَّهُ مِنَ السَّمَاءِ مِنْ مَاءٍ فَأَحْيَا بِهِ الْأَرْضَ بَعْدَ مَوْتِهَا وَبَثَّ فِيهَا مِنْ كُلِّ دَابَّةٍ وَتَصْرِيفِ الرِّيَاحِ وَالسَّحَابِ الْمُسَخَّرِ بَيْنَ السَّمَاءِ وَالْأَرْضِ لَآيَاتٍ لِقَوْمٍ يَعْقِلُونَ ﴿164﴾ وَمِنَ النَّاسِ مَنْ يَتَّخِذُ مِنْ دُونِ اللَّهِ أَنْدَادًا يُحِبُّونَهُمْ كَحُبِّ اللَّهِ ۖ وَالَّذِينَ آمَنُوا أَشَدُّ حُبًّا لِلَّهِ ۗ وَلَوْ يَرَى الَّذِينَ ظَلَمُوا إِذْ يَرَوْنَ الْعَذَابَ أَنَّ الْقُوَّةَ لِلَّهِ جَمِيعًا وَأَنَّ اللَّهَ شَدِيدُ الْعَذَابِ ﴿165﴾ إِذْ تَبَرَّأَ الَّذِينَ اتُّبِعُوا مِنَ الَّذِينَ اتَّبَعُوا وَرَأَوُا الْعَذَابَ وَتَقَطَّعَتْ بِهِمُ الْأَسْبَابُ ﴿166﴾ وَقَالَ الَّذِينَ اتَّبَعُوا لَوْ أَنَّ لَنَا كَرَّةً فَنَتَبَرَّأَ مِنْهُمْ كَمَا تَبَرَّءُوا مِنَّا ۗ كَذَٰلِكَ يُرِيهِمُ اللَّهُ أَعْمَالَهُمْ حَسَرَاتٍ عَلَيْهِمْ ۖ وَمَا هُمْ بِخَارِجِينَ مِنَ النَّارِ ﴿167﴾4",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontFamily: "UthmanicHafs",
                                color: Const.primaryBlue,
                                fontSize: 20,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    "1 2 3 4 5 6 7 8 9",
                    style: TextStyle(fontSize: 14, color: Const.textHintGrey),
                  ),
                  SizedBox(height: 4),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      nextOptionButton("assets/icons/go_forward.svg", "الآيات السابقة", () {}),
                      previousOptionButton("assets/icons/go_forward.svg", "الآيات التالية", () {}),
                    ],
                  ),
                ],
              ),
            ),
          ),
          //   SizedBox(height: 16),
          Container(
            margin: EdgeInsets.only(top: 4, bottom: 4),
            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);
  }

  Widget nextOptionButton(String icon, String text, VoidCallback onPressed) {
    return InkWell(
      onTap: onPressed,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          SvgPicture.asset(icon, height: 16, width: 16, color: Const.secondaryOrange),
          SizedBox(width: 4),
          Text(
            text,
            style: TextStyle(color: Const.textGrey),
          ),
        ],
      ),
    );
  }

  Widget previousOptionButton(String icon, String text, VoidCallback onPressed) {
    return InkWell(
      onTap: onPressed,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            text,
            style: TextStyle(color: Const.textGrey),
          ),
          SizedBox(width: 4),
          SvgPicture.asset(icon, height: 16, width: 16, color: Const.secondaryOrange),
        ],
      ),
    );
  }
}