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/colors.dart'; import 'package:tangheem/ui/screens/surah_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 { TextEditingController _searchController = TextEditingController(); FocusNode _searchFocusNode = FocusNode(); @override void initState() { super.initState(); SystemChannels.textInput.invokeMethod('TextInput.hide'); } @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("الأسلوب اللغوي", onPressed: () {}), // ), // SizedBox(width: 8), // Expanded( // child: CommonDropDownButton("السورة", onPressed: () {}), // ) // ], // ), SizedBox(height: 16), InkWell( splashColor: Colors.transparent, highlightColor: Colors.transparent, onTap: () async { _searchFocusNode.unfocus(); _searchFocusNode.canRequestFocus = false; await Navigator.pushNamed(context, TangheemScreen.routeName); _searchFocusNode.canRequestFocus = true; }, child: Container( height: 40, decoration: BoxDecoration( color: ColorConsts.secondaryPink, borderRadius: BorderRadius.circular(6), ), padding: EdgeInsets.fromLTRB(8, 8, 8, 8), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: [ Text( "ابدأ البحث", maxLines: 1, // overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 12, color: Colors.white), ), SizedBox(width: 8), 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", //color: Const.secondaryOrange, ), ), suffixIcon: InkWell( onTap: () async { _searchFocusNode.unfocus(); _searchFocusNode.canRequestFocus = false; await Navigator.pushNamed(context, SurahScreen.routeName, arguments: _searchController.text); _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), ), ), ) ], ), ), ); } }