Skip to content

Commit 18b76a5

Browse files
author
Sterling Long
committed
Grid list overhauled for easier usage in W3M
1 parent ae9d227 commit 18b76a5

16 files changed

Lines changed: 192 additions & 91 deletions

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
## 2.1.4
2+
3+
- Grid list overhauled to allow for increased customization
4+
- Added press animation to grid list items
5+
6+
## 2.1.3
7+
8+
- Added custom item creation to the grid list
9+
110
## 2.1.2
211

312
- Multiple UI improvements

‎assets/walletconnect_logo_blue_solid_background.png‎

17.8 KB
Loading

‎example/sign/pubspec.lock‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1011,7 +1011,7 @@ packages:
10111011
path: "../.."
10121012
relative: true
10131013
source: path
1014-
version: "2.1.1"
1014+
version: "2.1.3"
10151015
watcher:
10161016
dependency: transitive
10171017
description:

‎lib/constants/constants.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import 'package:flutter/material.dart';
22

33
class WalletConnectModalConstants {
4-
static const WALLETCONNECT_MODAL_VERSION = '2.1.2';
4+
static const WALLETCONNECT_MODAL_VERSION = '2.1.3';
55

66
static const Key helpPageKey = Key('helpPageKey');
77
static const Key qrCodePageKey = Key('qrCodePageKey');

‎lib/pages/get_wallet_page.dart‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ class GetWalletPage extends StatelessWidget {
126126
],
127127
),
128128
),
129-
// URL: https://explorer.walletconnect.com/?type=wallet
129+
const SizedBox(height: 8.0),
130130
],
131131
),
132132
);

‎lib/pages/help_page.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,7 @@ class _HelpPageState extends State<HelpPage> {
193193
],
194194
),
195195
),
196+
const SizedBox(height: 8.0),
196197
],
197198
),
198199
);
@@ -233,6 +234,7 @@ class _HelpPageState extends State<HelpPage> {
233234
activeDotColor: themeData.primary100,
234235
),
235236
),
237+
const SizedBox(height: 8.0),
236238
],
237239
);
238240
}

‎lib/pages/qr_code_and_wallet_list_page.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import 'package:walletconnect_modal_flutter/services/explorer/explorer_service_s
66
import 'package:walletconnect_modal_flutter/services/utils/widget_stack/widget_stack_singleton.dart';
77
import 'package:walletconnect_modal_flutter/services/walletconnect_modal/i_walletconnect_modal_service.dart';
88
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list.dart';
9+
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list_wallet_item.dart';
910
import 'package:walletconnect_modal_flutter/widgets/qr_code_widget.dart';
1011
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_navbar.dart';
1112
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_navbar_title.dart';
@@ -46,6 +47,12 @@ class QRCodeAndWalletListPage extends StatelessWidget {
4647
walletData: data,
4748
);
4849
},
50+
createListItem: (info, iconSize) {
51+
return GridListWalletItem(
52+
listItem: info,
53+
imageSize: iconSize,
54+
);
55+
},
4956
),
5057
],
5158
),

‎lib/pages/wallet_list_long_page.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import 'package:walletconnect_modal_flutter/models/listings.dart';
44
import 'package:walletconnect_modal_flutter/services/explorer/explorer_service_singleton.dart';
55
import 'package:walletconnect_modal_flutter/services/walletconnect_modal/i_walletconnect_modal_service.dart';
66
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list.dart';
7+
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list_wallet_item.dart';
78
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_navbar.dart';
89
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_provider.dart';
910
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_search_bar.dart';
@@ -42,6 +43,12 @@ class WalletListLongPage extends StatelessWidget {
4243
walletData: data,
4344
);
4445
},
46+
createListItem: (info, iconSize) {
47+
return GridListWalletItem(
48+
listItem: info,
49+
imageSize: iconSize,
50+
);
51+
},
4552
),
4653
);
4754
}

‎lib/pages/wallet_list_short_page.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import 'package:walletconnect_modal_flutter/services/explorer/explorer_service_s
77
import 'package:walletconnect_modal_flutter/services/utils/widget_stack/widget_stack_singleton.dart';
88
import 'package:walletconnect_modal_flutter/services/walletconnect_modal/i_walletconnect_modal_service.dart';
99
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list.dart';
10+
import 'package:walletconnect_modal_flutter/widgets/grid_list/grid_list_wallet_item.dart';
1011
import 'package:walletconnect_modal_flutter/widgets/walletconnect_icon_button.dart';
1112
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_navbar.dart';
1213
import 'package:walletconnect_modal_flutter/widgets/walletconnect_modal_navbar_title.dart';
@@ -48,6 +49,12 @@ class WalletListShortPage extends StatelessWidget {
4849
walletData: data,
4950
);
5051
},
52+
createListItem: (info, iconSize) {
53+
return GridListWalletItem(
54+
listItem: info,
55+
imageSize: iconSize,
56+
);
57+
},
5158
),
5259
);
5360
}

‎lib/widgets/grid_list/grid_list.dart‎

Lines changed: 61 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,22 @@ class GridList<T> extends StatelessWidget {
2525
required this.provider,
2626
this.viewLongList,
2727
required this.onSelect,
28-
this.visibleRowCount,
28+
required this.createListItem,
29+
this.heightOverride,
30+
this.longBottomSheetHeightOverride,
31+
this.longBottomSheetAspectRatio = 0.73,
32+
this.itemAspectRatio = 0.85,
2933
});
3034

