Improve walletHome view: Custom avatars and options buttons

lib/models/generateWallets.dart

@@ -42,8 +42,12 @@ class GenerateWalletsProvider with ChangeNotifier {
   void storeHDWChest(
       NewWallet _wallet, String _name, BuildContext context) async {
     int chestNumber = chestBox.length;
-    WalletData myWallet =
+    WalletData myWallet = WalletData(
-        WalletData(chest: chestNumber, number: 0, name: _name, derivation: 3);
+        chest: chestNumber,
+        number: 0,
+        name: _name,
+        derivation: 3,
+        imageName: '0.png');
 
     String chestName;
     if (chestNumber == 0) {

lib/models/myWallets.dart

@@ -135,7 +135,8 @@ class MyWalletsProvider with ChangeNotifier {
         chest: _chest,
         number: _newWalletNbr,
         name: _name,
-        derivation: _newDerivationNbr);
+        derivation: _newDerivationNbr,
+        imageName: '${_newWalletNbr % 3}.png');
 
     await walletBox.add(newWallet);
 

lib/models/walletData.dart

@@ -16,7 +16,11 @@ class WalletData extends HiveObject {
   @HiveField(3)
   int derivation;
 
-  WalletData({this.chest, this.number, this.name, this.derivation});
+  @HiveField(4)
+  String imageName;
+
+  WalletData(
+      {this.chest, this.number, this.name, this.derivation, this.imageName});
 
   // representation of WalletData when debugging
   @override
@@ -26,7 +30,7 @@ class WalletData extends HiveObject {
 
   // creates the ':'-separated string from the WalletData
   String inLine() {
-    return "${this.chest}:${this.number}:${this.name}:${this.derivation}";
+    return "${this.chest}:${this.number}:${this.name}:${this.derivation}:${this.imageName}";
   }
 
   // returns only the id part of the ':'-separated string

lib/models/walletData.g.dart

@@ -21,13 +21,14 @@ class WalletDataAdapter extends TypeAdapter<WalletData> {
       number: fields[1] as int,
       name: fields[2] as String,
       derivation: fields[3] as int,
+      imageName: fields[4] as String,
     );
   }
 
   @override
   void write(BinaryWriter writer, WalletData obj) {
     writer
-      ..writeByte(4)
+      ..writeByte(5)
       ..writeByte(0)
       ..write(obj.chest)
       ..writeByte(1)
@@ -35,7 +36,9 @@ class WalletDataAdapter extends TypeAdapter<WalletData> {
       ..writeByte(2)
       ..write(obj.name)
       ..writeByte(3)
-      ..write(obj.derivation);
+      ..write(obj.derivation)
+      ..writeByte(4)
+      ..write(obj.imageName);
   }
 
   @override

lib/models/walletOptions.dart

@@ -130,7 +130,7 @@ class WalletOptionsProvider with ChangeNotifier {
 
     WalletData _walletTarget = myWalletClass.getWalletData(_walletID);
     _walletTarget.name = _newName;
-    await walletBox.putAt(_walletTarget.key, _walletTarget);
+    await walletBox.put(_walletTarget.key, _walletTarget);
 
     _newWalletName.text = '';
   }

lib/screens/myWallets/walletOptions.dart

@@ -107,7 +107,8 @@ class WalletOptions extends StatelessWidget {
                             await _walletOptions.changeAvatar();
                           },
                           child: Image.asset(
-                            'assets/chopp-gecko2.png',
+                            'assets/avatars/${wallet.imageName}',
+                            width: 110,
                           )),
                       InkWell(
                           onTap: () async {

lib/screens/myWallets/walletsHome.dart

@@ -9,6 +9,7 @@ import 'package:gecko/screens/myWallets/chooseChest.dart';
 import 'package:gecko/screens/myWallets/walletOptions.dart';
 import 'package:gecko/screens/onBoarding/0_noKeychainFound.dart';
 import 'package:provider/provider.dart';
+import 'package:assorted_layout_widgets/assorted_layout_widgets.dart';
 
 class WalletsHome extends StatelessWidget {
   final _derivationKey = GlobalKey<FormState>();
@@ -57,9 +58,35 @@ class WalletsHome extends StatelessWidget {
 
   Widget chestOptions(BuildContext context) {
     return Column(children: [
+      SizedBox(height: 50),
       SizedBox(
-          height: 90,
+          height: 120,
-          child: ElevatedButton(
+          width: 445,
+          child: ElevatedButton.icon(
+            icon: Image.asset(
+              'assets/chests/config.png',
+            ),
+            style: ElevatedButton.styleFrom(
+              elevation: 2,
+              primary: floattingYellow, // background
+              onPrimary: Colors.black, // foreground
+            ),
+            onPressed: () => null,
+            label: Text(
+              "       Paramétrer ce coffre",
+              style: TextStyle(
+                fontSize: 25,
+                fontWeight: FontWeight.w700,
+                color: Color(0xff8a3c0f),
+              ),
+            ),
+          )),
+      SizedBox(height: 30),
+      SizedBox(
+          height: 120,
+          width: 445,
+          child: ElevatedButton.icon(
+            icon: Image.asset('assets/chests/miniChests.png'),
             style: ElevatedButton.styleFrom(
               elevation: 2,
               primary: floattingYellow, // background
@@ -71,11 +98,16 @@ class WalletsHome extends StatelessWidget {
                 return ChooseChest();
               }),
             ),
-            child: Text(
+            label: Text(
-              "Changer de coffre",
+              "       Changer de coffre",
-              style: TextStyle(fontSize: 16),
+              style: TextStyle(
+                fontSize: 25,
+                fontWeight: FontWeight.w700,
+                color: Color(0xff8a3c0f),
+              ),
             ),
-          ))
+          )),
+      SizedBox(height: 30)
     ]);
   }
 
@@ -105,6 +137,7 @@ class WalletsHome extends StatelessWidget {
     List _listWallets = _myWalletProvider.listWallets;
 
     return CustomScrollView(slivers: <Widget>[
+      SliverToBoxAdapter(child: SizedBox(height: 20)),
       SliverGrid.count(
           key: Key('listWallets'),
           crossAxisCount: 2,
@@ -113,92 +146,112 @@ class WalletsHome extends StatelessWidget {
           mainAxisSpacing: 0,
           children: <Widget>[
             for (WalletData _repository in _listWallets)
+              // if (_repository.number.clamp(0, 2) == _repository.number) hasImage = true
               Padding(
-                padding: EdgeInsets.all(16),
+                  padding: EdgeInsets.all(16),
-                child: GestureDetector(
+                  child: GestureDetector(
-                  onTap: () async {
+                    onTap: () async {
-                    await _walletOptions.readLocalWallet(context, _repository,
+                      await _walletOptions.readLocalWallet(
-                        _myWalletProvider.pinCode, _myWalletProvider.pinLenght);
+                          context,
-                    Navigator.push(
+                          _repository,
-                        context,
+                          _myWalletProvider.pinCode,
-                        SmoothTransition(
+                          _myWalletProvider.pinLenght);
-                            page: WalletOptions(
+                      Navigator.push(
-                          wallet: _repository,
+                          context,
-                        )));
+                          SmoothTransition(
-
-                    // Navigator.push(context,
-                    //     MaterialPageRoute(builder: (context) {
-                    //   return UnlockingWallet(wallet: _repository);
-                    // }));
-                  },
-                  child: ClipRRect(
-                    borderRadius: BorderRadius.all(Radius.circular(12)),
-                    child: Column(children: <Widget>[
-                      Expanded(
-                          child: Container(
-                        width: double.infinity,
-                        height: double.infinity,
-                        decoration: BoxDecoration(
-                            gradient: RadialGradient(
-                          radius: 1,
-                          colors: [
-                            Colors.green[100],
-                            Colors.green[500],
-                          ],
-                        )),
-                        child:
-                            // SvgPicture.asset('assets/chopp-gecko2.png',
-                            //         semanticsLabel: 'Gecko', height: 48),
-                            Image.asset(
-                          'assets/chopp-gecko2.png',
-                        ),
-                      )),
-                      ListTile(
-                        shape: RoundedRectangleBorder(
-                            borderRadius: BorderRadius.vertical(
-                                bottom: Radius.circular(12))),
-                        // contentPadding: const EdgeInsets.only(left: 7.0),
-                        tileColor: _repository.id()[1] == defaultWallet.id()[1]
-                            ? orangeC
-                            : Color(0xffFFD58D),
-                        // leading: Text('IMAGE'),
-
-                        // subtitle: Text(_repository.split(':')[3],
-                        //     style: TextStyle(fontSize: 12.0, fontFamily: 'Monospace')),
-                        title: Center(
-                            child: Padding(
-                                padding: EdgeInsets.symmetric(horizontal: 5),
-                                child: Text(_repository.name,
-                                    textAlign: TextAlign.center,
-                                    style: TextStyle(
-                                        fontSize: 16.0,
-                                        color: _repository.id()[1] ==
-                                                defaultWallet.id()[1]
-                                            ? Color(0xffF9F9F1)
-                                            : Colors.black)))),
-                        // dense: true,
-                        onTap: () {
-                          Navigator.push(
-                            context,
-                            SmoothTransition(
                               page: WalletOptions(
-                                wallet: _repository,
+                            wallet: _repository,
-                              ),
+                          )));
+
+                      // Navigator.push(context,
+                      //     MaterialPageRoute(builder: (context) {
+                      //   return UnlockingWallet(wallet: _repository);
+                      // }));
+                    },
+                    child: ClipOvalShadow(
+                      shadow: Shadow(
+                        color: Colors.transparent,
+                        offset: Offset(0, 0),
+                        blurRadius: 5,
+                      ),
+                      clipper: CustomClipperOval(),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.all(Radius.circular(12)),
+                        child: Column(children: <Widget>[
+                          Expanded(
+                              child: Container(
+                            width: double.infinity,
+                            height: double.infinity,
+                            decoration: BoxDecoration(
+                                gradient: RadialGradient(
+                              radius: 0.6,
+                              colors: [
+                                Colors.green[400],
+                                Color(0xFFE7E7A6),
+                              ],
+                            )),
+                            child:
+                                // SvgPicture.asset('assets/chopp-gecko2.png',
+                                //         semanticsLabel: 'Gecko', height: 48),
+                                Image.asset(
+                              'assets/avatars/${_repository.imageName}',
+                              alignment: Alignment.bottomCenter,
+                              scale: 0.5,
                             ),
-                          );
+                          )),
-                        },
+                          ListTile(
-                      )
+                            shape: RoundedRectangleBorder(
-                    ]),
+                                borderRadius: BorderRadius.vertical(
-                  ),
+                                    bottom: Radius.circular(12))),
-                ),
+                            // contentPadding: const EdgeInsets.only(left: 7.0),
-              ),
+                            tileColor:
-            addNewDerivation(context)
+                                _repository.id()[1] == defaultWallet.id()[1]
+                                    ? orangeC
+                                    : Color(0xffFFD58D),
+                            // leading: Text('IMAGE'),
+
+                            // subtitle: Text(_repository.split(':')[3],
+                            //     style: TextStyle(fontSize: 12.0, fontFamily: 'Monospace')),
+                            title: Center(
+                                child: Padding(
+                                    padding:
+                                        EdgeInsets.symmetric(horizontal: 5),
+                                    child: Text(_repository.name,
+                                        textAlign: TextAlign.center,
+                                        style: TextStyle(
+                                            fontSize: 16.0,
+                                            color: _repository.id()[1] ==
+                                                    defaultWallet.id()[1]
+                                                ? Color(0xffF9F9F1)
+                                                : Colors.black)))),
+                            // dense: true,
+                            onTap: () {
+                              Navigator.push(
+                                context,
+                                SmoothTransition(
+                                  page: WalletOptions(
+                                    wallet: _repository,
+                                  ),
+                                ),
+                              );
+                            },
+                          )
+                        ]),
+                      ),
+                    ),
+                  )),
+            addNewDerivation(context),
+            // SizedBox(height: 1),
+            // Padding(
+            //     padding: EdgeInsets.symmetric(horizontal: 35),
+            //     child: Text(
+            //       'Ajouter un portefeuille',
+            //       textAlign: TextAlign.center,
+            //       style: TextStyle(fontSize: 18),
+            //     ))
           ]),
       // SliverToBoxAdapter(child: Spacer()),
-      SliverPadding(
+      SliverToBoxAdapter(child: chestOptions(context)),
-        padding: EdgeInsets.symmetric(horizontal: 30),
-        sliver: SliverToBoxAdapter(child: chestOptions(context)),
-      ),
     ]);
   }
 
@@ -231,7 +284,7 @@ class WalletsHome extends StatelessWidget {
                             color: Color(0xFFFCB437)),
                       )),
                     )),
-              )
+              ),
             ])));
   }
 
