CWA-198 | changed background color of dashboard page; added color of bounds and shadows to wallet card; changed color of buttons in the button_header

This commit is contained in:
Oleksandr Sobol 2020-04-30 20:35:06 +03:00
parent 52d5dedaf8
commit 3cd8af4228
9 changed files with 75 additions and 58 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 231 B

BIN
assets/images/header.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 B

View file

@ -74,6 +74,8 @@ class PaletteDark {
static const Color backgroundStart = Color.fromRGBO(231, 240, 253, 1.0);
static const Color backgroundEnd = Color.fromRGBO(172, 203, 238, 1.0);
static const Color mainBackgroundColor = Color.fromRGBO(70, 85, 133, 1.0);
static const Color borderCardColor = Color.fromRGBO(81, 96, 147, 1.0);
static const Color walletCardTopStartSync = Color.fromRGBO(89, 104, 152, 1.0);
static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);

View file

@ -81,9 +81,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
case AppBarStyle.withShadow:
return NavBar.withShadow(
@ -91,9 +92,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
default:
return NavBar(
@ -101,9 +103,10 @@ abstract class BasePage extends StatelessWidget {
leading: leading(context),
middle: middle(context),
trailing: trailing(context),
backgroundColor: _isDarkTheme
backgroundColor: backgroundColor);
/*backgroundColor: _isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor);
: backgroundColor);*/
}
}

View file

@ -9,7 +9,26 @@ class DashboardPage extends BasePage {
final _bodyKey = GlobalKey();
@override
ObstructingPreferredSizeWidget appBar(BuildContext context) => null;
Color get backgroundColor => PaletteDark.mainBackgroundColor;
@override
Widget trailing(BuildContext context) {
final menuButton = Image.asset('assets/images/header.png');
return SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () {},
child: menuButton),
),
);
}
@override
Widget body(BuildContext context) => DashboardPageBody(key: _bodyKey);
@ -23,43 +42,17 @@ class DashboardPageBody extends StatefulWidget {
}
class DashboardPageBodyState extends State<DashboardPageBody> {
final menuButton = Image.asset('assets/images/menu_button.png');
@override
Widget build(BuildContext context) {
final List<Color> colors = [PaletteDark.backgroundStart, PaletteDark.backgroundEnd];
return SafeArea(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: colors
)
),
color: PaletteDark.mainBackgroundColor,
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 14),
child: Container(
width: double.infinity,
alignment: Alignment.centerRight,
child: SizedBox(
height: 37,
width: 37,
child: ButtonTheme(
minWidth: double.minPositive,
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
padding: EdgeInsets.all(0),
onPressed: () {},
child: menuButton),
),
),
)
),
Padding(
padding: EdgeInsets.only(left: 20, top: 23),
padding: EdgeInsets.only(left: 20, top: 10),
child: WalletCard(),
),
SizedBox(

View file

@ -274,7 +274,7 @@ class ButtonHeader extends SliverPersistentHeaderDelegate {
width: 48,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white,
color: PaletteDark.borderCardColor,
shape: BoxShape.circle
),
child: image,

View file

@ -24,7 +24,7 @@ class WalletCardState extends State<WalletCard> {
final _balanceObserverKey = GlobalKey();
final _addressObserverKey = GlobalKey();
final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
final List<Color> colorsSync = [PaletteDark.walletCardSubAddressField, PaletteDark.walletCardBottomEndSync];
double cardWidth;
double cardHeight;
double screenWidth;
@ -67,14 +67,27 @@ class WalletCardState extends State<WalletCard> {
height: cardHeight,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
padding: EdgeInsets.only(
top: 1,
left: 1,
bottom: 1
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: [PaletteDark.walletCardTopStartSync.withOpacity(opacity),
PaletteDark.walletCardBottomStartSync.withOpacity(opacity)],
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
color: PaletteDark.borderCardColor,
boxShadow: [
BoxShadow(
color: PaletteDark.historyPanel.withOpacity(0.5),
blurRadius: 8,
offset: Offset(5, 5))
]
),
child: Container(
width: cardWidth,
height: cardHeight,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
color: PaletteDark.historyPanel
),
child: InkWell(
onTap: () => setState(() => isFrontSide = !isFrontSide),
@ -83,6 +96,7 @@ class WalletCardState extends State<WalletCard> {
: backSide()
),
),
),
);
}
@ -99,6 +113,7 @@ class WalletCardState extends State<WalletCard> {
final status = syncStore.status;
final statusText = status.title();
final progress = syncStore.status.progress();
final indicatorWidth = progress * cardWidth;
String shortAddress = walletStore.subaddress.address;
shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
@ -123,9 +138,10 @@ class WalletCardState extends State<WalletCard> {
height: cardHeight,
child: Stack(
children: <Widget>[
Container(
AnimatedContainer(
duration: Duration(milliseconds: 0),
height: cardHeight,
width: progress * cardWidth,
width: indicatorWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(

View file

@ -19,8 +19,9 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle,
trailing: trailing,
height: _height,
backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);
backgroundColor: backgroundColor);
/*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor);*/
}
factory NavBar.withShadow(
@ -37,12 +38,14 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget {
middle: middle,
trailing: trailing,
height: 80,
backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,
backgroundColor: backgroundColor,
/*backgroundColor:
_isDarkTheme ? Theme.of(context).backgroundColor : backgroundColor,*/
decoration: BoxDecoration(
color: _isDarkTheme
color: backgroundColor,
/*_isDarkTheme
? Theme.of(context).backgroundColor
: backgroundColor,
: backgroundColor,*/
boxShadow: [
BoxShadow(
color: Color.fromRGBO(132, 141, 198, 0.11),