WIP: Use slideshow for onboadring

lib/globals.dart

@@ -29,6 +29,8 @@ String cesiumPod = "https://g1.data.presles.fr";
 // Responsive ratios
 late bool isTall;
 late double ratio;
+late double screenWidth;
+late double screenHeight;
 
 // Logger
 var log = Logger();
@@ -37,7 +39,7 @@ var log = Logger();
 Color orangeC = const Color(0xffd07316);
 Color yellowC = const Color(0xffFFD68E);
 Color floattingYellow = const Color(0xffEFEFBF);
-Color backgroundColor = const Color(0xFFF5F5F5);
+Color backgroundColor = const Color(0xfff9f9f1);
 
 // Substrate settings
 const int ss58 = 42;

lib/screens/home.dart

@@ -10,6 +10,7 @@ import 'package:gecko/models/wallet_data.dart';
 import 'package:gecko/screens/myWallets/restore_chest.dart';
 import 'package:gecko/screens/myWallets/unlocking_wallet.dart';
 import 'package:gecko/screens/onBoarding/1.dart';
+import 'package:gecko/screens/onBoarding/onboarding.dart';
 import 'package:gecko/screens/search.dart';
 import 'package:gecko/screens/settings.dart';
 import 'package:flutter/services.dart';
@@ -30,6 +31,9 @@ class HomeScreen extends StatelessWidget {
 
     final bool isWalletsExists = _myWalletProvider.checkIfWalletExist();
 
+    screenWidth = MediaQuery.of(context).size.width;
+    screenHeight = MediaQuery.of(context).size.height;
+
     isTall = false;
     ratio = 1;
     if (MediaQuery.of(context).size.height >= 930) {
@@ -483,7 +487,7 @@ Widget welcomeHome(context) {
                         context,
                         MaterialPageRoute(
                           builder: (context) {
-                            return OnboardingStepOne();
+                            return const OnBoardingPage(); //OnBoardingPage(); //OnboardingStepOne();
                           },
                         ),
                       );

lib/screens/onBoarding/0_no_keychain_found.dart

@@ -3,7 +3,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';
 import 'package:gecko/globals.dart';
 import 'package:gecko/screens/common_elements.dart';
-import 'package:gecko/screens/onBoarding/1.dart';
+import 'package:gecko/screens/onBoarding/onboarding.dart';
 
 class NoKeyChainScreen extends StatelessWidget {
   const NoKeyChainScreen({Key? key}) : super(key: key);
@@ -39,7 +39,7 @@ class NoKeyChainScreen extends StatelessWidget {
                         Navigator.push(
                             context,
                             FaderTransition(
-                                page: OnboardingStepOne(), isFast: true));
+                                page: OnBoardingPage(), isFast: true));
                       }),
                 ),
               ),

lib/screens/onBoarding/1.dart

