CWA-200 | calculated list tile heights for large screens

This commit is contained in:
Oleksandr Sobol 2020-04-22 19:40:16 +03:00
parent fa696c2a60
commit f5e1635380

View file

@ -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> {
),
),
)
),
)
],
)
),
),
),