From 98821c34b0e003c172f5ea37ab9c24ee4d10ef79 Mon Sep 17 00:00:00 2001
From: Efrain <mimo4325@gmail.com>
Date: Mon, 19 Jul 2021 14:36:34 -0500
Subject: [PATCH] [Presentation] Make the search_box.dart take 70% of the
 device width on mobile landscape and larger devices

---
 lib/presentation/shared/search_box.dart | 66 ++++++++++++++-----------
 1 file changed, 38 insertions(+), 28 deletions(-)

diff --git a/lib/presentation/shared/search_box.dart b/lib/presentation/shared/search_box.dart
index e7c9a1eaa..34a5f55dd 100644
--- a/lib/presentation/shared/search_box.dart
+++ b/lib/presentation/shared/search_box.dart
@@ -1,5 +1,7 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:genshindb/generated/l10n.dart';
+import 'package:responsive_builder/responsive_builder.dart';
 
 typedef SearchChanged = void Function(String val);
 
@@ -41,36 +43,44 @@ class _SearchBoxState extends State<SearchBox> {
   Widget build(BuildContext context) {
     final s = S.of(context);
     final theme = Theme.of(context);
-    return Card(
-      elevation: 3,
-      margin: const EdgeInsets.all(10),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
-      child: Row(
-        children: <Widget>[
-          Container(
-            margin: const EdgeInsets.only(left: 10),
-            child: const Icon(Icons.search),
-          ),
-          Expanded(
-            child: TextField(
-              controller: _searchBoxTextController,
-              focusNode: _searchFocusNode,
-              cursorColor: theme.accentColor,
-              keyboardType: TextInputType.text,
-              textInputAction: TextInputAction.go,
-              decoration: InputDecoration(
-                border: InputBorder.none,
-                contentPadding: const EdgeInsets.symmetric(horizontal: 15),
-                hintText: '${s.search}...',
-              ),
+    final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+    final maxWidth = MediaQuery.of(context).size.width;
+    final device = getDeviceType(MediaQuery.of(context).size);
+    final maxSize = device == DeviceScreenType.mobile && isPortrait ? maxWidth : maxWidth * 0.7;
+
+    return Container(
+      constraints: BoxConstraints(maxWidth: maxSize),
+      child: Card(
+        elevation: 3,
+        margin: const EdgeInsets.all(10),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+        child: Row(
+          children: <Widget>[
+            Container(
+              margin: const EdgeInsets.only(left: 10),
+              child: const Icon(Icons.search),
             ),
-          ),
-          if (widget.showClearButton)
-            IconButton(
-              icon: const Icon(Icons.close),
-              onPressed: _cleanSearchText,
+            Expanded(
+              child: TextField(
+                controller: _searchBoxTextController,
+                focusNode: _searchFocusNode,
+                cursorColor: theme.accentColor,
+                keyboardType: TextInputType.text,
+                textInputAction: TextInputAction.go,
+                decoration: InputDecoration(
+                  border: InputBorder.none,
+                  contentPadding: const EdgeInsets.symmetric(horizontal: 15),
+                  hintText: '${s.search}...',
+                ),
+              ),
             ),
-        ],
+            if (widget.showClearButton)
+              IconButton(
+                icon: const Icon(Icons.close),
+                onPressed: _cleanSearchText,
+              ),
+          ],
+        ),
       ),
     );
   }