feat: user screen style tweaks

This commit is contained in:
Rongjian Zhang 2019-09-05 17:58:14 +08:00
parent a589e518bb
commit c78c010fab
4 changed files with 123 additions and 112 deletions

View File

@ -139,11 +139,7 @@ class _HomeState extends State<Home> {
return CupertinoApp( return CupertinoApp(
home: CupertinoTheme( home: CupertinoTheme(
data: CupertinoThemeData( data: CupertinoThemeData(
textTheme: CupertinoTextThemeData( primaryColor: PrimerColors.blue500,
// primaryColor: Palette.primary,
textStyle: TextStyle(color: PrimerColors.gray900),
),
primaryColor: PrimerColors.gray900,
), ),
child: CupertinoTabScaffold( child: CupertinoTabScaffold(
tabBar: CupertinoTabBar(items: _buildNavigationItems()), tabBar: CupertinoTabBar(items: _buildNavigationItems()),

View File

@ -117,6 +117,7 @@ class _UserScreenState extends State<UserScreen> {
text: itemText, text: itemText,
rightWidget: Icon(CupertinoIcons.right_chevron, rightWidget: Icon(CupertinoIcons.right_chevron,
size: 18, color: PrimerColors.gray300), size: 18, color: PrimerColors.gray300),
onTap: onTap,
); );
} }
@ -181,13 +182,14 @@ class _UserScreenState extends State<UserScreen> {
var contributions = data[1]; var contributions = data[1];
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[ children: <Widget>[
Container( Container(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(12),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Avatar(url: payload['avatarUrl'], size: 24), Avatar(url: payload['avatarUrl'], size: 30),
SizedBox(width: 10), SizedBox(width: 10),
Expanded( Expanded(
child: Column( child: Column(
@ -196,96 +198,101 @@ class _UserScreenState extends State<UserScreen> {
Row(children: <Widget>[ Row(children: <Widget>[
Text( Text(
payload['name'] ?? widget.login, payload['name'] ?? widget.login,
style: TextStyle(color: PrimerColors.blue500), style: TextStyle(
color: PrimerColors.blue500, fontSize: 16),
), ),
Text( Text(
'(${widget.login})', '(${widget.login})',
style: TextStyle(color: PrimerColors.gray500), style: TextStyle(
color: PrimerColors.gray500, fontSize: 16),
), ),
]), ]),
SizedBox(height: 4),
Text( Text(
payload['bio'] == null || payload['bio'] == null ||
(payload['bio'] as String).isEmpty (payload['bio'] as String).isEmpty
? 'No bio' ? 'No bio'
: payload['bio'], : payload['bio'],
style: TextStyle(color: PrimerColors.gray500), style: TextStyle(
color: PrimerColors.gray500, fontSize: 15),
), ),
SizedBox(height: 8),
], ],
), ),
) )
], ],
), ),
), ),
BorderView(),
Row(children: <Widget>[
EntryItem(
count: payload['repositories']['totalCount'],
text: 'Repositories',
screenBuilder: (context) => ReposScreen(login: widget.login),
),
EntryItem(
count: payload['starredRepositories']['totalCount'],
text: 'Stars',
screenBuilder: (context) =>
ReposScreen(login: widget.login, star: true),
),
EntryItem(
count: payload['followers']['totalCount'],
text: 'Followers',
screenBuilder: (context) => UsersScreen(login: widget.login),
),
EntryItem(
count: payload['following']['totalCount'],
text: 'Following',
screenBuilder: (context) =>
UsersScreen(login: widget.login, following: true),
),
]),
BorderView(height: 10),
Container( Container(
decoration: BoxDecoration( padding: EdgeInsets.all(10),
border: Border( child: SingleChildScrollView(
bottom: BorderSide(color: PrimerColors.gray100), scrollDirection: Axis.horizontal,
top: BorderSide(color: PrimerColors.gray100),
),
),
child: Row(
children: <Widget>[
EntryItem(
count: payload['repositories']['totalCount'],
text: 'Repositories',
screenBuilder: (context) =>
ReposScreen(login: widget.login),
),
EntryItem(
count: payload['starredRepositories']['totalCount'],
text: 'Stars',
screenBuilder: (context) =>
ReposScreen(login: widget.login, star: true),
),
EntryItem(
count: payload['followers']['totalCount'],
text: 'Followers',
screenBuilder: (context) =>
UsersScreen(login: widget.login),
),
EntryItem(
count: payload['following']['totalCount'],
text: 'Following',
screenBuilder: (context) =>
UsersScreen(login: widget.login, following: true),
),
],
),
),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
child: SvgPicture.string(contributions), child: SvgPicture.string(contributions),
padding: EdgeInsets.all(10),
), ),
), ),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)), BorderView(height: 10),
TableViewSeperator(),
TableView(items: [ TableView(items: [
_buildTableViewItem( _buildTableViewItem(
iconData: Octicons.organization, iconData: Octicons.organization,
placeholder: 'Company', placeholder: 'Company',
text: payload['company']), text: payload['company'],
),
_buildTableViewItem( _buildTableViewItem(
iconData: Octicons.location, iconData: Octicons.location,
placeholder: 'Location', placeholder: 'Location',
text: payload['location']), text: payload['location'],
),
_buildTableViewItem( _buildTableViewItem(
iconData: Octicons.mail, iconData: Octicons.mail,
placeholder: 'Email', placeholder: 'Email',
text: payload['email'], text: payload['email'],
onTap: () { onTap: (payload['email'] as String).isEmpty
launch('mailto:' + payload['email']); ? null
}), : () {
launch('mailto:' + payload['email']);
},
),
_buildTableViewItem( _buildTableViewItem(
iconData: Octicons.link, iconData: Octicons.link,
placeholder: 'Website', placeholder: 'Website',
text: payload['websiteUrl']), text: payload['websiteUrl'],
onTap: payload['websiteUrl'] == null
? null
: () {
var url = payload['websiteUrl'] as String;
if (!url.startsWith('http')) {
url = 'http://$url';
}
launch(url);
},
),
]), ]),
TableViewSeperator(), // _buildRepos(payload),
_buildRepos(payload),
], ],
); );
}, },

