fix: Improve onboarding carousel

Setting viewportFraction: 1.0 uses the full space of the screen instead of only 80% (default).
get10101 · Nov 14, 2023 · 620672c · 620672c
1 parent 8789314
commit 620672c
Showing 1 changed file with 10 additions and 9 deletions.
diff --git a/mobile/lib/features/welcome/onboarding.dart b/mobile/lib/features/welcome/onboarding.dart
@@ -23,7 +23,7 @@ class CarouselItem {
   CarouselItem(this.title, this.description, this.imagePath);
 }
 
-final List<CarouselItem> caruselItems = [
+final List<CarouselItem> carouselItems = [
   CarouselItem("Your keys, your control", "Stay in control of your funds at all time.",
       "assets/carousel_1.png"),
   CarouselItem("Bitcoin only & Lightning fast.",
@@ -35,16 +35,16 @@ final List<CarouselItem> caruselItems = [
 ];
 
 List<Widget> carouselItemWidgetLayers = [
-  carouselItemWidget(caruselItems[0]),
-  carouselItemWidget(caruselItems[1]),
-  carouselItemWidget(caruselItems[2]),
-  carouselItemWidget(caruselItems[3])
+  carouselItemWidget(carouselItems[0]),
+  carouselItemWidget(carouselItems[1]),
+  carouselItemWidget(carouselItems[2]),
+  carouselItemWidget(carouselItems[3])
 ];
 
 Widget carouselItemWidget(CarouselItem item) {
   return Stack(children: [
     Padding(
-      padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
+      padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
       child: ClipRRect(
           borderRadius: const BorderRadius.all(Radius.circular(5.0)),
           child: Image.asset(
@@ -54,15 +54,15 @@ Widget carouselItemWidget(CarouselItem item) {
           )),
     ),
     Padding(
-      padding: const EdgeInsets.fromLTRB(15, 250, 15, 0),
+      padding: const EdgeInsets.only(left: 55, right: 55, top: 315),
       child: Text(
         item.title,
         style: const TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
         textAlign: TextAlign.center,
       ),
     ),
     Padding(
-      padding: const EdgeInsets.fromLTRB(15, 325, 15, 0),
+      padding: const EdgeInsets.only(left: 55, right: 55, top: 390),
       child: Text(
         item.description,
         style: const TextStyle(fontSize: 20),
@@ -96,7 +96,7 @@ class _Onboarding extends State<Onboarding> {
         body: ScrollableSafeArea(
             child: Container(
           color: Colors.white,
-          padding: const EdgeInsets.all(20.0),
+          padding: const EdgeInsets.only(top: 20, bottom: 20),
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
@@ -105,6 +105,7 @@ class _Onboarding extends State<Onboarding> {
                 items: carouselItemWidgetLayers,
                 carouselController: _controller,
                 options: CarouselOptions(
+                    viewportFraction: 1.0,
                     scrollDirection: Axis.horizontal,
                     autoPlay: false,
                     enlargeCenterPage: true,