[simple_browser] NavigationBar focused state color

Change-Id: Ice5ae5e8a0e9288c985d1d8f24a00d43f669ff80
diff --git a/bin/simple_browser/lib/src/widgets/navigation_bar.dart b/bin/simple_browser/lib/src/widgets/navigation_bar.dart
index 27b7733..5f10548 100644
--- a/bin/simple_browser/lib/src/widgets/navigation_bar.dart
+++ b/bin/simple_browser/lib/src/widgets/navigation_bar.dart
@@ -8,6 +8,12 @@
 import '../blocs/browser_bloc.dart';
 import '../models/browse_action.dart';
 
+const _kBackgroundColor = Colors.black;
+const _kBackgroundFocusedColor = Color(0xFFFF8BCB);
+
+const _kTextColor = Colors.white;
+const _kTextFocusedColor = Colors.black;
+
 class NavigationBar extends StatefulWidget {
   final BrowserBloc bloc;
 
@@ -18,11 +24,13 @@
 }
 
 class _NavigationBarState extends State<NavigationBar> {
+  FocusNode _focusNode;
   TextEditingController _controller;
   StreamSubscription _urlListener;
 
   @override
   void initState() {
+    _focusNode = FocusNode();
     _controller = TextEditingController();
     _urlListener = widget.bloc.url.listen((url) {
       _controller.text = url;
@@ -32,6 +40,7 @@
 
   @override
   void dispose() {
+    _focusNode.dispose();
     _controller.dispose();
     _urlListener.cancel();
     super.dispose();
@@ -39,55 +48,87 @@
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-        padding: EdgeInsets.all(8.0),
-        child: Row(
-          children: [
-            Padding(
-              padding: EdgeInsets.only(right: 8.0),
-              child: StreamBuilder<bool>(
-                stream: widget.bloc.backState,
-                initialData: false,
-                builder: (context, snapshot) => RaisedButton(
-                      padding: EdgeInsets.all(4),
-                      child: Text('BCK'),
-                      color: Colors.grey[350],
-                      disabledColor: Colors.grey[700],
-                      onPressed: snapshot.data
-                          ? () => widget.bloc.request.add(GoBackAction())
-                          : null,
-                    ),
+    return AnimatedBuilder(
+      animation: _focusNode,
+      builder: (_, child) {
+        final focused = _focusNode.hasFocus;
+        final textColor = focused ? _kTextFocusedColor : _kTextColor;
+        final bgColor = focused ? _kBackgroundFocusedColor : _kBackgroundColor;
+        return AnimatedTheme(
+          duration: Duration(milliseconds: 100),
+          data: ThemeData(
+            canvasColor: bgColor,
+            inputDecorationTheme: InputDecorationTheme(
+              hintStyle: TextStyle(
+                color: textColor,
               ),
             ),
-            Padding(
-              padding: EdgeInsets.only(right: 8.0),
-              child: StreamBuilder<bool>(
-                stream: widget.bloc.forwardState,
-                initialData: false,
-                builder: (context, snapshot) => RaisedButton(
-                      padding: EdgeInsets.all(4),
-                      child: Text('FWD'),
-                      color: Colors.grey[350],
-                      disabledColor: Colors.grey[700],
-                      onPressed: snapshot.data
-                          ? () => widget.bloc.request.add(GoForwardAction())
-                          : null,
-                    ),
+            textTheme: TextTheme(
+              subhead: TextStyle(
+                color: textColor,
               ),
             ),
-            _buildNavigationField(),
-          ],
-        ));
+          ),
+          child: child,
+        );
+      },
+      child: Material(
+        child: Padding(
+          padding: EdgeInsets.all(8.0),
+          child: _buildWidgets(),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildWidgets() {
+    return Row(
+      children: [
+        Padding(
+          padding: EdgeInsets.only(right: 8.0),
+          child: StreamBuilder<bool>(
+            stream: widget.bloc.backState,
+            initialData: false,
+            builder: (context, snapshot) => RaisedButton(
+                  padding: EdgeInsets.all(4),
+                  child: Text('BCK'),
+                  color: Colors.grey[350],
+                  disabledColor: Colors.grey[700],
+                  onPressed: snapshot.data
+                      ? () => widget.bloc.request.add(GoBackAction())
+                      : null,
+                ),
+          ),
+        ),
+        Padding(
+          padding: EdgeInsets.only(right: 8.0),
+          child: StreamBuilder<bool>(
+            stream: widget.bloc.forwardState,
+            initialData: false,
+            builder: (context, snapshot) => RaisedButton(
+                  padding: EdgeInsets.all(4),
+                  child: Text('FWD'),
+                  color: Colors.grey[350],
+                  disabledColor: Colors.grey[700],
+                  onPressed: snapshot.data
+                      ? () => widget.bloc.request.add(GoForwardAction())
+                      : null,
+                ),
+          ),
+        ),
+        _buildNavigationField(),
+      ],
+    );
   }
 
   Widget _buildNavigationField() {
     return Expanded(
       child: TextField(
+        focusNode: _focusNode,
         controller: _controller,
         decoration: InputDecoration(
-          filled: true,
           border: InputBorder.none,
-          fillColor: Colors.white,
+          filled: false,
           hintText: 'Enter an address...',
         ),
         onSubmitted: (value) =>