View File

@ -118,3 +118,19 @@ List<T> joinAll<T>(T seperator, List<List<T>> xss) {
K ifNotNull<T, K>(T value, K Function(T v) builder) { K ifNotNull<T, K>(T value, K Function(T v) builder) {
return value == null ? null : builder(value); return value == null ? null : builder(value);
} }
class BorderView extends StatelessWidget {
final double height;
BorderView({this.height = 1});
@override
Widget build(BuildContext context) {
return SizedBox(
height: height,
child: const DecoratedBox(
decoration: const BoxDecoration(color: PrimerColors.gray100),
),
);
}
}

View File

@ -36,19 +36,40 @@ class TableView extends StatelessWidget {
TableView({this.headerText, @required this.items}); TableView({this.headerText, @required this.items});
static const _border = SizedBox( static final _border = BorderView();
height: 1, static final _seperator = BorderView();
child: const DecoratedBox(
decoration: const BoxDecoration(color: PrimerColors.gray200),
),
);
static const _seperator = SizedBox( Widget _buildItem(TableViewItem item) {
height: 1, var widget = Container(
child: const DecoratedBox( height: 44,
decoration: const BoxDecoration(color: PrimerColors.gray200), child: Row(children: [
), ...(item.leftWidget == null
); ? []
: [
SizedBox(width: 12),
item.leftWidget,
]),
SizedBox(width: 12),
Expanded(
child: DefaultTextStyle(
child: item.text,
style: TextStyle(fontSize: 18, color: PrimerColors.gray900),
),
),
...(item.rightWidget == null ? [] : [item.rightWidget]),
SizedBox(width: 12),
]),
);
if (item.onTap == null && item.screenBuilder == null) {
return widget;
}
return Link(
onTap: item.onTap,
screenBuilder: item.screenBuilder,
child: widget,
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -68,36 +89,7 @@ class TableView extends StatelessWidget {
) )
]), ]),
_border, _border,
...join( ...join(_seperator, items.map(_buildItem).toList()),
_seperator,
items.map((item) {
return Link(
onTap: item.onTap,
screenBuilder: item.screenBuilder,
child: Container(
height: 44,
child: Row(children: [
...(item.leftWidget == null
? []
: [
SizedBox(width: 12),
item.leftWidget,
]),
SizedBox(width: 12),
Expanded(
child: DefaultTextStyle(
child: item.text,
style:
TextStyle(fontSize: 18, color: PrimerColors.gray900),
),
),
...(item.rightWidget == null ? [] : [item.rightWidget]),
SizedBox(width: 12),
]),
),
);
}).toList(),
),
_border, _border,
], ],
); );