Init

lib/widgets/components/link.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class Link extends StatelessWidget {
+  const Link({Key? key, required this.uri}) : super(key: key);
+
+  final String uri;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+        child: Text(uri,
+            style: const TextStyle(decoration: TextDecoration.underline)),
+        onTap: () {
+          launch(uri);
+        });
+  }
+}

lib/widgets/components/tutorials/step1.dart

@@ -0,0 +1,73 @@
+import 'package:desktopapp/widgets/components/link.dart';
+import 'package:flutter/material.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class Step1 extends StatelessWidget {
+  const Step1({Key? key}) : super(key: key);
+
+  Widget buildFieldDescription(String field, String description) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(field, style: const TextStyle(fontWeight: FontWeight.bold)),
+        const Text(' : '),
+        Text(description)
+      ],
+    );
+  }
+
+  Widget buildContent(BuildContext context) {
+    return Column(children: [
+      const Padding(
+        padding: EdgeInsets.symmetric(vertical: 20),
+        child: Text('Étape 1: Création de l\'application Streamlabs',
+            style: TextStyle(fontSize: 20)),
+      ),
+      const Text(
+          'Pour pouvoir utiliser l\'API de Streamlabs pour créer des évènements, il faut créer une application sur le site de Streamlabs.'),
+      const SizedBox(height: 20),
+      const Text(
+          'Pour créer une application, il faut remplir le formulaire accessible avec le lien ci-dessous:'),
+      const SizedBox(height: 10),
+      const Link(uri: 'https://streamlabs.com/dashboard/#/apps/register'),
+      const SizedBox(height: 20),
+      const Text(
+          'Pour créer une application, il faut remplir le formulaire du site avec les données ci-dessous:'),
+      const SizedBox(height: 10),
+      buildFieldDescription(
+          'Application Name', 'Vous pouvez mettre n\'importe quoi'),
+      buildFieldDescription(
+          'Application Description', 'Vous pouvez mettre n\'importe quoi'),
+      buildFieldDescription('Phone et Email', 'Doivent être valides'),
+      buildFieldDescription('Whitelist Users', 'le nom de la chaine twitch'),
+      buildFieldDescription(
+          'Redirect URI', 'Doit être \'http://localhost:1234/\''),
+      const SizedBox(height: 10),
+      const Text(
+          'Le lien servira pour récupérer automatiquement le code d\'accès. Donc s\'il est différent, les étapes suivantes ne fonctionneront pas.'),
+      const SizedBox(height: 20),
+      const Text(
+          'Maintenant vous appuyez sur le bouton Create en bas de la page et cliquez sur Étapes suivante.'),
+    ]);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Expanded(child: buildContent(context)),
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 20),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            children: [
+              // TextButton(
+              //     onPressed: () {}, child: const Text('Étape précédente')),
+              TextButton(onPressed: () {}, child: const Text('Étape suivante'))
+            ],
+          ),
+        )
+      ],
+    );
+  }
+}

lib/widgets/pages/tutorial.dart

@@ -0,0 +1,11 @@
+import 'package:desktopapp/widgets/components/tutorials/step1.dart';
+import 'package:flutter/material.dart';
+
+class TutorialPage extends StatelessWidget {
+  const TutorialPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(body: const Step1());
+  }
+}