tangheem/lib/ui/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/classes/const.dart';
import 'package:tangheem/ui/surah_screen.dart';
import 'package:tangheem/ui/tangheem_screen.dart';
import 'package:tangheem/widgets/common_dropdown_button.dart';

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

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

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16, 16, 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: 4),
          Text(
            "للأساليب اللغوية",
            style: TextStyle(fontSize: 20, color: Const.primaryBlue, height: 1),
          ),
          SizedBox(height: 8),
          Text(
            "تساعدك موسوعة \"تنغيم\" على أداء الأساليب اللغوية القرآنية (كالاستفهام والأمر والنهي والإتمام) بما يخدم معنى الآية. وقد أشرف عليها متخصصون في اللغة العربية والدراسات القرآنية.",
            style: TextStyle(fontSize: 14, color: Const.textGrey, height: 1),
          ),
          SizedBox(height: 32),
          Row(
            children: [
              Expanded(
                child: CommonDropDownButton("الأسلوب اللغوي", onPressed: () {}),
              ),
              SizedBox(width: 8),
              Expanded(
                child: CommonDropDownButton("السورة", onPressed: () {}),
              )
            ],
          ),
          SizedBox(height: 16),
          CommonDropDownButton(
            "ابدأ البحث",
            color: Const.secondaryPink,
            icon: "assets/icons/go_forward.svg",
            widthHeight: 20,
            iconColor: Colors.white,
            onPressed: () {
              FocusScope.of(context).unfocus();
              Navigator.pushNamed(context, TangheemScreen.routeName);
            },
          ),
          SizedBox(height: 16),
          SizedBox(
            height: 40,
            child: TextField(
              controller: _searchController,
              style: TextStyle(color: Const.primaryBlack, fontSize: 14),
              decoration: InputDecoration(
                contentPadding: EdgeInsets.fromLTRB(4, 4, 4, 4),
                alignLabelWithHint: true,
                fillColor: Colors.white,
                filled: true,
                hintStyle: TextStyle(color: Const.textHintGrey, fontSize: 12),
                hintText: "البحث عن سورة أو آية",
                prefixIconConstraints: BoxConstraints(maxHeight: 16),
                prefixIcon: Padding(
                  padding: EdgeInsets.only(right: 6),
                  child: SvgPicture.asset(
                    "assets/icons/search.svg",
                    color: Const.secondaryOrange,
                  ),
                ),
                suffixIcon: InkWell(
                  onTap: () {
                    FocusScope.of(context).unfocus();
                    Navigator.pushNamed(context, SurahScreen.routeName, arguments: _searchController.text);
                  },
                  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: Const.secondaryPink,
                      borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(6),
                        topLeft: Radius.circular(6),
                      ),
                    ),
                  ),
                ),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(6), borderSide: BorderSide.none),
              ),
            ),
          )
        ],
      ),
    );
  }
}