Update search bar design and integrate state controllers

patelneel55 · Jan 13, 2021 · cbd9f53 · cbd9f53
1 parent 51250f7
commit cbd9f53
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/frontend/memoree_client/lib/app/models/themes.dart b/frontend/memoree_client/lib/app/models/themes.dart
@@ -7,7 +7,7 @@ class AppTheme {
 
   static const Color _lightPrimaryColor = Colors.white;
   static const Color _lightPrimaryVariantColor = Colors.white;
-  static const Color _lightSecondaryColor = Colors.green;
+  static const Color _lightSecondaryColor = Colors.lightBlue;
   static const Color _lightOnPrimaryColor = Color(0xff3c4043);
   static const String _fontFamily = "Montserrat";
 
@@ -30,6 +30,10 @@ class AppTheme {
     ),
     textTheme: _lightTextTheme,
     canvasColor: _lightPrimaryColor,
+    textSelectionTheme: TextSelectionThemeData(
+      cursorColor: _lightOnPrimaryColor,
+      selectionColor: _lightSecondaryColor.withOpacity(0.5),
+    ),
   );
 
   static final TextTheme _lightTextTheme = TextTheme(

diff --git a/frontend/memoree_client/lib/app/widgets/app_bar.dart b/frontend/memoree_client/lib/app/widgets/app_bar.dart
@@ -15,7 +15,7 @@ class CustomAppBar extends StatefulWidget with PreferredSizeWidget {
   _CustomAppBarState createState() => _CustomAppBarState();
 
   @override
-  Size get preferredSize => Size.fromHeight(kToolbarHeight);
+  Size get preferredSize => Size.fromHeight(65);
 }
 
 class _CustomAppBarState extends State<CustomAppBar> {
@@ -29,7 +29,7 @@ class _CustomAppBarState extends State<CustomAppBar> {
         centerTitle: true,
         title: Row(
           children: <Widget>[
-            Text(PageTitles.appName, style: TextStyle(fontWeight: FontWeight.w400, fontFamily: "ProductSans")),
+            Text(PageTitles.appName, style: TextStyle(fontWeight: FontWeight.w500)),
             SizedBox(width: 8,),
             if (!widget.isTablet)
               Flexible(

diff --git a/frontend/memoree_client/lib/search.dart b/frontend/memoree_client/lib/search.dart
@@ -1,24 +1,58 @@
 import 'package:flutter/material.dart';
+import 'package:memoree_client/app/models/drawer_state.dart';
+import 'package:memoree_client/app/models/search_state.dart';
+import 'package:provider/provider.dart';
 
 class SearchWidget extends StatefulWidget {
   @override
   _SearchWidgetState createState() => _SearchWidgetState();
 }
 
 class _SearchWidgetState extends State<SearchWidget> {
+  TextEditingController _textController;
+
   @override
-  Widget build(BuildContext context) {
+  void initState() {
+    super.initState();
+    _textController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    _textController.dispose();
+    super.dispose();
+  }
 
+  void _updateSearchQuery(input) {
+    setState(() {
+      Provider.of<SearchModel>(context, listen: false).updateQuery(input);
+      Provider.of<DrawerModel>(context, listen: false).home();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
     return TextFormField(
       decoration: InputDecoration(
         labelText: "Search",
+        filled: true,
         contentPadding: EdgeInsets.all(10.0),
         prefixIcon: Icon(Icons.search),
         border: OutlineInputBorder(
           borderRadius: BorderRadius.circular(7.0),
-          borderSide: new BorderSide()
-        )
+          borderSide: BorderSide.none,
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(7.0),
+          borderSide: BorderSide(),
+        ),
       ),
+      controller: _textController,
+      onFieldSubmitted: (input) {
+        _textController.clear();
+        if(input != "")
+          _updateSearchQuery(input);
+      },
     );
   }
-}
+}