[Presentation] Make the search_box.dart take 70% of the device width …

…on mobile landscape and larger devices
Wolfteam · Jul 19, 2021 · 98821c3 · 98821c3
1 parent fbba6e3
commit 98821c3
Showing 1 changed file with 38 additions and 28 deletions.
diff --git 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,
+              ),
+          ],
+        ),
       ),
     );
   }