@@ -18,27 +18,17 @@ class OnboardingStepOne extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
-    ////TODO: Continue onbarding refactoring
+    CommonElements common = CommonElements();
 
     return Scaffold(
-        appBar: AppBar(
-          toolbarHeight: 60 * ratio,
-          title: const SizedBox(
-            height: 22,
-            child: Text(
-              'Nouveau portefeuille',
-              style: TextStyle(fontWeight: FontWeight.w600),
-            ),
-          ),
-        ),
         extendBodyBehindAppBar: true,
         body: SafeArea(
           child: Column(children: <Widget>[
-            // common.onboardingProgressBar(
-            //     context, 'Nouveau portefeuilles', progress),
-            // common.bubbleSpeak(
-            //     "Il semblerait que vous n’ayez pas encore de coffre.\n\nUn coffre vous permet de gérer un ou plusieurs portefeuilles.",
-            //     textKey: const Key('step1')),
+            common.onboardingProgressBar(
+                context, 'Nouveau portefeuilles', progress),
+            common.bubbleSpeak(
+                "Il semblerait que vous n’ayez pas encore de coffre.\n\nUn coffre vous permet de gérer un ou plusieurs portefeuilles.",
+                textKey: const Key('step1')),
             const SizedBox(height: 90),
             Image.asset(
               'assets/onBoarding/fabrication-de-portefeuille.png',

lib/screens/onBoarding/7.dart

@@ -21,7 +21,7 @@ class OnboardingStepNine extends StatelessWidget {
   Widget build(BuildContext context) {
     SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
     GenerateWalletsProvider _generateWalletProvider =
-        Provider.of<GenerateWalletsProvider>(context);
+        Provider.of<GenerateWalletsProvider>(context, listen: false);
     MyWalletsProvider _myWalletProvider =
         Provider.of<MyWalletsProvider>(context);
     CommonElements common = CommonElements();
@@ -75,7 +75,9 @@ class OnboardingStepNine extends StatelessWidget {
                       },
                       child: const Text("Choisir une autre phrase",
                           style: TextStyle(fontSize: 20))),
-                    ))),
+                ),
+              ),
+            ),
             const SizedBox(height: 25),
             SizedBox(
               width: 400,
@@ -135,12 +137,12 @@ Widget sentanceArray(BuildContext context) {
   // ];
 
   return Padding(
-    padding: const EdgeInsets.symmetric(horizontal: 12),
+    padding: const EdgeInsets.symmetric(horizontal: 3),
     child: Container(
       constraints: const BoxConstraints(maxWidth: 450),
       decoration: BoxDecoration(
           border: Border.all(color: Colors.black),
-          color: Colors.grey[300],
+          color: const Color(0xffeeeedd),
           borderRadius: const BorderRadius.all(
             Radius.circular(10),
           )),
@@ -186,17 +188,16 @@ Widget sentanceArray(BuildContext context) {
 
 Widget arrayCell(dataWord) {
   return SizedBox(
-    width: 102,
+    width: 100,
     child: Column(children: <Widget>[
       Text(
         dataWord.split(':')[0],
-        style: const TextStyle(fontSize: 14),
+        style: const TextStyle(fontSize: 15, color: Color(0xff6b6b52)),
       ),
-      const SizedBox(height: 2),
       Text(
         dataWord.split(':')[1],
         key: Key('word${dataWord.split(':')[0]}'),
-        style: const TextStyle(fontSize: 19, color: Colors.black),
+        style: const TextStyle(fontSize: 20, color: Colors.black),
       ),
     ]),
   );

lib/screens/onBoarding/onboarding.dart

+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+import 'package:gecko/globals.dart';
+import 'package:gecko/providers/generate_wallets.dart';
+import 'package:introduction_screen/introduction_screen.dart';
+import 'package:provider/provider.dart';
+
+import '7.dart';
+
+class OnBoardingPage extends StatefulWidget {
+  const OnBoardingPage({Key? key}) : super(key: key);
+
+  @override
+  _OnBoardingPageState createState() => _OnBoardingPageState();
+}
+
+class _OnBoardingPageState extends State<OnBoardingPage> {
+  final introKey = GlobalKey<IntroductionScreenState>();
+  bool isFreeze = false;
+
+  void _onIntroEnd(context) {
+    Navigator.of(context).push(
+      MaterialPageRoute(builder: (_) => HomePage()),
+    );
+  }
+
+  Widget _buildImage(String assetName, [double width = 350]) {
+    return Container(
+        padding: const EdgeInsets.all(0),
+        width: 440,
+        decoration: BoxDecoration(
+            gradient: const LinearGradient(
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+              colors: [
+                Color(0xffd2d4cf),
+                Color(0xffeaeae7),
+              ],
+            ),
+            border: Border.all(color: Colors.grey[900]!)),
+        child: Image.asset('assets/onBoarding/$assetName', width: width));
+  }
+
+  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: Text(
+        text,
+        style: TextStyle(fontSize: size),
+      ),
+    );
+  }
+
+  Widget _nextButton() {
+    return SizedBox(
+      width: 410,
+      height: 70,
+      child: ElevatedButton(
+        style: ElevatedButton.styleFrom(
+          elevation: 4,
+          primary: orangeC, // background
+          onPrimary: Colors.white, // foreground
+        ),
+        onPressed: () {
+          introKey.currentState?.next();
+        },
+        child: const Text(
+          'Continuer',
+          style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    GenerateWalletsProvider _generateWalletProvider =
+        Provider.of<GenerateWalletsProvider>(context, listen: false);
+    const bodyStyle = TextStyle(fontSize: 19.0);
+    var pageDecoration = PageDecoration(
+      titleTextStyle:
+          const TextStyle(fontSize: 28.0, fontWeight: FontWeight.w700),
+      bodyTextStyle: bodyStyle,
+      bodyPadding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
+      pageColor: backgroundColor,
+      imagePadding: EdgeInsets.zero,
+    );
+
+    log.d(introKey.currentState?.controller.page);
+
+    return IntroductionScreen(
+      controlsPosition: const Position(left: 0, right: 0, bottom: 0),
+      freeze: false,
+      isProgressTap: false,
+      isTopSafeArea: false,
+      isBottomSafeArea: true,
+      key: introKey,
+      globalBackgroundColor: backgroundColor,
+      globalFooter:
+          SizedBox(width: double.infinity, height: 60, child: _nextButton()),
+      pages: [
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Gecko fabrique votre portefeuille à partir d’une phrase de restauration. Elle un peu le comme un plan qui permet de construire votre portefeuille.'),
+              _buildImage('fabrication-de-portefeuille.png'),
+              // const SizedBox(height: 40),
+              // _nextButton()
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Conservez cette phrase précieusement, car sans elle Gecko ne pourra pas reconstruire vos portefeuilles le jour où vous changez de téléphone.'),
+              _buildImage(
+                  'fabrication-de-portefeuille-impossible-sans-phrase.png')
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Dans une blockchain, pas de procédure de récupération par mail. Seule votre phrase de restauration peut vous permettre de récupérer vos Ğ1 à tout moment.'),
+              _buildImage('mot-de-passe-oublie.png')
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Il est temps de vous munir d’un d’un papier et d’un crayon afin de pouvoir noter votre phrase de restauration.'),
+              _buildImage('gecko-oublie-aussi.png')
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Gecko a généré votre phrase de restauration ! Tâchez de la garder bien secrète, car elle permet à quiconque la connaît d’accéder à tous vos portefeuilles.'),
+              const SizedBox(height: 40),
+              sentanceArray(context),
+              const SizedBox(height: 20),
+              GestureDetector(
+                onTap: () {
+                  Navigator.push(
+                    context,
+                    MaterialPageRoute(builder: (context) {
+                      return PrintWallet(
+                          _generateWalletProvider.generatedMnemonic);
+                    }),
+                  );
+                },
+                child: Image.asset(
+                  'assets/printer.png',
+                  height: 35,
+                ),
+              ),
+              const SizedBox(height: 40),
+              // const Spacer(),
+              SizedBox(
+                width: 400,
+                height: 62,
+                child: ElevatedButton(
+                    key: const Key('generateMnemonic'),
+                    style: ElevatedButton.styleFrom(
+                      elevation: 5,
+                      primary: const Color(0xffFFD58D),
+                      onPrimary: Colors.black, // foreground
+                    ),
+                    onPressed: () {
+                      _generateWalletProvider.reloadBuild();
+                      // setState(() {});
+                    },
+                    child: const Text("Choisir une autre phrase",
+                        style: TextStyle(
+                            fontSize: 21, fontWeight: FontWeight.w600))),
+              ),
+              // const Spacer(),
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        PageViewModel(
+          title: '',
+          body: '',
+          footer: Column(
+            children: [
+              _buildText(
+                  'Gecko fabrique votre portefeuille à partir d’une phrase de restauration. Elle un peu le comme un plan qui permet de construire votre portefeuille.'),
+              _buildImage('fabrication-de-portefeuille.png'),
+              const SizedBox(height: 25),
+            ],
+          ),
+          decoration: pageDecoration,
+        ),
+        // PageViewModel(
+        //   title: "Another title page",
+        //   body: "Another beautiful body text for this example onboarding",
+        //   image: _buildImage('keys-and-wallets-horizontal-plus-phrase.png'),
+        //   footer: ElevatedButton(
+        //     onPressed: () {
+        //       introKey.currentState?.animateScroll(0);
+        //     },
+        //     child: const Text(
+        //       'FooButton',
+        //       style: TextStyle(color: Colors.white),
+        //     ),
+        //     style: ElevatedButton.styleFrom(
+        //       primary: Colors.lightBlue,
+        //       shape: RoundedRectangleBorder(
+        //         borderRadius: BorderRadius.circular(8.0),
+        //       ),
+        //     ),
+        //   ),
+        //   decoration: pageDecoration,
+        // ),
+        // PageViewModel(
+        //   title: "Title of last page - reversed",
+        //   bodyWidget: Row(
+        //     mainAxisAlignment: MainAxisAlignment.center,
+        //     children: const [
+        //       Text("Click on ", style: bodyStyle),
+        //       Icon(Icons.edit),
+        //       Text(" to edit a post", style: bodyStyle),
+        //     ],
+        //   ),
+        //   decoration: pageDecoration.copyWith(
+        //     bodyFlex: 2,
+        //     imageFlex: 4,
+        //     bodyAlignment: Alignment.bottomCenter,
+        //     imageAlignment: Alignment.topCenter,
+        //   ),
+        //   image: _buildImage('keys-and-wallets-horizontal-plus-phrase.png'),
+        //   reverse: true,
+        // ),
+      ],
+      onDone: () => _onIntroEnd(context),
+      onChange: (i) => setState(() {}),
+      //onSkip: () => _onIntroEnd(context), // You can override onSkip callback
+      showSkipButton: false,
+      skipOrBackFlex: 0,
+      nextFlex: 0,
+      showBackButton: false,
+      skip: const Text('Skip', style: TextStyle(fontWeight: FontWeight.w600)),
+      showNextButton: false,
+      // next: Icon(
+      //   Icons.arrow_forward_ios,
+      //   color: orangeC,
+      //   size: 40,
+      // ),
+      done: const Text('Done', style: TextStyle(fontWeight: FontWeight.w600)),
+      curve: Curves.fastLinearToSlowEaseIn,
+      controlsMargin: const EdgeInsets.all(0),
+      controlsPadding: kIsWeb
+          ? const EdgeInsets.all(12.0)
+          : const EdgeInsets.fromLTRB(0, 0.0, 0.0, 50),
+      dotsDecorator: DotsDecorator(
+        size: const Size(10.0, 10.0),
+        color: Colors.grey[400]!,
+        activeColor: orangeC,
+        activeSize: const Size(22.0, 10.0),
+        activeShape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(25.0)),
+        ),
+      ),
+      dotsContainerDecorator: const ShapeDecoration(
+        color: Colors.transparent,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(8.0)),
+        ),
+      ),
+    );
+  }
+}
+
+class HomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Home')),
+      body: const Center(child: Text("This is the screen after Introduction")),
+    );
+  }
+}

pubspec.lock

@@ -295,6 +295,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "4.0.6"
+  dots_indicator:
+    dependency: transitive
+    description:
+      name: dots_indicator
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
   durt:
     dependency: "direct main"
     description:
@@ -642,6 +649,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.17.0"
+  introduction_screen:
+    dependency: "direct main"
+    description:
+      name: introduction_screen
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "3.0.2"
   io:
     dependency: transitive
     description:

pubspec.yaml

@@ -79,6 +79,7 @@ dependencies:
     git:
       url: https://github.com/poka-IT/sdk.git
       ref: fixAndroidActivityVersion
+  introduction_screen: ^3.0.2
 
 dev_dependencies:
   # flutter_launcher_icons: ^0.9.2