replace Multiple TextSpan for bold words by Markdown widget in onboarding

This commit is contained in:
poka 2022-06-17 21:34:47 +02:00
parent ad1a517553
commit 65f6f0a237
18 changed files with 96 additions and 153 deletions

View File

@ -49,7 +49,9 @@
"validate": "Validate",
"confirm": "Confirm",
"confirmPayment": "Confirm payment",
"clickHereToConfirmIdentity": "Click here to confirm\nyour new identity"
"clickHereToConfirmIdentity": "Click here to confirm\nyour new identity",
"geckoGenerateYourWalletFromMnemonic": "Gecko builds your wallet from a **restoration sentence**. It is a bit like the blueprint that builds your wallet.",
"keepThisMnemonicSecure": "Keep this sentence carefully, because without it Gecko will not be able to rebuild your wallets the day you change your phone."
}

View File

@ -50,6 +50,7 @@
"validate": "Valider",
"confirm": "Confirmer",
"confirmPayment": "Confirmer le paiement",
"clickHereToConfirmIdentity": "Cliquez ici pour confirmer\nvotre nouvelle identité"
"clickHereToConfirmIdentity": "Cliquez ici pour confirmer\nvotre nouvelle identité",
"geckoGenerateYourWalletFromMnemonic": "Gecko fabrique votre portefeuille à partir dune **phrase de restauration**. Elle est un peu comme le plan qui permet de construire votre portefeuille.",
"keepThisMnemonicSecure": "Conservez cette phrase précieusement, car sans elle Gecko ne pourra pas reconstruire vos portefeuilles le jour où vous changez de téléphone."
}

View File

