From 6d69d039d166e5ee2ff8c536f3d78793d6847197 Mon Sep 17 00:00:00 2001 From: poka Date: Mon, 15 Nov 2021 18:05:08 +0100 Subject: [PATCH] Improve responsive --- lib/screens/home.dart | 603 ++++++++++---------- lib/screens/myWallets/unlocking_wallet.dart | 15 +- 2 files changed, 306 insertions(+), 312 deletions(-) diff --git a/lib/screens/home.dart b/lib/screens/home.dart index bcb0894..2e4d392 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -41,315 +41,310 @@ class HomeScreen extends StatelessWidget { ratio = 1.125; } return Scaffold( - resizeToAvoidBottomInset: false, - drawer: Drawer( - child: Column( - children: [ - Expanded( - child: ListView(padding: EdgeInsets.zero, children: [ - DrawerHeader( - child: Column(children: const [ - SizedBox(height: 0), + resizeToAvoidBottomInset: false, + drawer: Drawer( + child: Column( + children: [ + Expanded( + child: ListView(padding: EdgeInsets.zero, children: [ + DrawerHeader( + child: Column(children: const [ + SizedBox(height: 0), + Image( + image: AssetImage('assets/icon/gecko_final.png'), + height: 130), + ]), + decoration: BoxDecoration( + color: orangeC, + ), + ), + ListTile( + key: const Key('parameters'), + title: const Text('Paramètres'), + onTap: () { + Navigator.pop(context); + Navigator.push( + context, + MaterialPageRoute(builder: (context) { + return SettingsScreen(); + }), + ); + }, + ), + ListTile( + title: const Text('A propos'), + onTap: () { + // Update the state of the app. + // ... + }, + ), + ])), + Align( + alignment: FractionalOffset.bottomCenter, + child: Text('Ğecko v$appVersion')), + const SizedBox(height: 20) + ], + ), + ), + appBar: AppBar( + toolbarHeight: 60 * ratio, + leading: Builder( + builder: (context) => IconButton( + key: const Key('drawerMenu'), + icon: Icon(Icons.menu, color: Colors.grey[850]), + onPressed: () => Scaffold.of(context).openDrawer(), + )), + title: _homeProvider.appBarTitle, + actions: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 16), + child: IconButton( + key: const Key('searchIcon'), + icon: _homeProvider.searchIcon, + color: Colors.grey[850], + onPressed: () { + if (_homeProvider.searchIcon.icon == Icons.search) { + _homeProvider.searchIcon = Icon( + Icons.close, + color: Colors.grey[850], + ); + _homeProvider.appBarTitle = TextField( + key: const Key('searchInput'), + autofocus: true, + controller: _homeProvider.searchQuery, + onChanged: (text) { + log.d("Clé tappé: $text"); + final String searchResult = + _historyProvider.isPubkey(context, text); + if (searchResult != '') { + _homeProvider.currentIndex = 0; + } + }, + style: TextStyle( + color: Colors.grey[850], + ), + decoration: InputDecoration( + prefixIcon: + Icon(Icons.search, color: Colors.grey[850]), + hintText: "Rechercher ...", + hintStyle: TextStyle(color: Colors.grey[850])), + ); + _homeProvider.handleSearchStart(); + } else { + _homeProvider.handleSearchEnd(); + } + })) + ], + backgroundColor: const Color(0xffFFD58D), + ), + backgroundColor: const Color(0xffF9F9F1), + body: Builder( + builder: (ctx) => StatefulWrapper( + onInit: () { + WidgetsBinding.instance.addPostFrameCallback((_) { + DubpRust.setup(); + _historyStatic.snackNode(ctx); + }); + }, + child: Column(children: [ + Padding( + padding: const EdgeInsets.only(top: 20), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + SizedBox(width: 7), Image( image: AssetImage('assets/icon/gecko_final.png'), - height: 130), + height: 180), ]), - decoration: BoxDecoration( - color: orangeC, - ), - ), - ListTile( - key: const Key('parameters'), - title: const Text('Paramètres'), - onTap: () { - Navigator.pop(context); - Navigator.push( - context, - MaterialPageRoute(builder: (context) { - return SettingsScreen(); - }), - ); - }, - ), - ListTile( - title: const Text('A propos'), - onTap: () { - // Update the state of the app. - // ... - }, - ), - ])), - Align( - alignment: FractionalOffset.bottomCenter, - child: Text('Ğecko v$appVersion')), - const SizedBox(height: 20) - ], - ), - ), - appBar: AppBar( - toolbarHeight: 60 * ratio, - leading: Builder( - builder: (context) => IconButton( - key: const Key('drawerMenu'), - icon: Icon(Icons.menu, color: Colors.grey[850]), - onPressed: () => Scaffold.of(context).openDrawer(), - )), - title: _homeProvider.appBarTitle, - actions: [ + ), Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), - child: IconButton( - key: const Key('searchIcon'), - icon: _homeProvider.searchIcon, - color: Colors.grey[850], - onPressed: () { - if (_homeProvider.searchIcon.icon == Icons.search) { - _homeProvider.searchIcon = Icon( - Icons.close, - color: Colors.grey[850], - ); - _homeProvider.appBarTitle = TextField( - key: const Key('searchInput'), - autofocus: true, - controller: _homeProvider.searchQuery, - onChanged: (text) { - log.d("Clé tappé: $text"); - final String searchResult = - _historyProvider.isPubkey(context, text); - if (searchResult != '') { - _homeProvider.currentIndex = 0; - } - }, - style: TextStyle( - color: Colors.grey[850], - ), - decoration: InputDecoration( - prefixIcon: - Icon(Icons.search, color: Colors.grey[850]), - hintText: "Rechercher ...", - hintStyle: TextStyle(color: Colors.grey[850])), - ); - _homeProvider.handleSearchStart(); - } else { - _homeProvider.handleSearchEnd(); - } - })) - ], - backgroundColor: const Color(0xffFFD58D), - ), - backgroundColor: const Color(0xffF9F9F1), - body: Builder( - builder: (ctx) => StatefulWrapper( - onInit: () { - WidgetsBinding.instance.addPostFrameCallback((_) { - DubpRust.setup(); - _historyStatic.snackNode(ctx); - }); - }, - child: Column(children: [ - Padding( - padding: const EdgeInsets.only(top: 20), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: const [ - SizedBox(width: 7), - Image( - image: - AssetImage('assets/icon/gecko_final.png'), - height: 180), - ])), - Padding( - padding: const EdgeInsets.only(top: 15), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: const [ - Text( - "y'a pas de lézard !", - textAlign: TextAlign.center, - style: TextStyle( - color: Colors.black, - fontSize: 17, - fontStyle: FontStyle.italic), - ) - ])), - Padding( - padding: const EdgeInsets.only(top: 60), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Column(children: [ - Container( - child: ClipOval( - child: Material( - color: const Color( - 0xffFFD58D), // button color - child: InkWell( - splashColor: orangeC, // inkwell color - child: const Padding( - padding: EdgeInsets.all(22), - child: Image( - image: AssetImage( - 'assets/qrcode-scan.png'), - height: 60)), - onTap: () async { - await _historyProvider - .scan(context); - }), - ), - ), - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: [ - BoxShadow( - color: Colors.grey, - blurRadius: 4.0, - offset: Offset(2.0, 2.5), - spreadRadius: 0.5) - ], - ), - ), - const SizedBox(height: 12), - const Text( - "Payer par QR-Code", - textAlign: TextAlign.center, - style: TextStyle( - color: Colors.black, fontSize: 16), - ) - ]) - ])), - Padding( - padding: const EdgeInsets.only(top: 50), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Column(children: [ - Container( - child: ClipOval( - child: Material( - color: const Color( - 0xffFFD58D), // button color - child: InkWell( - splashColor: orangeC, // inkwell color - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 20, vertical: 16), - child: Image( - image: AssetImage( - 'assets/blockchain.png'), - height: 70)), - onTap: () { - // Navigator.push( - // context, - // MaterialPageRoute( - // builder: (context) { - // return TemplateScreen(); - // }), - // ); - }), - ), - ), - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: [ - BoxShadow( - color: Colors.grey, - blurRadius: 4.0, - offset: Offset(2.0, 2.5), - spreadRadius: 0.5) - ], - ), - ), - const SizedBox(height: 12), - const Text( - "Explorer\n", - textAlign: TextAlign.center, - style: TextStyle( - color: Colors.black, fontSize: 16), - ) - ]), - const SizedBox(width: 140), - Column(children: [ - Container( - child: ClipOval( - key: const Key('manageWallets'), - child: Material( - color: const Color( - 0xffFFD58D), // button color - child: InkWell( - splashColor: orangeC, // inkwell color - child: const Padding( - padding: EdgeInsets.all(23), - child: Image( - image: AssetImage( - 'assets/lock.png'), - height: 57)), - onTap: () { - isWalletsExists - ? Navigator.push(context, - MaterialPageRoute( - builder: (context) { - return UnlockingWallet( - wallet: defaultWallet, - action: "mywallets", - ); - })) - - // Navigator.pushNamed( - // context, '/mywallets') - : Navigator.push(context, - MaterialPageRoute( - builder: (context) { - return const NoKeyChainScreen(); - })); - }), - ), - ), - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Colors.white, - boxShadow: [ - BoxShadow( - color: Colors.grey, - blurRadius: 4.0, - offset: Offset(2.0, 2.5), - spreadRadius: 0.5) - ], - ), - ), - const SizedBox(height: 12), - const Text( - "Gérer mes\nportefeuilles", - textAlign: TextAlign.center, - style: TextStyle( - color: Colors.black, fontSize: 16), - ) - ]) - ])) + padding: const EdgeInsets.only(top: 15), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + Text( + "y'a pas de lézard !", + textAlign: TextAlign.center, + style: TextStyle( + color: Colors.black, + fontSize: 17, + fontStyle: FontStyle.italic), + ) ]), - // bottomNavigationBar: BottomNavigationBar( - // backgroundColor: Color(0xffFFD58D), - // fixedColor: Colors.grey[850], - // unselectedItemColor: Color(0xffBD935C), - // type: BottomNavigationBarType.fixed, - // onTap: (index) { - // _homeProvider.currentIndex = index; - // }, - // currentIndex: _homeProvider.currentIndex, - // items: [ - // BottomNavigationBarItem( - // icon: Image.asset('assets/block-space-disabled.png', height: 26), - // activeIcon: Image.asset('assets/blockchain.png', height: 26), - // label: 'Explorateur', - // ), - // BottomNavigationBarItem( - // icon: Icon(Icons.lock), - // label: 'Mes portefeuilles', - // ), - // ], - // ), - ))); + ), + Padding( + padding: EdgeInsets.only(top: isTall ? 70 : 60), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Column(children: [ + Container( + child: ClipOval( + child: Material( + color: const Color(0xffFFD58D), // button color + child: InkWell( + splashColor: orangeC, // inkwell color + child: const Padding( + padding: EdgeInsets.all(22), + child: Image( + image: AssetImage( + 'assets/qrcode-scan.png'), + height: 60)), + onTap: () async { + await _historyProvider.scan(context); + }), + ), + ), + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.grey, + blurRadius: 4.0, + offset: Offset(2.0, 2.5), + spreadRadius: 0.5) + ], + ), + ), + const SizedBox(height: 12), + const Text( + "Payer par QR-Code", + textAlign: TextAlign.center, + style: TextStyle(color: Colors.black, fontSize: 16), + ) + ]) + ]), + ), + Padding( + padding: const EdgeInsets.only(top: 50), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Column(children: [ + Container( + child: ClipOval( + child: Material( + color: const Color(0xffFFD58D), // button color + child: InkWell( + splashColor: orangeC, // inkwell color + child: const Padding( + padding: EdgeInsets.symmetric( + horizontal: 20, vertical: 16), + child: Image( + image: + AssetImage('assets/blockchain.png'), + height: 70)), + onTap: () { + // Navigator.push( + // context, + // MaterialPageRoute( + // builder: (context) { + // return TemplateScreen(); + // }), + // ); + }), + ), + ), + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.grey, + blurRadius: 4.0, + offset: Offset(2.0, 2.5), + spreadRadius: 0.5) + ], + ), + ), + const SizedBox(height: 12), + const Text( + "Explorer\n", + textAlign: TextAlign.center, + style: TextStyle(color: Colors.black, fontSize: 16), + ) + ]), + const SizedBox(width: 140), + Column(children: [ + Container( + child: ClipOval( + key: const Key('manageWallets'), + child: Material( + color: const Color(0xffFFD58D), // button color + child: InkWell( + splashColor: orangeC, // inkwell color + child: const Padding( + padding: EdgeInsets.all(23), + child: Image( + image: AssetImage('assets/lock.png'), + height: 57)), + onTap: () { + isWalletsExists + ? Navigator.push(context, + MaterialPageRoute(builder: (context) { + return UnlockingWallet( + wallet: defaultWallet, + action: "mywallets", + ); + })) + + // Navigator.pushNamed( + // context, '/mywallets') + : Navigator.push(context, + MaterialPageRoute(builder: (context) { + return const NoKeyChainScreen(); + })); + }), + ), + ), + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.grey, + blurRadius: 4.0, + offset: Offset(2.0, 2.5), + spreadRadius: 0.5) + ], + ), + ), + const SizedBox(height: 12), + const Text( + "Gérer mes\nportefeuilles", + textAlign: TextAlign.center, + style: TextStyle(color: Colors.black, fontSize: 16), + ) + ]) + ]), + ) + ]), + // bottomNavigationBar: BottomNavigationBar( + // backgroundColor: Color(0xffFFD58D), + // fixedColor: Colors.grey[850], + // unselectedItemColor: Color(0xffBD935C), + // type: BottomNavigationBarType.fixed, + // onTap: (index) { + // _homeProvider.currentIndex = index; + // }, + // currentIndex: _homeProvider.currentIndex, + // items: [ + // BottomNavigationBarItem( + // icon: Image.asset('assets/block-space-disabled.png', height: 26), + // activeIcon: Image.asset('assets/blockchain.png', height: 26), + // label: 'Explorateur', + // ), + // BottomNavigationBarItem( + // icon: Icon(Icons.lock), + // label: 'Mes portefeuilles', + // ), + // ], + // ), + ), + ), + ); } } diff --git a/lib/screens/myWallets/unlocking_wallet.dart b/lib/screens/myWallets/unlocking_wallet.dart index 64cb187..8980a49 100644 --- a/lib/screens/myWallets/unlocking_wallet.dart +++ b/lib/screens/myWallets/unlocking_wallet.dart @@ -52,14 +52,13 @@ class UnlockingWallet extends StatelessWidget { // backgroundColor: Colors.brown[600], body: SafeArea( child: Column(children: [ - const SizedBox(height: 20), Expanded( child: Column(children: [ - const SizedBox(height: 50), + SizedBox(height: isTall ? 80 : 20), Row(mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset( 'assets/chests/${currentChest.imageName}', - height: 150, + height: 120 * ratio, ), const SizedBox(width: 5), SizedBox( @@ -73,7 +72,7 @@ class UnlockingWallet extends StatelessWidget { fontWeight: FontWeight.w700), )), ]), - const SizedBox(height: 50), + SizedBox(height: 30 * ratio), const SizedBox( width: 400, child: Text( @@ -83,9 +82,9 @@ class UnlockingWallet extends StatelessWidget { color: Colors.black, fontWeight: FontWeight.w400), )), - const SizedBox(height: 50), + SizedBox(height: 40 * ratio), pinForm(context, _pinLenght), - const SizedBox(height: 5), + SizedBox(height: 3 * ratio), InkWell( key: const Key('chooseChest'), onTap: () { @@ -127,7 +126,7 @@ class UnlockingWallet extends StatelessWidget { return Form( key: formKey, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 30), + padding: EdgeInsets.symmetric(vertical: 5 * ratio, horizontal: 30), child: PinCodeTextField( autoFocus: true, appContext: context, @@ -151,7 +150,7 @@ class UnlockingWallet extends StatelessWidget { borderWidth: 4, shape: PinCodeFieldShape.box, borderRadius: BorderRadius.circular(5), - fieldHeight: 60, + fieldHeight: 50 * ratio, fieldWidth: 50, activeFillColor: hasError ? Colors.blueAccent : Colors.black, ),