3135
final GridListState state;
3236
final GridListProvider<T> provider;
3337
final void Function()? viewLongList;
3438
final void Function(T) onSelect;
35-
final int? visibleRowCount;
39+
final Widget Function(GridListItemModel<T>, double) createListItem;
40+
final double? heightOverride;
41+
final double? longBottomSheetHeightOverride;
42+
final double longBottomSheetAspectRatio;
43+
final double itemAspectRatio;
3644

3745
@override
3846
Widget build(BuildContext context) {
@@ -91,8 +99,10 @@ class GridList<T> extends StatelessWidget {
9199
break;
92100
}
93101

94-
if (visibleRowCount != null) {
95-
height = 120.0 * visibleRowCount!;
102+
if (longBottomSheet && longBottomSheetHeightOverride != null) {
103+
height = longBottomSheetHeightOverride!;
104+
} else if (!longBottomSheet && heightOverride != null) {
105+
height = heightOverride!;
96106
}
97107

98108
if (value.isEmpty) {
@@ -122,14 +132,16 @@ class GridList<T> extends StatelessWidget {
122132
}
123133

124134
return Container(
125-
padding: const EdgeInsets.all(8.0),
135+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
126136
height: height,
127137
child: GridView.builder(
128138
key: Key('${value.length}'),
129139
itemCount: itemCount,
130140
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
131141
crossAxisCount: longBottomSheet ? 8 : 4,
132-
childAspectRatio: longBottomSheet ? 0.73 : 0.85,
142+
childAspectRatio: longBottomSheet
143+
? longBottomSheetAspectRatio
144+
: itemAspectRatio,
133145
),
134146
itemBuilder: (context, index) {
135147
if (index == itemCount - 1 &&
@@ -143,15 +155,12 @@ class GridList<T> extends StatelessWidget {
143155
} else {
144156
return GridListItem(
145157
key: Key(value[index].title),
146-
title: value[index].title,
147-
description: value[index].description,
148158
onSelect: () => onSelect(value[index].data),
149-
child: WalletImage(
150-
imageUrl: value[index].image,
151-
imageSize: size.height < 700.0
152-
? GridList.smallTileSize
153-
: GridList.tileSize,
154-
),
159+
child: createListItem(
160+
value[index],
161+
size.height < 700.0
162+
? GridList.smallTileSize
163+
: GridList.tileSize),
155164
);
156165
}
157166
},
@@ -168,7 +177,9 @@ class GridList<T> extends StatelessWidget {
168177
) {
169178
final WalletConnectModalThemeData themeData =
170179
WalletConnectModalTheme.getData(context);
171-
final size = MediaQuery.of(context).size;
180+
final Size size = MediaQuery.of(context).size;
181+
final tileSize =
182+
size.height < 700.0 ? GridList.smallTileSize : GridList.tileSize;
172183

173184
List<Widget> images = [];
174185

@@ -180,37 +191,50 @@ class GridList<T> extends StatelessWidget {
180191
images.add(
181192
WalletImage(
182193
imageUrl: items[startIndex + i].image,
183-
imageSize: GridList.tileSize / 3.0,
194+
imageSize: tileSize / 3.0,
184195
),
185196
);
186197
}
187198

188199
return GridListItem(
189200
key: WalletConnectModalConstants.gridListViewAllButtonKey,
190-
title: 'View All',
191201
onSelect: viewLongList ?? () {},
192-
child: Container(
193-
width: GridList.tileSize,
194-
height:
195-
size.height < 700.0 ? GridList.smallTileSize : GridList.tileSize,
196-
padding: const EdgeInsets.all(2.0),
197-
decoration: BoxDecoration(
198-
color: themeData.background200,
199-
border: Border.all(
200-
color: themeData.overlay010,
201-
strokeAlign: BorderSide.strokeAlignOutside,
202-
),
203-
borderRadius: BorderRadius.circular(
204-
GridList.getTileBorderRadius(GridList.tileSize),
202+
child: Column(
203+
children: [
204+
Container(
205+
width: tileSize,
206+
height: tileSize,
207+
padding: const EdgeInsets.all(2.0),
208+
decoration: BoxDecoration(
209+
color: themeData.background200,
210+
border: Border.all(
211+
color: themeData.overlay010,
212+
strokeAlign: BorderSide.strokeAlignOutside,
213+
),
214+
borderRadius: BorderRadius.circular(
215+
GridList.getTileBorderRadius(GridList.tileSize),
216+
),
217+
),
218+
child: Center(
219+
child: Wrap(
220+
spacing: 4.0,
221+
runSpacing: 4.0,
222+
children: images,
223+
),
224+
),
205225
),
206-
),
207-
child: Center(
208-
child: Wrap(
209-
spacing: 4.0,
210-
runSpacing: 4.0,
211-
children: images,
226+
const SizedBox(height: 4.0),
227+
Text(
228+
'View All',
229+
textAlign: TextAlign.center,
230+
maxLines: 1,
231+
overflow: TextOverflow.clip,
232+
style: TextStyle(
233+
fontSize: 12.0,
234+
color: themeData.foreground100,
235+
),
212236
),
213-
),
237+
],
214238
),
215239
);
216240
}

0 commit comments

Comments
 (0)