@ -1,5 +1,6 @@
import 'package:dots_indicator/dots_indicator.dart';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:gecko/globals.dart';
import 'package:gecko/providers/substrate_sdk.dart';
import 'package:provider/provider.dart';
@ -29,25 +30,50 @@ class CommonElements {
child: Image.asset('assets/onBoarding/$assetName', width: imageWidth));
}
Widget buildText(List<TextSpan> text, [double size = 20]) {
Widget buildText(String text, [double size = 20]) {
return Container(
padding: const EdgeInsets.all(12),
width: 440,
decoration: BoxDecoration(
color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
child: RichText(
textAlign: TextAlign.justify,
text: TextSpan(
child: Text(text,
textAlign: TextAlign.justify,
style: TextStyle(
fontSize: isTall ? size : size * 0.9,
color: Colors.black,
letterSpacing: 0.3),
children: text,
),
),
letterSpacing: 0.3)),
);
}
Widget buildTextMd(String text, [double size = 20]) {
final style = MarkdownStyleSheet(
p: TextStyle(
fontSize: isTall ? size : size * 0.9,
color: Colors.black,
letterSpacing: 0.3),
textAlign: WrapAlignment.spaceBetween,
);
return Container(
padding: const EdgeInsets.all(12),
width: 440,
decoration: BoxDecoration(
color: Colors.white, border: Border.all(color: Colors.grey[900]!)),
child: MarkdownBody(data: text, styleSheet: style));
// RichText(
// textAlign: TextAlign.justify,
// text: TextSpan(
// style: TextStyle(
// fontSize: isTall ? size : size * 0.9,
// color: Colors.black,
// letterSpacing: 0.3),
// children: text,
// ),
// ),
// );
}
Widget nextButton(
BuildContext context, String text, nextScreen, bool isFast) {
return SizedBox(
@ -85,11 +111,12 @@ class CommonElements {
Widget infoIntro(
BuildContext context,
List<TextSpan> text,
String text,
String assetName,
String buttonText,
nextScreen,
double pagePosition, {
String? textMd,
bool isFast = false,
double boxHeight = 440,
double imageWidth = 350,
@ -100,7 +127,11 @@ class CommonElements {
buildProgressBar(pagePosition),
SizedBox(height: isTall ? 40 : 20),
buildText(text, textSize),
if (textMd == null)
buildText(text, textSize)
else
buildTextMd(textMd, textSize),
buildImage(assetName, boxHeight, imageWidth),
Expanded(
child: Align(

View File

@ -1,6 +1,7 @@
import 'package:bubble/bubble.dart';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:gecko/globals.dart';
import 'package:gecko/models/stateful_wrapper.dart';
import 'package:gecko/providers/chest_provider.dart';

View File

@ -66,12 +66,7 @@ class ShowSeed extends StatelessWidget {
children: [
Column(children: [
common.buildText(
<TextSpan>[
const TextSpan(
text:
'Tâchez de garder cette phrase bien secrète, car elle permet à quiconque la connaît daccéder à tous vos portefeuilles.'),
],
),
'Tâchez de garder cette phrase bien secrète, car elle permet à quiconque la connaît daccéder à tous vos portefeuilles.'),
SizedBox(height: 35 * ratio),
sentanceArray(context, _seed.data!.split(' ')),
const SizedBox(height: 20),

View File

@ -1,6 +1,8 @@
// ignore_for_file: file_names
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:gecko/globals.dart';
import 'package:gecko/screens/common_elements.dart';
import 'package:gecko/screens/onBoarding/2.dart';
@ -27,21 +29,14 @@ class OnboardingStepOne extends StatelessWidget {
extendBodyBehindAppBar: true,
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
const TextSpan(
text: 'Gecko fabrique votre portefeuille à partir dune '),
const TextSpan(
text: 'phrase de restauration',
style: TextStyle(fontWeight: FontWeight.bold)),
const TextSpan(
text:
'. Elle est un peu comme le plan qui permet de construire votre portefeuille.'),
],
'fabrication-de-portefeuille.png',
'>',
const OnboardingStepTwo(),
0),
context,
'',
'fabrication-de-portefeuille.png',
'>',
const OnboardingStepTwo(),
0,
textMd: 'geckoGenerateYourWalletFromMnemonic'.tr(),
),
),
);
}

View File

@ -53,12 +53,8 @@ class OnboardingStepTen extends StatelessWidget {
SizedBox(height: isTall ? 40 : 20),
common.buildProgressBar(9),
SizedBox(height: isTall ? 40 : 20),
common.buildText(<TextSpan>[
TextSpan(
text:
"Gecko va vérifier avec vous si vous avez bien mémorisé votre code secret.\n\nTapez votre code secret dans le champ ci-dessous pour vérifier que vous lavez bien noté.",
style: TextStyle(fontSize: 16 * ratio))
]),
common.buildText(
"Gecko va vérifier avec vous si vous avez bien mémorisé votre code secret.\n\nTapez votre code secret dans le champ ci-dessous pour vérifier que vous lavez bien noté."),
SizedBox(height: isTall ? 80 : 20),
Visibility(
visible: _generateWalletProvider.scanedWalletNumber != -1,

View File

@ -32,12 +32,8 @@ class OnboardingStepEleven extends StatelessWidget {
body: SafeArea(
child: Column(children: <Widget>[
const SizedBox(height: 40),
common.buildText(<TextSpan>[
const TextSpan(
text:
"Top !\n\nVotre coffre votre premier portefeuille ont été créés avec un immense succès.\n\nFélicitations !",
)
]),
common.buildText(
"Top !\n\nVotre coffre votre premier portefeuille ont été créés avec un immense succès.\n\nFélicitations !"),
SizedBox(height: isTall ? 20 : 10),
Image.asset(
'assets/onBoarding/gecko-clin.gif',

View File

@ -1,5 +1,6 @@
// ignore_for_file: file_names
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:gecko/globals.dart';
@ -30,11 +31,7 @@ class OnboardingStepTwo extends StatelessWidget {
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
const TextSpan(
text:
'Conservez cette phrase précieusement, car sans elle Gecko ne pourra pas reconstruire vos portefeuilles le jour où vous changez de téléphone.'),
],
'keepThisMnemonicSecure'.tr(),
'fabrication-de-portefeuille-impossible-sans-phrase.png',
'>',
const OnboardingStepThree(),

View File

@ -29,15 +29,8 @@ class OnboardingStepThree extends StatelessWidget {
),
extendBodyBehindAppBar: true,
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
TextSpan(text: 'warningForgotPassword'.tr()),
],
'forgot_password.png'.tr(),
'>',
const OnboardingStepFor(),
2),
child: common.infoIntro(context, 'warningForgotPassword'.tr(),
'forgot_password.png'.tr(), '>', const OnboardingStepFor(), 2),
),
);
}

View File

@ -28,20 +28,10 @@ class OnboardingStepFor extends StatelessWidget {
),
extendBodyBehindAppBar: true,
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
const TextSpan(text: 'Il est temps de vous munir d'),
const TextSpan(
text: 'un dun papier et dun crayon',
style: TextStyle(fontWeight: FontWeight.bold)),
const TextSpan(
text: ' afin de pouvoir noter votre phrase de restauration.'),
],
'gecko-oublie-aussi.png',
'>',
const OnboardingStepFive(),
3),
child: common.infoIntro(context, '', 'gecko-oublie-aussi.png', '>',
const OnboardingStepFive(), 3,
textMd:
'Il est temps de vous munir d**un papier et dun crayon** afin de pouvoir noter votre phrase de restauration.'),
),
);
}

View File

@ -53,12 +53,7 @@ class _ChooseChestState extends State<OnboardingStepFive> {
common.buildProgressBar(4),
SizedBox(height: isTall ? 40 : 20),
common.buildText(
<TextSpan>[
const TextSpan(
text:
'Gecko a généré votre phrase de restauration ! Tâchez de la garder bien secrète, car elle permet à quiconque la connaît daccéder à tous vos portefeuilles.'),
],
),
'Gecko a généré votre phrase de restauration ! Tâchez de la garder bien secrète, car elle permet à quiconque la connaît daccéder à tous vos portefeuilles.'),
SizedBox(height: 35 * ratio),
sentanceArray(context),
SizedBox(height: 17 * ratio),

View File

@ -56,20 +56,8 @@ class OnboardingStepSix extends StatelessWidget {
SizedBox(height: isTall ? 40 : 20),
common.buildProgressBar(5),
SizedBox(height: isTall ? 40 : 20),
common.buildText(
<TextSpan>[
TextSpan(
text:
"Avez-vous bien noté votre phrase de restauration ?\n\nPour en être sûr, veuillez taper dans le champ ci-dessous le ",
style: TextStyle(fontSize: 16 * ratio)),
TextSpan(
text: '${_generateWalletProvider.nbrWord + 1}ème mot',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 16 * ratio)),
TextSpan(
text: " de votre phrase de restauration :",
style: TextStyle(fontSize: 16 * ratio)),
],
common.buildTextMd(
"Avez-vous bien noté votre phrase de restauration ?\n\nPour en être sûr, veuillez taper dans le champ ci-dessous le **${_generateWalletProvider.nbrWord + 1}ème mot** de votre phrase de restauration :",
),
SizedBox(height: isTall ? 70 : 20),
Text('${_generateWalletProvider.nbrWord + 1}',

View File

@ -30,11 +30,7 @@ class OnboardingStepSeven extends StatelessWidget {
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
const TextSpan(
text:
'Gecko va maintenant générer pour vous un code secret court qui vous permettra daccéder rapidement à vos portefeuilles, sans avoir à taper votre phrase de restauration à chaque fois.'),
],
'Gecko va maintenant générer pour vous un code secret court qui vous permettra daccéder rapidement à vos portefeuilles, sans avoir à taper votre phrase de restauration à chaque fois.',
'coffre-fort-code-secret-dans-telephone.png',
'>',
OnboardingStepEight(scanDerivation: scanDerivation),

View File

@ -30,21 +30,13 @@ class OnboardingStepEight extends StatelessWidget {
body: SafeArea(
child: common.infoIntro(
context,
<TextSpan>[
const TextSpan(
text:
'Ce code secret protège vos portefeuilles dans un coffre-fort '),
const TextSpan(
text: 'dont vous seul possédez le code',
style: TextStyle(fontWeight: FontWeight.bold)),
const TextSpan(
text:
', de sorte que vos portefeuilles seront inutilisables par dautres.'),
],
'',
'coffre-fort-protege-les-portefeuilles.png',
'>',
OnboardingStepNine(scanDerivation: scanDerivation),
7),
7,
textMd:
'Ce code secret protège vos portefeuilles dans un coffre-fort **dont vous seul possédez le code**, de sorte que vos portefeuilles seront inutilisables par dautres.'),
),
);
}

View File

@ -44,19 +44,8 @@ class OnboardingStepNine extends StatelessWidget {
SizedBox(height: isTall ? 40 : 20),
common.buildProgressBar(8),
SizedBox(height: isTall ? 40 : 20),
common.buildText(
<TextSpan>[
const TextSpan(
text:
"Et voilà votre code secret !\n\nMémorisez-le ou notez-le, car il vous sera demandé "),
const TextSpan(
text: 'à chaque fois',
style: TextStyle(fontWeight: FontWeight.bold)),
const TextSpan(
text:
" que vous voudrez effectuer un paiement sur cet appareil."),
],
),
common.buildTextMd(
"Et voilà votre code secret !\n\nMémorisez-le ou notez-le, car il vous sera demandé **à chaque fois** que vous voudrez effectuer un paiement sur cet appareil."),
const SizedBox(height: 100),
Stack(
alignment: Alignment.centerRight,

View File

@ -274,13 +274,6 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.1"
csslib:
dependency: transitive
description:
name: csslib
url: "https://pub.dartlang.org"
source: hosted
version: "0.17.2"
dart_style:
dependency: transitive
description:
@ -396,13 +389,6 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "0.18.4"
flutter_html:
dependency: "direct main"
description:
name: flutter_html
url: "https://pub.dartlang.org"
source: hosted
version: "3.0.0-alpha.5"
flutter_inappwebview:
dependency: transitive
description:
@ -429,6 +415,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.6"
flutter_markdown:
dependency: "direct main"
description:
name: flutter_markdown
url: "https://pub.dartlang.org"
source: hosted
version: "0.6.10+2"
flutter_plugin_android_lifecycle:
dependency: transitive
description:
@ -584,13 +577,6 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.3"
html:
dependency: transitive
description:
name: html
url: "https://pub.dartlang.org"
source: hosted
version: "0.15.0"
http:
dependency: "direct main"
description:
@ -778,6 +764,13 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.2"
markdown:
dependency: transitive
description:
name: markdown
url: "https://pub.dartlang.org"
source: hosted
version: "5.0.0"
matcher:
dependency: transitive
description:
@ -848,13 +841,6 @@ packages:
url: "https://pub.dartlang.org"
source: hosted
version: "0.6.0+1"
numerus:
dependency: transitive
description:
name: numerus
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.1"
package_config:
dependency: transitive
description:

View File

@ -73,7 +73,7 @@ dependencies:
connectivity_plus: ^2.3.3
image_cropper: ^2.0.3
easy_localization: ^3.0.1
flutter_html: ^3.0.0-alpha.5
flutter_markdown: ^0.6.10+2
dev_dependencies:
# flutter_launcher_icons: ^0.9.2