@@ -285,3 +338,65 @@ class WalletsHome extends StatelessWidget {
     );
   }
 }
+
+// extension Range on num {
+//   bool isBetween(num from, num to) {
+//     return from < this && this < to;
+//   }
+// }
+
+class CustomClipperOval extends CustomClipper<Rect> {
+  @override
+  Rect getClip(Size size) {
+    return Rect.fromCircle(
+        center: new Offset(size.width / 2, size.width / 2),
+        radius: size.width / 2 + 3);
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Rect> oldClipper) {
+    return false;
+  }
+}
+
+class ClipOvalShadow extends StatelessWidget {
+  final Shadow shadow;
+  final CustomClipper<Rect> clipper;
+  final Widget child;
+
+  ClipOvalShadow({
+    @required this.shadow,
+    @required this.clipper,
+    @required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: _ClipOvalShadowPainter(
+        clipper: this.clipper,
+        shadow: this.shadow,
+      ),
+      child: ClipRect(child: child, clipper: this.clipper),
+    );
+  }
+}
+
+class _ClipOvalShadowPainter extends CustomPainter {
+  final Shadow shadow;
+  final CustomClipper<Rect> clipper;
+
+  _ClipOvalShadowPainter({@required this.shadow, @required this.clipper});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    var paint = shadow.toPaint();
+    var clipRect = clipper.getClip(size).shift(Offset(0, 0));
+    canvas.drawOval(clipRect, paint);
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return true;
+  }
+}

pubspec.lock

@@ -29,6 +29,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.3.0"
+  assorted_layout_widgets:
+    dependency: "direct main"
+    description:
+      name: assorted_layout_widgets
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "5.2.1"
   async:
     dependency: transitive
     description:
@@ -584,6 +591,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.12.10"
+  matrix4_transform:
+    dependency: transitive
+    description:
+      name: matrix4_transform
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.1"
   meta:
     dependency: transitive
     description:

pubspec.yaml

@@ -53,6 +53,7 @@ dependencies:
   truncate: ^3.0.1
   unorm_dart: ^0.2.0
   xml: ^5.3.0
+  assorted_layout_widgets: ^5.2.1
 
 flutter_icons:
   android: "ic_launcher"
@@ -76,6 +77,7 @@ flutter:
     - images/
     - config/gva_endpoints.json
     - assets/
+    - assets/avatars/
     - assets/chests/
     - assets/icon/
     - assets/onBoarding/