feat: user screen style

This commit is contained in:
Rongjian Zhang 2019-09-04 22:59:33 +08:00
parent 7f9669eaea
commit a589e518bb
5 changed files with 110 additions and 80 deletions

View File

@ -1,5 +1,7 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:git_touch/models/theme.dart';
import 'package:git_touch/utils/utils.dart';
import 'package:provider/provider.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:launch_review/launch_review.dart';
@ -14,6 +16,11 @@ class SettingsScreen extends StatefulWidget {
}
class _SettingsScreenState extends State<SettingsScreen> {
Widget _buildRightWidget(bool checked) {
if (!checked) return null;
return Icon(Octicons.check, color: CupertinoColors.activeBlue, size: 20);
}
@override
Widget build(BuildContext context) {
var themeProvider = Provider.of<ThemeModel>(context);
@ -26,15 +33,16 @@ class _SettingsScreenState extends State<SettingsScreen> {
TableViewSeperator(),
TableView(headerText: 'ACCOUNTS', items: [
TableViewItem(
text: 'Switch to another account',
text: Text('Switch to another account'),
screenBuilder: (_) => LoginScreen(),
),
]),
TableViewSeperator(),
TableView(headerText: 'THEME', items: [
TableViewItem(
text: 'material',
checked: themeProvider.theme == ThemeMap.material,
text: Text('material'),
rightWidget:
_buildRightWidget(themeProvider.theme == ThemeMap.material),
onTap: () {
if (themeProvider.theme != ThemeMap.material) {
themeProvider.setTheme(ThemeMap.material);
@ -42,8 +50,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
},
),
TableViewItem(
text: 'cupertino',
checked: themeProvider.theme == ThemeMap.cupertino,
text: Text('cupertino'),
rightWidget: _buildRightWidget(
themeProvider.theme == ThemeMap.cupertino),
onTap: () {
if (themeProvider.theme != ThemeMap.cupertino) {
themeProvider.setTheme(ThemeMap.cupertino);
@ -54,7 +63,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
TableViewSeperator(),
TableView(headerText: 'REVIEW', items: [
TableViewItem(
text: 'Review',
text: Text('Review'),
onTap: () {
LaunchReview.launch(
androidAppId: 'io.github.pd4d10.gittouch',
@ -66,14 +75,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
TableViewSeperator(),
TableView(headerText: 'SOURCE CODE', items: [
TableViewItem(
text: 'pd4d10/git-touch',
text: Text('pd4d10/git-touch'),
screenBuilder: (_) => RepoScreen('pd4d10', 'git-touch'),
)
]),
TableViewSeperator(),
TableView(headerText: 'LICENSE', items: [
TableViewItem(
text: 'MIT',
text: Text('MIT'),
onTap: () {
launch(
'https://github.com/pd4d10/git-touch/blob/master/LICENSE');

View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:git_touch/widgets/table_view.dart';
import 'package:primer/primer.dart';
import 'package:url_launcher/url_launcher.dart';
import 'package:share/share.dart';
import 'package:flutter_svg/flutter_svg.dart';
@ -35,10 +37,10 @@ class _UserScreenState extends State<UserScreen> {
name
avatarUrl
bio
websiteUrl
email
company
location
email
websiteUrl
starredRepositories {
totalCount
}
@ -96,54 +98,26 @@ class _UserScreenState extends State<UserScreen> {
);
}
Widget _buildInfo(payload) {
// TODO: redesign the UI to show all information
String email = payload['email'] ?? '';
if (email.isNotEmpty) {
return Link(
material: false,
child: Row(children: <Widget>[
Icon(
Octicons.mail,
color: Colors.black54,
size: 16,
),
Padding(padding: EdgeInsets.only(left: 4)),
Text(email, style: TextStyle(color: Colors.black54, fontSize: 15))
]),
onTap: () {
launch('mailto:' + email);
},
);
}
TableViewItem _buildTableViewItem({
String placeholder,
IconData iconData,
String text,
Function onTap,
}) {
var leftWidget = Icon(iconData, size: 20, color: PrimerColors.blue500);
var usePlaceholder = text == null || text.isEmpty;
var itemText = usePlaceholder
? Text(placeholder,
style: TextStyle(color: PrimerColors.gray300, fontSize: 16))
: Text(text,
style: TextStyle(color: PrimerColors.gray900, fontSize: 16));
String company = payload['company'] ?? '';
if (company.isNotEmpty) {
return Row(children: <Widget>[
Icon(
Octicons.organization,
color: Colors.black54,
size: 16,
),
Padding(padding: EdgeInsets.only(left: 4)),
Text(company, style: TextStyle(color: Colors.black54, fontSize: 16))
]);
}
String location = payload['location'] ?? '';
if (location.isNotEmpty) {
return Row(children: <Widget>[
Icon(
Octicons.location,
color: Colors.black54,
size: 16,
),
Padding(padding: EdgeInsets.only(left: 4)),
Text(location, style: TextStyle(color: Colors.black54, fontSize: 16))
]);
}
return Container();
return TableViewItem(
leftWidget: leftWidget,
text: itemText,
rightWidget: Icon(CupertinoIcons.right_chevron,
size: 18, color: PrimerColors.gray300),
);
}
@override
@ -219,12 +193,24 @@ class _UserScreenState extends State<UserScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(children: <Widget>[
Text(
payload['name'] ?? widget.login,
style: TextStyle(color: PrimerColors.blue500),
),
Text(
'(${widget.login})',
style: TextStyle(color: PrimerColors.gray500),
),
]),
Text(
payload['name'] ?? widget.login,
style: TextStyle(fontSize: 16),
payload['bio'] == null ||
(payload['bio'] as String).isEmpty
? 'No bio'
: payload['bio'],
style: TextStyle(color: PrimerColors.gray500),
),
SizedBox(height: 8),
_buildInfo(payload),
],
),
)
@ -234,8 +220,8 @@ class _UserScreenState extends State<UserScreen> {
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Colors.black12),
top: BorderSide(color: Colors.black12),
bottom: BorderSide(color: PrimerColors.gray100),
top: BorderSide(color: PrimerColors.gray100),
),
),
child: Row(
@ -267,10 +253,38 @@ class _UserScreenState extends State<UserScreen> {
],
),
),
Container(
child: SvgPicture.string(contributions),
padding: EdgeInsets.symmetric(horizontal: 10),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
child: SvgPicture.string(contributions),
padding: EdgeInsets.all(10),
),
),
SizedBox(height: 10, child: Container(color: PrimerColors.gray100)),
TableViewSeperator(),
TableView(items: [
_buildTableViewItem(
iconData: Octicons.organization,
placeholder: 'Company',
text: payload['company']),
_buildTableViewItem(
iconData: Octicons.location,
placeholder: 'Location',
text: payload['location']),
_buildTableViewItem(
iconData: Octicons.mail,
placeholder: 'Email',
text: payload['email'],
onTap: () {
launch('mailto:' + payload['email']);
}),
_buildTableViewItem(
iconData: Octicons.link,
placeholder: 'Website',
text: payload['websiteUrl']),
]),
TableViewSeperator(),
_buildRepos(payload),
],
);

View File

@ -17,7 +17,7 @@ class Avatar extends StatelessWidget {
@override
Widget build(BuildContext context) {
var avatar = ClipRRect(
borderRadius: BorderRadius.circular(size),
borderRadius: BorderRadius.circular(4),
child: FadeInImage.assetNetwork(
placeholder: 'images/octoface.png',
image: url,

View File

@ -1,4 +1,5 @@
import 'package:flutter/cupertino.dart';
import 'package:primer/primer.dart';
import 'link.dart';
class EntryItem extends StatelessWidget {
@ -17,8 +18,10 @@ class EntryItem extends StatelessWidget {
padding: EdgeInsets.symmetric(vertical: 12),
child: Column(
children: <Widget>[
Text(count.toString(), style: TextStyle(fontSize: 20)),
Text(text, style: TextStyle(fontSize: 12))
Text(count.toString(),
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
Text(text,
style: TextStyle(fontSize: 12, color: PrimerColors.gray600))
],
),
),

View File

@ -15,14 +15,16 @@ class TableViewSeperator extends StatelessWidget {
}
class TableViewItem {
final String text;
final bool checked;
final Widget text;
final Widget leftWidget;
final Widget rightWidget;
final void Function() onTap;
final WidgetBuilder screenBuilder;
TableViewItem({
this.text,
this.checked = false,
this.leftWidget,
this.rightWidget,
this.onTap,
this.screenBuilder,
});
@ -75,19 +77,21 @@ class TableView extends StatelessWidget {
child: Container(
height: 44,
child: Row(children: [
...(item.leftWidget == null
? []
: [
SizedBox(width: 12),
item.leftWidget,
]),
SizedBox(width: 12),
Expanded(
child: Text(
item.text,
style: TextStyle(fontSize: 18),
child: DefaultTextStyle(
child: item.text,
style:
TextStyle(fontSize: 18, color: PrimerColors.gray900),
),
),
...(item.checked
? [
Icon(Icons.check,
color: CupertinoColors.activeBlue, size: 20)
]
: []),
...(item.rightWidget == null ? [] : [item.rightWidget]),
SizedBox(width: 12),
]),
),