f5e163538 · samitouri/QOSAMI-cakewallet

@@ -13,27 +13,53 @@ class MenuWidget extends StatefulWidget {

13

14 class MenuWidgetState extends State<MenuWidget> {

15 final moneroIcon = Image.asset('assets/images/monero.png');

16 + final largeScreen = 731;

17 +

18 double menuWidth;

19 double screenWidth;

20 + double screenHeight;

21 double opacity;

22 bool isDraw;

23

24 + double headerHeight;

25 + double tileHeight;

26 + double fromTopEdge;

27 + double fromBottomEdge;

28 +

29 @override

30 void initState() {

31 menuWidth = 0;

32 screenWidth = 0;

33 + screenHeight = 0;

34 opacity = 0;

35 isDraw = false;

36 +

37 + headerHeight = 120;

38 + tileHeight = 75;

39 + fromTopEdge = 50;

40 + fromBottomEdge = 30;

41 +

42 super.initState();

43 WidgetsBinding.instance.addPostFrameCallback(afterLayout);

44 }

45

46 void afterLayout(dynamic _) {

47 screenWidth = MediaQuery.of(context).size.width;

48 + screenHeight = MediaQuery.of(context).size.height;

49 +

50 setState(() {

51 menuWidth = screenWidth;

52 opacity = 1;

53 +

54 + if (screenHeight > largeScreen) {

55 + final scale = screenHeight / largeScreen;

56 + tileHeight *= scale;

57 + headerHeight *= scale;

58 + fromTopEdge *= scale;

59 + fromBottomEdge *= scale;

60 + }

61 });

62 +

63 Timer(Duration(milliseconds: 350), () =>

64 setState(() => isDraw = true)

65 );

@@ -53,150 +79,183 @@ class MenuWidgetState extends State<MenuWidget> {

79 filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),

80 child: Container(

81 decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),

56 - child: Padding(

57 - padding: EdgeInsets.only(left: 40),

58 - child: GestureDetector(

59 - onTap: () => null,

60 - child: Container(

61 - width: double.infinity,

62 - height: double.infinity,

63 - alignment: Alignment.centerRight,

64 - child: AnimatedContainer(

65 - alignment: Alignment.centerLeft,

66 - width: menuWidth,

67 - height: double.infinity,

68 - duration: Duration(milliseconds: 500),

69 - curve: Curves.fastOutSlowIn,

82 + child: Row(

83 + mainAxisSize: MainAxisSize.max,

84 + crossAxisAlignment: CrossAxisAlignment.center,

85 + children: <Widget>[

86 + Padding(

87 + padding: EdgeInsets.only(left: 24),

88 + child: isDraw

89 + ? Container(

90 + height: 60,

91 + width: 4,

92 decoration: BoxDecoration(

71 - borderRadius: BorderRadius.only(topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),

72 - color: PaletteDark.menuList.withOpacity(opacity)

93 + borderRadius: BorderRadius.all(Radius.circular(2)),

94 + color: PaletteDark.walletCardText

95 ),

74 - child: isDraw

75 - ? ListView.separated(

76 - itemBuilder: (_, index) {

77 -

78 - if (index == 0) {

79 - return Container(

80 - height: 144,

81 - padding: EdgeInsets.only(left: 24, top: 69, right: 24, bottom: 35),

82 - decoration: BoxDecoration(

83 - borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),

84 - color: PaletteDark.menuHeader

85 - ),

86 - child: Row(

87 - mainAxisAlignment: MainAxisAlignment.start,

88 - children: <Widget>[

89 - moneroIcon,

90 - SizedBox(width: 16),

91 - Expanded(

92 - child: Column(

93 - crossAxisAlignment: CrossAxisAlignment.start,

94 - mainAxisAlignment: MainAxisAlignment.spaceBetween,

96 + )

97 + : Container(

98 + height: 60,

99 + width: 4,

100 + )

101 + ),

102 + SizedBox(width: 12),

103 + Expanded(

104 + child: GestureDetector(

105 + onTap: () => null,

106 + child: Container(

107 + width: double.infinity,

108 + height: double.infinity,

109 + alignment: Alignment.centerRight,

110 + child: AnimatedContainer(

111 + alignment: Alignment.centerLeft,

112 + width: menuWidth,

113 + height: double.infinity,

114 + duration: Duration(milliseconds: 500),

115 + curve: Curves.fastOutSlowIn,

116 + decoration: BoxDecoration(

117 + borderRadius: BorderRadius.only(topLeft: Radius.circular(24), bottomLeft: Radius.circular(24)),

118 + color: PaletteDark.menuList.withOpacity(opacity)

119 + ),

120 + child: isDraw

121 + ? ListView.separated(

122 + itemBuilder: (_, index) {

123 +

124 + if (index == 0) {

125 + return Container(

126 + height: headerHeight,

127 + padding: EdgeInsets.only(

128 + left: 24,

129 + top: fromTopEdge,

130 + right: 24,

131 + bottom: fromBottomEdge),

132 + decoration: BoxDecoration(

133 + borderRadius: BorderRadius.only(topLeft: Radius.circular(24)),

134 + color: PaletteDark.menuHeader

135 + ),

136 + child: Row(

137 + mainAxisAlignment: MainAxisAlignment.start,

138 children: <Widget>[

96 - Text(

97 - walletStore.name,

98 - style: TextStyle(

99 - color: Colors.white,

100 - decoration: TextDecoration.none,

101 - fontFamily: 'Lato',

102 - fontSize: 20,

103 - fontWeight: FontWeight.bold

104 - ),

105 - ),

106 - Text(

107 - walletStore.account.label,

108 - style: TextStyle(

109 - color: PaletteDark.walletCardText,

110 - decoration: TextDecoration.none,

111 - fontFamily: 'Lato',

112 - fontSize: 12

113 - ),

139 + moneroIcon,

140 + SizedBox(width: 16),

141 + Expanded(

142 + child: Container(

143 + height: 40,

144 + child: Column(

145 + crossAxisAlignment: CrossAxisAlignment.start,

146 + mainAxisAlignment: MainAxisAlignment.spaceBetween,

147 + children: <Widget>[

148 + Text(

149 + walletStore.name,

150 + style: TextStyle(

151 + color: Colors.white,

152 + decoration: TextDecoration.none,

153 + fontFamily: 'Lato',

154 + fontSize: 20,

155 + fontWeight: FontWeight.bold

156 + ),

157 + ),

158 + Text(

159 + walletStore.account.label,

160 + style: TextStyle(

161 + color: PaletteDark.walletCardText,

162 + decoration: TextDecoration.none,

163 + fontFamily: 'Lato',

164 + fontSize: 12

165 + ),

166 + )

167 + ],

168 + ),

169 + )

170 )

171 ],

116 - )

117 - )

118 - ],

119 - ),

120 - );

121 - }

122 -

123 - index -= 1;

124 - final item = walletMenu.items[index];

125 - final image = walletMenu.images[index] ?? Offstage();

126 -

127 - return GestureDetector(

128 - onTap: () {

129 - Navigator.of(context).pop();

130 - walletMenu.action(index);

131 - },

132 - child: index == itemCount - 1

133 - ? Container(

134 - height: 144,

135 - padding: EdgeInsets.only(left: 24, right: 24, top: 35, bottom: 69),

136 - alignment: Alignment.topLeft,

137 - decoration: BoxDecoration(

138 - borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),

139 - color: PaletteDark.menuList,

140 - ),

141 - child: Row(

142 - mainAxisAlignment: MainAxisAlignment.start,

143 - crossAxisAlignment: CrossAxisAlignment.center,

144 - children: <Widget>[

145 - image,

146 - SizedBox(width: 16),

147 - Expanded(

148 - child: Text(

149 - item,

150 - style: TextStyle(

151 - decoration: TextDecoration.none,

152 - color: Colors.white,

153 - fontFamily: 'Lato',

154 - fontSize: 20,

155 - fontWeight: FontWeight.bold

156 - ),

157 - )

158 - )

159 - ],

160 - ),

161 - )

162 - : Container(

163 - height: 91,

164 - padding: EdgeInsets.only(left: 24, right: 24),

165 - color: PaletteDark.menuList,

166 - child: Row(

167 - mainAxisAlignment: MainAxisAlignment.start,

168 - crossAxisAlignment: CrossAxisAlignment.center,

169 - children: <Widget>[

170 - image,

171 - SizedBox(width: 16),

172 - Expanded(

173 - child: Text(

174 - item,

175 - style: TextStyle(

176 - decoration: TextDecoration.none,

177 - color: Colors.white,

178 - fontFamily: 'Lato',

179 - fontSize: 20,

180 - fontWeight: FontWeight.bold

181 - ),

182 - )

172 + ),

173 + );

174 + }

175 +

176 + index -= 1;

177 + final item = walletMenu.items[index];

178 + final image = walletMenu.images[index] ?? Offstage();

179 +

180 + return GestureDetector(

181 + onTap: () {

182 + Navigator.of(context).pop();

183 + walletMenu.action(index);

184 + },

185 + child: index == itemCount - 1

186 + ? Container(

187 + height: headerHeight,

188 + padding: EdgeInsets.only(

189 + left: 24,

190 + right: 24,

191 + top: fromBottomEdge,

192 + bottom: fromTopEdge),

193 + alignment: Alignment.topLeft,

194 + decoration: BoxDecoration(

195 + borderRadius: BorderRadius.only(bottomLeft: Radius.circular(24)),

196 + color: PaletteDark.menuList,

197 + ),

198 + child: Row(

199 + mainAxisAlignment: MainAxisAlignment.start,

200 + crossAxisAlignment: CrossAxisAlignment.center,

201 + children: <Widget>[

202 + image,

203 + SizedBox(width: 16),

204 + Expanded(

205 + child: Text(

206 + item,

207 + style: TextStyle(

208 + decoration: TextDecoration.none,

209 + color: Colors.white,

210 + fontFamily: 'Lato',

211 + fontSize: 20,

212 + fontWeight: FontWeight.bold

213 + ),

214 + )

215 + )

216 + ],

217 + ),

218 )

184 - ],

185 - ),

186 - ),

187 - );

188 - },

189 - separatorBuilder: (_, index) =>

190 - Divider(

191 - height: 1,

192 - color: PaletteDark.walletCardText,

193 - ),

194 - itemCount: itemCount + 1)

195 - : Offstage()

196 - ),

197 - ),

198 - )

199 - ),

219 + : Container(

220 + height: tileHeight,

221 + padding: EdgeInsets.only(left: 24, right: 24),

222 + color: PaletteDark.menuList,

223 + child: Row(

224 + mainAxisAlignment: MainAxisAlignment.start,

225 + crossAxisAlignment: CrossAxisAlignment.center,

226 + children: <Widget>[

227 + image,

228 + SizedBox(width: 16),

229 + Expanded(

230 + child: Text(

231 + item,

232 + style: TextStyle(

233 + decoration: TextDecoration.none,

234 + color: Colors.white,

235 + fontFamily: 'Lato',

236 + fontSize: 20,

237 + fontWeight: FontWeight.bold

238 + ),

239 + )

240 + )

241 + ],

242 + ),

243 + ),

244 + );

245 + },

246 + separatorBuilder: (_, index) =>

247 + Divider(

248 + height: 1,

249 + color: PaletteDark.walletCardText,

250 + ),

251 + itemCount: itemCount + 1)

252 + : Offstage()

253 + ),

254 + ),

255 + )

256 + )

257 + ],

258 + )

259 ),

260 ),

261 ),

CWA-200 | calculated list tile heights for large screens