[simple_browser] navigation bar visual update
Change-Id: I57121aaed665a7261630af0c9f6566090008f672
diff --git a/bin/simple_browser/lib/app.dart b/bin/simple_browser/lib/app.dart
index a175004..249d09f 100644
--- a/bin/simple_browser/lib/app.dart
+++ b/bin/simple_browser/lib/app.dart
@@ -10,7 +10,7 @@
class App extends StatefulWidget {
@override
- State<App> createState() => AppState();
+ AppState createState() => AppState();
}
class AppState extends State<App> {
@@ -34,7 +34,7 @@
return MaterialApp(
title: 'Browser',
home: Scaffold(
- backgroundColor: Colors.grey,
+ backgroundColor: Colors.white,
body: Container(
child: Column(
children: <Widget>[
diff --git a/bin/simple_browser/lib/src/widgets/navigation_bar.dart b/bin/simple_browser/lib/src/widgets/navigation_bar.dart
index 5f10548..7869dd6 100644
--- a/bin/simple_browser/lib/src/widgets/navigation_bar.dart
+++ b/bin/simple_browser/lib/src/widgets/navigation_bar.dart
@@ -14,6 +14,8 @@
const _kTextColor = Colors.white;
const _kTextFocusedColor = Colors.black;
+enum _LayoutId { historyButtons, url }
+
class NavigationBar extends StatefulWidget {
final BrowserBloc bloc;
@@ -57,24 +59,23 @@
return AnimatedTheme(
duration: Duration(milliseconds: 100),
data: ThemeData(
+ fontFamily: 'RobotoMono',
+ textSelectionColor: textColor.withOpacity(0.38),
+ textSelectionHandleColor: textColor,
+ hintColor: textColor,
+ cursorColor: textColor,
canvasColor: bgColor,
- inputDecorationTheme: InputDecorationTheme(
- hintStyle: TextStyle(
- color: textColor,
- ),
- ),
textTheme: TextTheme(
- subhead: TextStyle(
- color: textColor,
- ),
+ body1: TextStyle(color: textColor),
+ subhead: TextStyle(color: textColor),
),
),
child: child,
);
},
child: Material(
- child: Padding(
- padding: EdgeInsets.all(8.0),
+ child: SizedBox(
+ height: 26.0,
child: _buildWidgets(),
),
),
@@ -82,59 +83,110 @@
}
Widget _buildWidgets() {
- return Row(
+ return CustomMultiChildLayout(
+ delegate: _LayoutDelegate(),
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,
- ),
+ LayoutId(
+ id: _LayoutId.historyButtons,
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.stretch,
+ children: <Widget>[
+ _buildHistoryButton(
+ title: 'BCK',
+ onTap: () => widget.bloc.request.add(GoBackAction()),
+ enabledStateStream: widget.bloc.backState,
+ ),
+ SizedBox(width: 8.0),
+ _buildHistoryButton(
+ title: 'FWD',
+ onTap: () => widget.bloc.request.add(GoForwardAction()),
+ enabledStateStream: widget.bloc.forwardState,
+ ),
+ ],
),
),
- 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(),
+ LayoutId(id: _LayoutId.url, child: _buildNavigationField()),
],
);
}
+ Widget _buildHistoryButton({
+ @required String title,
+ @required VoidCallback onTap,
+ @required Stream<bool> enabledStateStream,
+ }) {
+ return StreamBuilder<bool>(
+ stream: enabledStateStream,
+ initialData: false,
+ builder: (context, snapshot) {
+ final isEnabled = snapshot.data;
+ return GestureDetector(
+ onTap: isEnabled ? onTap : null,
+ child: Padding(
+ padding: const EdgeInsets.symmetric(horizontal: 8.0),
+ child: Center(
+ child: Opacity(
+ opacity: isEnabled ? 1.0 : 0.54,
+ child: Text(
+ title,
+ style: TextStyle(
+ fontSize: 14,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ },
+ );
+ }
+
Widget _buildNavigationField() {
- return Expanded(
- child: TextField(
- focusNode: _focusNode,
- controller: _controller,
- decoration: InputDecoration(
- border: InputBorder.none,
- filled: false,
- hintText: 'Enter an address...',
- ),
- onSubmitted: (value) =>
- widget.bloc.request.add(NavigateToAction(url: value)),
- textInputAction: TextInputAction.go,
+ return TextField(
+ focusNode: _focusNode,
+ controller: _controller,
+ cursorWidth: 7,
+ cursorRadius: Radius.zero,
+ cursorColor: Colors.black,
+ textAlign: TextAlign.center,
+ keyboardType: TextInputType.url,
+ style: TextStyle(fontSize: 14.0),
+ decoration: InputDecoration(
+ contentPadding: EdgeInsets.zero,
+ hintText: '<search>',
+ border: InputBorder.none,
+ isDense: true,
+ ),
+ onSubmitted: (value) =>
+ widget.bloc.request.add(NavigateToAction(url: value)),
+ textInputAction: TextInputAction.go,
+ );
+ }
+}
+
+class _LayoutDelegate extends MultiChildLayoutDelegate {
+ @override
+ void performLayout(Size size) {
+ final buttonsSize = layoutChild(
+ _LayoutId.historyButtons,
+ BoxConstraints.tightFor(height: size.height),
+ );
+ positionChild(_LayoutId.historyButtons, Offset.zero);
+
+ final urlSize = layoutChild(
+ _LayoutId.url,
+ BoxConstraints.tightFor(width: size.width - buttonsSize.width * 2),
+ );
+ positionChild(
+ _LayoutId.url,
+ Offset(
+ (size.width - urlSize.width) * 0.5,
+ (size.height - urlSize.height) * 0.5,
),
);
}
+
+ @override
+ bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => false;
}
