Improve responsive

This commit is contained in:
poka 2021-11-15 18:05:08 +01:00
parent 1b7c01bfe1
commit 6d69d039d1
2 changed files with 306 additions and 312 deletions

View File

@ -41,315 +41,310 @@ class HomeScreen extends StatelessWidget {
ratio = 1.125;
}
return Scaffold(
resizeToAvoidBottomInset: false,
drawer: Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(padding: EdgeInsets.zero, children: <Widget>[
DrawerHeader(
child: Column(children: const <Widget>[
SizedBox(height: 0),
resizeToAvoidBottomInset: false,
drawer: Drawer(
child: Column(
children: <Widget>[
Expanded(
child: ListView(padding: EdgeInsets.zero, children: <Widget>[
DrawerHeader(
child: Column(children: const <Widget>[
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: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
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: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
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 <Widget>[
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: <Widget>[
Column(children: <Widget>[
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: <Widget>[
Column(children: <Widget>[
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: <Widget>[
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 <Widget>[
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: <Widget>[
Column(children: <Widget>[
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: <Widget>[
Column(children: <Widget>[
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: <Widget>[
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',
// ),
// ],
// ),
),
),
);
}
}

View File

@ -52,14 +52,13 @@ class UnlockingWallet extends StatelessWidget {
// backgroundColor: Colors.brown[600],
body: SafeArea(
child: Column(children: <Widget>[
const SizedBox(height: 20),
Expanded(
child: Column(children: <Widget>[
const SizedBox(height: 50),
SizedBox(height: isTall ? 80 : 20),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
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,
),