Implement welcome home screen; improve assets quality

This commit is contained in:
poka 2021-11-21 01:50:05 +01:00
parent c0c82734f4
commit eceb2e3253
10 changed files with 446 additions and 285 deletions

BIN
assets/home/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 16 MiB

BIN
assets/home/bout_de_bulle.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 630 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 124 KiB

BIN
assets/home/loupe.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
assets/home/qrcode.png Executable file → Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 11 KiB

View File

@ -23,7 +23,6 @@ class HistoryProvider with ChangeNotifier {
HistoryProvider(this.pubkey); HistoryProvider(this.pubkey);
final TextEditingController outputPubkey = TextEditingController(); final TextEditingController outputPubkey = TextEditingController();
List transBC; List transBC;
bool isFirstBuild = true;
String fetchMoreCursor; String fetchMoreCursor;
Map pageInfo; Map pageInfo;
bool isHistoryScreen = false; bool isHistoryScreen = false;
@ -232,22 +231,6 @@ class HistoryProvider with ChangeNotifier {
return opts; return opts;
} }
void snackNode(context) {
if (isFirstBuild) {
String _message;
if (endPointGVA == 'HS') {
_message =
"Aucun noeud Duniter disponible, veuillez réessayer ultérieurement";
} else {
_message = "Vous êtes connecté au noeud\n${endPointGVA.split('/')[2]}";
}
final snackBar = SnackBar(
content: Text(_message), duration: const Duration(seconds: 2));
isFirstBuild = false;
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
}
void resetdHistory() { void resetdHistory() {
outputPubkey.text = ''; outputPubkey.text = '';
notifyListeners(); notifyListeners();

View File

@ -22,6 +22,7 @@ class HomeProvider with ChangeNotifier {
Text('Explorateur', style: TextStyle(color: Colors.grey[850])); Text('Explorateur', style: TextStyle(color: Colors.grey[850]));
List currentTab = [HistoryScreen(), WalletsHome()]; List currentTab = [HistoryScreen(), WalletsHome()];
bool isFirstBuild = true;
// AudioCache player = AudioCache(prefix: 'sounds/'); // AudioCache player = AudioCache(prefix: 'sounds/');
get currentIndex => _currentIndex; get currentIndex => _currentIndex;
@ -139,6 +140,22 @@ class HomeProvider with ChangeNotifier {
notifyListeners(); notifyListeners();
} }
void snackNode(context) {
if (isFirstBuild) {
String _message;
if (endPointGVA == 'HS') {
_message =
"Aucun noeud Duniter disponible, veuillez réessayer ultérieurement";
} else {
_message = "Vous êtes connecté au noeud\n${endPointGVA.split('/')[2]}";
}
final snackBar = SnackBar(
content: Text(_message), duration: const Duration(seconds: 2));
isFirstBuild = false;
ScaffoldMessenger.of(context).showSnackBar(snackBar);
}
}
void rebuildWidget() { void rebuildWidget() {
notifyListeners(); notifyListeners();
} }

View File

@ -1,12 +1,14 @@
import 'package:bubble/bubble.dart';
import 'package:dubp/dubp.dart'; import 'package:dubp/dubp.dart';
import 'package:gecko/globals.dart'; import 'package:gecko/globals.dart';
import 'package:gecko/models/chest_provider.dart'; import 'package:gecko/models/chest_provider.dart';
import 'package:gecko/models/history.dart'; import 'package:gecko/models/history.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:gecko/models/home.dart';
import 'package:gecko/models/my_wallets.dart'; import 'package:gecko/models/my_wallets.dart';
import 'package:gecko/models/wallet_data.dart'; import 'package:gecko/models/wallet_data.dart';
import 'package:gecko/screens/myWallets/unlocking_wallet.dart'; import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
import 'package:gecko/screens/onBoarding/0_no_keychain_found.dart'; import 'package:gecko/screens/onBoarding/1.dart';
import 'dart:ui'; import 'dart:ui';
import 'package:gecko/screens/settings.dart'; import 'package:gecko/screens/settings.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
@ -19,16 +21,13 @@ class HomeScreen extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
// HomeProvider _homeProvider = Provider.of<HomeProvider>(context); // HomeProvider _homeProvider = Provider.of<HomeProvider>(context);
HistoryProvider _historyProvider = Provider.of<HistoryProvider>(context);
HistoryProvider _historyStatic = HistoryProvider('');
MyWalletsProvider _myWalletProvider = MyWalletsProvider _myWalletProvider =
Provider.of<MyWalletsProvider>(context); Provider.of<MyWalletsProvider>(context);
Provider.of<ChestProvider>(context); Provider.of<ChestProvider>(context);
HomeProvider homeClass = HomeProvider();
final bool isWalletsExists = _myWalletProvider.checkIfWalletExist(); final bool isWalletsExists = _myWalletProvider.checkIfWalletExist();
final double statusBarHeight = MediaQuery.of(context).padding.top;
isTall = false; isTall = false;
ratio = 1; ratio = 1;
if (MediaQuery.of(context).size.height >= 930) { if (MediaQuery.of(context).size.height >= 930) {
@ -84,269 +83,424 @@ class HomeScreen extends StatelessWidget {
backgroundColor: const Color(0xffF9F9F1), backgroundColor: const Color(0xffF9F9F1),
body: Builder( body: Builder(
builder: (ctx) => StatefulWrapper( builder: (ctx) => StatefulWrapper(
onInit: () { onInit: () {
WidgetsBinding.instance.addPostFrameCallback((_) { WidgetsBinding.instance.addPostFrameCallback((_) {
DubpRust.setup(); DubpRust.setup();
_historyStatic.snackNode(ctx); if (isWalletsExists) homeClass.snackNode(ctx);
}); });
}, },
child: Container( child: isWalletsExists ? geckHome(context) : welcomeHome(context)
decoration: const BoxDecoration( // bottomNavigationBar: BottomNavigationBar(
image: DecorationImage( // backgroundColor: backgroundColor,
image: AssetImage("assets/home/background.png"), // fixedColor: Colors.grey[850],
fit: BoxFit.cover, // unselectedItemColor: const 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',
// ),
// const BottomNavigationBarItem(
// icon: Icon(Icons.lock),
// label: 'Mes portefeuilles',
// ),
// ],
// ),
), ),
child: ),
Column(crossAxisAlignment: CrossAxisAlignment.start, children: < );
Widget>[ }
Stack(children: <Widget>[ }
Positioned(
top: statusBarHeight + 10,
left: 15,
child: Builder(
builder: (context) => IconButton(
key: const Key('drawerMenu'),
icon: const Icon(
Icons.menu,
color: Colors.white,
size: 35,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
),
),
const Align(
child: Image(
image: AssetImage('assets/home/header.png'), height: 210),
),
]),
Padding(
padding: EdgeInsets.only(top: 15 * ratio),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
"y'a pas de lézard ;-)",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w700,
shadows: <Shadow>[
Shadow(
offset: Offset(0, 0),
blurRadius: 20,
color: Colors.black,
),
Shadow(
offset: Offset(0, 0),
blurRadius: 20,
color: Colors.black,
),
],
),
)
]),
),
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.9),
],
),
),
child: Column(children: <Widget>[
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(children: <Widget>[
Container(
child: ClipOval(
child: Material(
color: orangeC, // button color
child: InkWell(
child: const Padding(
padding: EdgeInsets.all(18),
child: Image(
image: AssetImage(
'assets/home/loupe.png'),
height: 70)),
onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) {
// return TemplateScreen();
// }),
// );
}),
),
),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(1, 1.5),
spreadRadius: 0.5)
],
),
),
const SizedBox(height: 12),
const Text(
"Rechercher un\nportfeuille",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500),
)
]),
const SizedBox(width: 120),
Column(children: <Widget>[
Container(
child: ClipOval(
key: const Key('manageWallets'),
child: Material(
color: orangeC, // button color
child: InkWell(
child: const Padding(
padding: EdgeInsets.all(18),
child: Image(
image: AssetImage(
'assets/home/wallet.png'),
height: 75)),
onTap: () {
WalletData defaultWallet =
_myWalletProvider.getDefaultWallet(
configBox.get('currentChest'));
isWalletsExists
? Navigator.push(context,
MaterialPageRoute(
builder: (context) {
return UnlockingWallet(
wallet: defaultWallet,
action: "mywallets",
);
}))
// Navigator.pushNamed( Widget geckHome(context) {
// context, '/mywallets') MyWalletsProvider _myWalletProvider = Provider.of<MyWalletsProvider>(context);
: Navigator.push(context, Provider.of<ChestProvider>(context);
MaterialPageRoute(
builder: (context) { HistoryProvider _historyProvider = Provider.of<HistoryProvider>(context);
return const NoKeyChainScreen(); final double statusBarHeight = MediaQuery.of(context).padding.top;
})); return Container(
}), decoration: const BoxDecoration(
), image: DecorationImage(
), image: AssetImage("assets/home/background.jpg"),
decoration: const BoxDecoration( fit: BoxFit.cover,
shape: BoxShape.circle, ),
color: Colors.black, ),
boxShadow: [ child:
BoxShadow( Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
blurRadius: 2, Stack(children: <Widget>[
offset: Offset(1, 1.5), Positioned(
spreadRadius: 0.5) top: statusBarHeight + 10,
], left: 15,
), child: Builder(
), builder: (context) => IconButton(
const SizedBox(height: 12), key: const Key('drawerMenu'),
const Text( icon: const Icon(
"Gérer mes\nportefeuilles", Icons.menu,
textAlign: TextAlign.center, color: Colors.white,
style: TextStyle( size: 35,
color: Colors.white, ),
fontSize: 17, onPressed: () => Scaffold.of(context).openDrawer(),
fontWeight: FontWeight.w500), ),
) ),
]) ),
]), const Align(
Padding( child:
padding: const EdgeInsets.only(top: 40), Image(image: AssetImage('assets/home/header.png'), height: 210),
child: Row( ),
mainAxisAlignment: MainAxisAlignment.center, ]),
children: <Widget>[ Padding(
Column(children: <Widget>[ padding: EdgeInsets.only(top: 15 * ratio),
Container( child: Row(
child: ClipOval( mainAxisAlignment: MainAxisAlignment.center,
child: Material( children: const <Widget>[
color: orangeC, // button color Text(
child: InkWell( "y'a pas de lézard ;-)",
child: const Padding( textAlign: TextAlign.center,
padding: EdgeInsets.all(18), style: TextStyle(
child: Image( color: Colors.white,
image: AssetImage( fontSize: 24,
'assets/home/qrcode.png'), fontWeight: FontWeight.w700,
height: 75)), shadows: <Shadow>[
onTap: () async { Shadow(
await _historyProvider.scan(context); offset: Offset(0, 0),
}), blurRadius: 20,
), color: Colors.black,
),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(1, 1.5),
spreadRadius: 0.5)
],
),
),
const SizedBox(height: 12),
const Text(
"Scanner un\nQR code",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500),
)
])
]),
), ),
SizedBox(height: isTall ? 80 : 40) Shadow(
]), offset: Offset(0, 0),
blurRadius: 20,
color: Colors.black,
),
],
), ),
) )
]), ]),
),
Expanded(
flex: 1,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black.withOpacity(0.9),
],
),
),
child: Column(children: <Widget>[
const Spacer(),
Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
Column(children: <Widget>[
Container(
child: ClipOval(
child: Material(
color: orangeC, // button color
child: InkWell(
child: const Padding(
padding: EdgeInsets.all(18),
child: Image(
image: AssetImage('assets/home/loupe.png'),
height: 70)),
onTap: () {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (context) {
// return TemplateScreen();
// }),
// );
}),
),
),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(1, 1.5),
spreadRadius: 0.5)
],
),
),
const SizedBox(height: 12),
const Text(
"Rechercher un\nportfeuille",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500),
)
]),
const SizedBox(width: 120),
Column(children: <Widget>[
Container(
child: ClipOval(
key: const Key('manageWallets'),
child: Material(
color: orangeC, // button color
child: InkWell(
child: const Padding(
padding: EdgeInsets.all(18),
child: Image(
image: AssetImage('assets/home/wallet.png'),
height: 75)),
onTap: () {
WalletData defaultWallet =
_myWalletProvider.getDefaultWallet(
configBox.get('currentChest'));
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return UnlockingWallet(
wallet: defaultWallet,
action: "mywallets",
);
},
),
);
// Navigator.pushNamed(
// context, '/mywallets')));
}),
),
),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(1, 1.5),
spreadRadius: 0.5)
],
),
),
const SizedBox(height: 12),
const Text(
"Gérer mes\nportefeuilles",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500),
)
])
]),
Padding(
padding: const EdgeInsets.only(top: 40),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(children: <Widget>[
Container(
child: ClipOval(
child: Material(
color: orangeC, // button color
child: InkWell(
child: const Padding(
padding: EdgeInsets.all(18),
child: Image(
image: AssetImage(
'assets/home/qrcode.png'),
height: 75)),
onTap: () async {
await _historyProvider.scan(context);
}),
),
),
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
boxShadow: [
BoxShadow(
blurRadius: 2,
offset: Offset(1, 1.5),
spreadRadius: 0.5)
],
),
),
const SizedBox(height: 12),
const Text(
"Scanner un\nQR code",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w500),
)
])
]),
),
SizedBox(height: isTall ? 80 : 40)
]),
),
)
]),
);
}
Widget welcomeHome(context) {
final double statusBarHeight = MediaQuery.of(context).padding.top;
return Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/home/background.jpg"),
fit: BoxFit.cover,
),
),
child:
Column(crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[
Stack(children: <Widget>[
Positioned(
top: statusBarHeight + 10,
left: 15,
child: Builder(
builder: (context) => IconButton(
key: const Key('drawerMenu'),
icon: const Icon(
Icons.menu,
color: Colors.white,
size: 35,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
), ),
), ),
const Align(
child:
Image(image: AssetImage('assets/home/header.png'), height: 210),
),
]),
Padding(
padding: EdgeInsets.only(top: 1 * ratio),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text(
"Lapplication de paiement Ğ1\nplus rapide quun reptile du Vietnam",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.w700,
shadows: <Shadow>[
Shadow(
offset: Offset(0, 0),
blurRadius: 20,
color: Colors.black,
),
Shadow(
offset: Offset(0, 0),
blurRadius: 20,
color: Colors.black,
),
],
),
)
]),
), ),
// bottomNavigationBar: BottomNavigationBar( Expanded(
// backgroundColor: backgroundColor, flex: 1,
// fixedColor: Colors.grey[850], child: Container(
// unselectedItemColor: const Color(0xffBD935C), decoration: BoxDecoration(
// type: BottomNavigationBarType.fixed, gradient: LinearGradient(
// onTap: (index) { begin: Alignment.topCenter,
// _homeProvider.currentIndex = index; end: Alignment.bottomCenter,
// }, colors: [
// currentIndex: _homeProvider.currentIndex, Colors.transparent,
// items: [ Colors.black.withOpacity(0.9),
// BottomNavigationBarItem( ],
// icon: Image.asset('assets/block-space-disabled.png', height: 26), ),
// activeIcon: Image.asset('assets/blockchain.png', height: 26), ),
// label: 'Explorateur', child: Center(
// ), child: Column(children: <Widget>[
// const BottomNavigationBarItem( const Spacer(),
// icon: Icon(Icons.lock), Row(children: <Widget>[
// label: 'Mes portefeuilles', Expanded(
// ), child: Stack(children: <Widget>[
// ], const Padding(
// ), padding: EdgeInsets.only(top: 55),
); child: Image(
} image: AssetImage('assets/home/gecko-bienvenue.png'),
height: 220,
),
),
Positioned(
left: 180,
child: bubbleSpeak("y'a pas de lézard !"),
),
const Positioned(
left: 200,
top: 60,
child: Image(
image: AssetImage('assets/home/bout_de_bulle.png'),
),
),
]),
),
]),
SizedBox(
width: 410,
height: 70,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 4,
primary: orangeC, // background
onPrimary: Colors.white, // foreground
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return OnboardingStepOne();
},
),
);
},
child: const Text(
'Créer un portfeuille',
style:
TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
),
),
),
SizedBox(height: 25 * ratio),
SizedBox(
width: 410,
height: 70,
child: OutlinedButton(
style: OutlinedButton.styleFrom(
side: BorderSide(width: 4, color: orangeC)),
onPressed: () {
Navigator.push(context, null);
},
child: Text(
"Restaurer mes portefeuilles",
style: TextStyle(
fontSize: 24,
color: orangeC,
fontWeight: FontWeight.w600),
),
),
),
SizedBox(height: isTall ? 100 : 50)
]),
),
))
]),
);
} }
class StatefulWrapper extends StatefulWidget { class StatefulWrapper extends StatefulWidget {
@ -372,3 +526,19 @@ class _StatefulWrapperState extends State<StatefulWrapper> {
return widget.child; return widget.child;
} }
} }
Widget bubbleSpeak(String text, {double long, Key textKey}) {
return Bubble(
padding: long == null
? const BubbleEdges.all(20)
: BubbleEdges.symmetric(horizontal: long, vertical: 30),
elevation: 5,
color: Colors.white,
child: Text(
text,
key: textKey,
style: const TextStyle(
color: Colors.black, fontSize: 21, fontWeight: FontWeight.w400),
),
);
}