mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2024-11-16 17:27:37 +00:00
CWA-200 | calculated list tile heights for large screens
This commit is contained in:
parent
fa696c2a60
commit
f5e1635380
1 changed files with 194 additions and 135 deletions
|
@ -13,27 +13,53 @@ class MenuWidget extends StatefulWidget {
|
|||
|
||||
class MenuWidgetState extends State<MenuWidget> {
|
||||
final moneroIcon = Image.asset('assets/images/monero.png');
|
||||
final largeScreen = 731;
|
||||
|
||||
double menuWidth;
|
||||
double screenWidth;
|
||||
double screenHeight;
|
||||
double opacity;
|
||||
bool isDraw;
|
||||
|
||||
double headerHeight;
|
||||
double tileHeight;
|
||||
double fromTopEdge;
|
||||
double fromBottomEdge;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
menuWidth = 0;
|
||||
screenWidth = 0;
|
||||
screenHeight = 0;
|
||||
opacity = 0;
|
||||
isDraw = false;
|
||||
|
||||
headerHeight = 120;
|
||||
tileHeight = 75;
|
||||
fromTopEdge = 50;
|
||||
fromBottomEdge = 30;
|
||||
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback(afterLayout);
|
||||
}
|
||||
|
||||
void afterLayout(dynamic _) {
|
||||
screenWidth = MediaQuery.of(context).size.width;
|
||||
screenHeight = MediaQuery.of(context).size.height;
|
||||
|
||||
setState(() {
|
||||
menuWidth = screenWidth;
|
||||
opacity = 1;
|
||||
|
||||
if (screenHeight > largeScreen) {
|
||||
final scale = screenHeight / largeScreen;
|
||||
tileHeight *= scale;
|
||||
headerHeight *= scale;
|
||||
fromTopEdge *= scale;
|
||||
fromBottomEdge *= scale;
|
||||
}
|
||||
});
|
||||
|
||||
Timer(Duration(milliseconds: 350), () =>
|
||||
setState(() => isDraw = true)
|
||||
);
|
||||
|
@ -53,8 +79,28 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(left: 40),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.max,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: EdgeInsets.only(left: 24),
|
||||
child: isDraw
|
||||
? Container(
|
||||
height: 60,
|
||||
width: 4,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.all(Radius.circular(2)),
|
||||
color: PaletteDark.walletCardText
|
||||
),
|
||||
)
|
||||
: Container(
|
||||
height: 60,
|
||||
width: 4,
|
||||
)
|
||||
),
|
||||
SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () => null,
|
||||
child: Container(
|
||||
|
@ -77,8 +123,12 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
|
||||
if (index == 0) {
|
||||
return Container(
|
||||
height: 144,
|
||||
padding: EdgeInsets.only(left: 24, top: 69, right: 24, bottom: 35),
|
||||
height: headerHeight,
|
||||
padding: EdgeInsets.only(
|
||||
left: 24,
|
||||
top: fromTopEdge,
|
||||
right: 24,
|
||||
bottom: fromBottomEdge),
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),
|
||||
color: PaletteDark.menuHeader
|
||||
|
@ -89,6 +139,8 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
moneroIcon,
|
||||
SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Container(
|
||||
height: 40,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
|
@ -113,6 +165,7 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
)
|
||||
)
|
||||
],
|
||||
|
@ -131,8 +184,12 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
},
|
||||
child: index == itemCount - 1
|
||||
? Container(
|
||||
height: 144,
|
||||
padding: EdgeInsets.only(left: 24, right: 24, top: 35, bottom: 69),
|
||||
height: headerHeight,
|
||||
padding: EdgeInsets.only(
|
||||
left: 24,
|
||||
right: 24,
|
||||
top: fromBottomEdge,
|
||||
bottom: fromTopEdge),
|
||||
alignment: Alignment.topLeft,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),
|
||||
|
@ -160,7 +217,7 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
),
|
||||
)
|
||||
: Container(
|
||||
height: 91,
|
||||
height: tileHeight,
|
||||
padding: EdgeInsets.only(left: 24, right: 24),
|
||||
color: PaletteDark.menuList,
|
||||
child: Row(
|
||||
|
@ -196,7 +253,9 @@ class MenuWidgetState extends State<MenuWidget> {
|
|||
),
|
||||
),
|
||||
)
|
||||
),
|
||||
)
|
||||
],
|
||||
)
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
Loading…
Reference in a new issue