jmug/do_more
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Extracted search box to its own separate widget, finidhes the new item dialog UI

Browse source
This commit is contained in:
Mariano Uvalle 2019-03-30 23:52:01 -06:00
parent 59ae4f6fb0
commit 4a6bd017ac
4 changed files with 141 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

72
lib/src/screens/home_screen.dart
View file

@ -9,7 +9,7 @@ import '../widgets/home_app_bar.dart';
import '../widgets/new-item-dialog-route.dart';
import '../widgets/task_list_tile.dart';
import '../widgets/loading_indicator.dart';
import '../widgets/gradient_touchable_container.dart';
import '../widgets/search-box.dart';
class HomeScreen extends StatefulWidget {
createState() => _HomeScreenState();
@ -69,7 +69,9 @@ class _HomeScreenState extends State<HomeScreen> {
width: double.infinity,
color: Theme.of(context).cardColor,
),
_buildSearchBox(),
SearchBox(
height: 50.0,
),
],
);
},
@ -78,17 +80,7 @@ class _HomeScreenState extends State<HomeScreen> {
}
void _showDialog(BuildContext context) {
Navigator.of(context).push(NewItemDialogRoute(
builder: (BuildContext context) {
return Center(
child: Container(
width: 100,
height: 100,
color: Colors.white,
),
);
},
));
Navigator.of(context).push(NewItemDialogRoute());
}
Widget _buildTasksList(List<TaskModel> tasks) {
@ -107,60 +99,6 @@ class _HomeScreenState extends State<HomeScreen> {
);
}
Widget _buildSearchBox() {
return Row(
children: <Widget>[
Spacer(flex: 1),
Expanded(
flex: 8,
child: GradientTouchableContainer(
radius: _searchBoxHeight / 2,
height: _searchBoxHeight,
shadow: BoxShadow(
color: Color(0x20FFFFFF),
offset: Offset(0, 3),
blurRadius: 6,
spreadRadius: 1,
),
child: Row(
children: <Widget>[
SizedBox(
width: 10,
),
Icon(
FontAwesomeIcons.sistrix,
color: Colors.white,
),
SizedBox(
width: 8,
),
Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Search...',
hintStyle: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
cursorColor: Colors.white,
scrollPadding: EdgeInsets.zero,
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
),
],
),
),
),
Spacer(flex: 1),
],
);
}
@override
void dispose() {
bloc.dispose();

45
lib/src/widgets/new-item-dialog-button.dart Normal file
View file

@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class NewItemDialogButton extends StatelessWidget {
final VoidCallback onTap;
final String label;
NewItemDialogButton({
this.onTap,
this.label = '',
});
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.only(
top: 30,
bottom: 30,
),
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
borderRadius: BorderRadius.circular(8),
),
height: 170,
width: 120,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
label,
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w600,
),
),
FloatingActionButton(
child: Icon(FontAwesomeIcons.plus),
backgroundColor: Color(0xFF707070),
onPressed: () {},
),
],
),
);
}
}

31
lib/src/widgets/new-item-dialog-route.dart
View file

@ -1,10 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class NewItemDialogRoute extends PopupRoute {
final WidgetBuilder builder;
import './new-item-dialog-button.dart';
NewItemDialogRoute({@required this.builder});
class NewItemDialogRoute extends PopupRoute {
@override
// TODO: implement barrierColor
Color get barrierColor => Color.fromRGBO(255, 255, 255, 0.5);
@ -20,10 +19,34 @@ class NewItemDialogRoute extends PopupRoute {
@override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
final result = builder(context);
final result = _builder(context);
return result;
}
Widget _builder(BuildContext context) {
// Needs to be wrapped in a material widget so all the widgets have a
// [Theme] widget as a parent.
return Center(
child: Material(
type: MaterialType.transparency,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
NewItemDialogButton(
label: 'Task',
),
SizedBox(
width: 20,
),
NewItemDialogButton(
label: 'Media',
),
],
),
),
);
}
@override
// TODO: implement transitionDuration
Duration get transitionDuration => Duration(milliseconds: 300);

64
lib/src/widgets/search-box.dart Normal file
View file

@ -0,0 +1,64 @@
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import './gradient_touchable_container.dart';
class SearchBox extends StatelessWidget {
final double height;
SearchBox({@required this.height}) : assert(height >= 50);
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Spacer(flex: 1),
Expanded(
flex: 8,
child: GradientTouchableContainer(
radius: height / 2,
height: height,
shadow: BoxShadow(
color: Color(0x20FFFFFF),
offset: Offset(0, 3),
blurRadius: 6,
spreadRadius: 1,
),
child: Row(
children: <Widget>[
SizedBox(
width: 10,
),
Icon(
FontAwesomeIcons.sistrix,
color: Colors.white,
),
SizedBox(
width: 8,
),
Expanded(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Search...',
hintStyle: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
cursorColor: Colors.white,
scrollPadding: EdgeInsets.zero,
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
),
],
),
),
),
Spacer(flex: 1),
],
);
}
}