Membuat Intro Slider pada Flutter

Setelah kemarin kita membuat Splash Screen Pada Flutter, hari ini kita akan beranjak untuk mempelajari pembuatan Intro Slider.  dimana nanti pada proses pembuatan Intro Slider kita mencoba menerapkan komponen Widget yang lain dengan bantuan carousel_slider library .

Untuk membuat slider kita menggunakan StatelessWidget yang dipadukan dengan StatefulWidget, lapisan luar kita buat dengan  StatelessWidget karena tidak ada perubahan secara dinamis sedangkan untuk lapisan dalam kita gunakan StatefulWidget.

Pertama Kita Rencanakan Terlebih dahulu kita rencanakan terlebih dahulu berapa slide yang ingin kita buat. pada percobaan ini kita membuat 3 slide saja. Kemudian kita siapkan komponen pembentuk slide,  seperti contoh berikut :

import 'package:flutter/material.dart';

Color bgColor = Color(0xFFF3F3F3);
Color textColor = Color(0xFF83838A);
var colorBackground = "e5eefa";

var colorBackgroundTwo = "edf4fc";

List<String> imagePath = [
  "assets/images/introSlideOne.png",
  "assets/images/introSlideTwo.png",
  "assets/images/introSlideThree.png",
];

List<String> title = ["Welcome Plants", "Care for Plants", "Ready To Plant a Tree"];
List<String> description = [
  "Plants are one source of oxygen and absorbing carbon dioxide",
  "Plant plants in your house besides reducing global warming, your house will be more beautiful",
  "Do not have many plans to wait let alone directly plant flowers in front of the house, do not require high power is not it"

];


Color _colorFromHex(String hexColor) {
  final hexCode = hexColor.replaceAll('#', '');
  return Color(int.parse('FF$hexCode', radix: 16));

}

Setelah itu kita buat lapisan Luar terlebih dahulu, sebagai class yang dipanggil untuk menjalankan intro Slider :

class IntroSlideAction extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ContentPage(), //lapisan dalam
    );
  }
}


Setelah itu kita membuat lapisan dalam dimana lapisan dalam ini kita mengimplementasikan   library carousel_slider, agar nanti content bisa di Slide.  Berikut class ContentPage :

CarouselSlider(
     autoPlay: false,
     enableInfiniteScroll: false,
     initialPage: 0,
     reverse: false,
     viewportFraction: 1.0,
     aspectRatio: MediaQuery.of(context).size.aspectRatio,
     items: [0, 1, 2].map((i) {. //array 3 slide
         return Builder(
             builder: (BuildContext context) {
                return Container(
                    width: MediaQuery.of(context).size.width,
                    color: bgColor,
                    child: introSlide(i));
             },
          );
     }
).toList(),        

items diatas jumlah data arraynya tergantung dari banyak slide yang di inginkan, jadi fleksibel tergantung keinginan masing - masing. Setelah itu kita buat class introSlide(),  class ini yang nantinya sebagai tampilan slide. Untuk kelas ini gunakan StatefulWidget karena data di Layout  dynamic dan akan berganti seiring slider saat di jalanankan :

Component penyusun class ini terdiri dari empat komponen :

 - Komponen atas berisikan label skip dan nomor slider

Align(
      alignment: Alignment.topCenter,
      child: SafeArea(
             child: Container(
             color: _colorFromHex(colorBackground),
             height: 50,
             width: MediaQuery.of(context).size.width,
             child: Stack(children: <Widget>[
             Positioned(
                  left: 16,
                  top: 16,
                  child: Text("Numero\u00B9", style: _titleStyle())),
             Positioned(
                  right: 16,
                  top: 16,
                  child: new Text(widget.index == 2 ? "DONE" : "SKIP",
                  style: _titleStyle())),
             ]),
        ),
    ),
),      

- Komponen  Kedua berupa gambar

Expanded(
      child: Container(
      color: _colorFromHex(colorBackgroundTwo),
             child: Center(
             child: Image.asset(
                  imagePath[widget.index],
                  width: MediaQuery.of(context).size.width / 1.5,
                  height: MediaQuery.of(context).size.width / 1.5,
              )
      ))
),  

- Komponen  Ketiga Title dan Description

Expanded(
      child: Container(
      color: _colorFromHex(colorBackgroundTwo),
      child: Column(
      children: <Widget>[
               Padding(
               padding: EdgeInsets.only(top: 24),
               child: Center(
                      child: new Text(
                      title[widget.index],
                      style: TextStyle(
                              fontFamily: "Avenir",
                              fontSize: 30,
                              fontWeight: FontWeight.bold),
                        )),
                      ),
               Container( 
               margin: EdgeInsets.only(top: 24),
               padding: EdgeInsets.symmetric(horizontal: 16),
               child: new RichText(
                      textAlign: TextAlign.center,
                      text: new TextSpan(
                      style: new TextStyle(
                      fontSize: 14.0, color: Colors.black),
                            children: <TextSpan>[
                            new TextSpan(
                                 text: description[widget.index],
                                 style: new TextStyle(fontFamily: 'Avelin'))
                      ]),
               ),),
        ],
),),),

- Komponen  Terakhir berisikan image arah panah, indikator

Align(
       alignment: Alignment.bottomCenter,
       child: Container(
            color: _colorFromHex(colorBackground),
            height: 80,
            width: MediaQuery.of(context).size.width,
            padding: EdgeInsets.only(left: 16, right: 16),
            child: Stack(children: <Widget>[
            DotsIndicators(widget.index),
            Center(
            child: new Text(
            widget.index != 2 ? 'SCROLL RIGHT' : '',
            style: TextStyle(fontFamily: "Avelir", fontSize: 10),
            )),
            Positioned(
                   top: widget.index != 2 ? 36 : 0,
                   right: 0,
                   child: widget.index != 2
                   ? Image.asset('assets/images/arrow.png',
                   width: 30,) : LetsGo())
            ]),
        ),
),

Output :

    

Link Github  😊:

https://github.com/sdiik/MaybeHelp/blob/master/IntroSlideAction.dart