1 files changed, 101 insertions, 0 deletions
diff --git a/lib/screens/onboarding_screen.dart b/lib/screens/onboarding_screen.dart
new file mode 100644
index 0000000..a3a90a8
--- /dev/null
+++ b/lib/screens/onboarding_screen.dart
@@ -0,0 +1,101 @@
+import 'package:concentric_transition/concentric_transition.dart';
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+import 'package:pmsna1/widgets/responsive.dart';
+
+class PageData {
+  final String title;
+  final String icon;
+  final MaterialColor bgColor;
+  final Color textColor;
+
+  const PageData({
+    required this.title,
+    required this.icon,
+    required this.bgColor,
+    required this.textColor,
+  });
+}
+
+class OnboardingScreen extends StatelessWidget {
+  const OnboardingScreen({super.key});
+
+  static const pages = [
+    PageData(
+      title: '¡Bienvenide a Tecstagram!',
+      icon: 'assets/share.json',
+      bgColor: Colors.deepPurple,
+      textColor: Colors.white,
+    ),
+    PageData(
+      title: 'Donde les linces se rugen entre sé',
+      icon: 'assets/heart.json',
+      bgColor: Colors.red,
+      textColor: Colors.white,
+    ),
+    PageData(
+      title: 'Todes contres todes, ¡sole une ganadore!',
+      icon: 'assets/star.json',
+      bgColor: Colors.green,
+      textColor: Colors.black,
+    ),
+  ];
+
+  Widget icon(PageData data) => CircleAvatar(
+        radius: 100.0,
+        backgroundColor: data.bgColor.shade200,
+        child: Lottie.asset(
+          data.icon,
+          height: 100.0,
+          fit: BoxFit.fill,
+        ),
+      );
+
+  Widget text(BuildContext context, PageData data) => Text(
+        data.title,
+        textAlign: TextAlign.center,
+        style: Theme.of(context)
+            .typography
+            .englishLike
+            .displaySmall!
+            .copyWith(color: data.textColor),
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: ConcentricPageView(
+        colors: pages.map((PageData p) => p.bgColor).toList(),
+        itemCount: 3,
+        physics: const NeverScrollableScrollPhysics(),
+        itemBuilder: (int index) {
+          PageData data = pages[index];
+          return Center(
+            child: Padding(
+              padding: const EdgeInsets.all(15.0),
+              child: Responsive(
+                mobile: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    icon(data),
+                    const SizedBox(height: 50.0),
+                    text(context, data),
+                  ],
+                ),
+                desktop: Row(
+                  children: [
+                    Expanded(child: icon(data)),
+                    Expanded(child: text(context, data)),
+                  ],
+                ),
+              ),
+            ),
+          );
+        },
+        onFinish: () {
+          Navigator.of(context).pushNamed('/dash');
+        },
+      ),
+    );
+  }
+}