OnBoarding Screen with Animation Library Liquid Swipe 2.1.0

Halo kawan – kawan semua pada tutorial kali ini saya akan berbagi tentang cara membuat onBoarding screen dengan menggunakan Library. Setelah minggu lalu kita belajar tentang bagaimana kita membuat sebuah splash screen tanpa menggunakan library. Sedikit pengetahuan untuk teman – teman bahwa dalam penggunaan library dalam development aplikasi Mobile, perlu kita ketahui bahwa library tidak selamanya menguntungkan, tentu dalam membuat sebuah aplikasi dengan tambahan library pasti memiliki efek samping salah satunya adalah bertambah beratnya aplikasi kita. Sehingga saran saya jika dalam proses development sebisa mungkin untuk menampilkan performa UI yang baik kepada User dengan meminimalisir penggunaan library. Walau demikian memang ketika kita men – develop sebuah aplikasi dengan adanya library pekerjaan kita menjadi lebih efisien akan tetapi bukan berarti tidak mengorbankan sesuatu (yaitu menyebabkan aplikasi semakin berat. Dan aplikasi yang berat secara marketing akan membuat minat customer terhadap aplikasi kita menjadi menurun).

Namun pada artikel hari ini saya ingin berbagi kepada teman-teman terkait proses pembuatan onboarding dengan menggunakan library bernama Liquid Swipe dengan versi terbarunya 2.1.0 bisa dicek disini.

Langkah pertama kita copy dependencies Liquid Swipe 2.1.0 yang bisa kita ambil dari pub.dev , selanjutnya mari kita pastekan pada bagian Pubspec.yaml bagi teman – teman yang sering develop aplikasi Android Native maka kita sering mengenalnya dengan Build.Gradle.

dependencies:
  flutter:
    sdk: flutter
  liquid_swipe: ^2.0.2

setelah itu silahkan pub get setelah selesai, saatnya untuk kita untuk mengkoding

mari kita buat sebuah file di dalam folder bernama onBoard seperti berikut :

perhatikan bahwa pembuatan folder tersebut tidaklah wajib hal ini saya lakukan supaya aplikasi yang saya buat, lebih rapi dan tidak membuat bingung tim yang mendevelop aplikasi bersama kita. selanjutanya mari kita masuk kedalam file onBoard.dart tersebut .

pertama sebelum kita import Liquid Swipe kita perlu terlebih untuk import material.dart kedalam file aplikasi.

Baru setelahnya kita buat sebuah class stateful. lalu kita buat sebuah list page seperti berikut :

List<Widget> pages;
LiquidController liquidController = LiquidController();
@override
void initState() {
  super.initState();
  liquidController;
  pages = [
    Container(
      color: Color(0xFF094670),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.fromLTRB(0, 24, 24, 0),
                child: GestureDetector(
                  onTap: (){
                    goTo(MyApp(), context );
                  },
                  child: Text(
                    "Skip",
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Image.asset("assets/onboarding1.png"),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(
                  child: Text(
                    "Keuntungan\nBerkelanjutan",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 25,
                        color: Colors.white),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "Menanamkan dan kamu akan mendapatkan\nkeuntungan yang menarik setelah proyek selesai.",
                  textAlign: TextAlign.center,
                  style: TextStyle(color: Colors.white, fontSize: 14),
                ),
                SizedBox(
                  height: 40,
                ),
                Row(
                  children: [
                    Expanded(
                      child: Container(
                        // width: 320,
                        margin: EdgeInsets.fromLTRB(20.0, 8.0, 20.0, 0.0),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(50.0),
                          child: MaterialButton(
                              padding: EdgeInsets.symmetric(vertical: 20),
                              color: Colors.white,
                              elevation: 0.0,
                              onPressed: () {
                                liquidController.animateToPage(page: 1);
                              },
                              child: Text(
                                "Next",
                                style: TextStyle(color: Colors.black),
                              )),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    Container(
      color: Color(0xFF4CAAAA),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.fromLTRB(0, 24, 24, 0),
                child: GestureDetector(
                  onTap: (){
                    goTo(MyApp(), context);
                  },
                  child: Text(
                    "Skip",
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Image.asset("assets/onboarding2.png"),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(
                  child: Text(
                    "Aman Terpercaya",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 25),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Center(
                  child: Text(
                    "Seleksi ketat dan memastikan Mitigasi resiko\nmenggunakan sistem pengelolaan\n"
                        "risiko terintegrasi si lapangan, teknolog, dan\n"
                        "jaminan pendanaan dengan asuransi",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white, fontSize: 14),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: [
                    Expanded(
                      child: Container(
                        // width: 320,
                        margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(50.0),
                          child: MaterialButton(
                              padding: EdgeInsets.symmetric(vertical: 20),
                              color: Colors.white,
                              elevation: 0.0,
                              onPressed: () {
                                liquidController.animateToPage(page: 2);
                              },
                              child: Text(
                                "Next",
                                style: TextStyle(color: Colors.black),
                              )),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    Container(
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                margin: EdgeInsets.fromLTRB(0, 24, 24, 0),
                child: GestureDetector(
                  onTap: (){
                    goTo(MyApp(), context);
                  },
                  child: Text(
                    "Skip",
                    style: TextStyle(
                        fontSize: 20,
                        color: Colors.black,
                        fontWeight: FontWeight.bold),
                  ),
                ),
              ),
            ],
          ),
          Center(
            child: Image.asset(
              "assets/onboarding3.png",
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Center(
                  child: Text(
                    "Dampak Sosial\nBerkelanjutan",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Center(
                  child: Text(
                    "Bukan cuma menyalurkan dana, tapi kita turut\n"
                        "membangun ekosistem finansial ramah\n"
                        "usaha mikro dan petani, untuk menciptakan\n"
                        "kesejahteraan mereka di Indoneisa",
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: 14, color: Color(0xFF828282)),
                  ),
                ),
                SizedBox(
                  height: 20,
                ),
                Row(
                  children: [
                    Expanded(
                      child: Container(
                        // width: 320,
                        margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0.0),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(50.0),
                          child: MaterialButton(
                              padding: EdgeInsets.symmetric(vertical: 20),
                              color: Color(0xFF094670),
                              elevation: 0.0,
                              onPressed: () {
                                if(currentIndex == pages.length - 1){
                                  Navigator.push(context,
                                      MaterialPageRoute(builder: (context) => MyApp()));
                                }
                              },
                              child: Text(
                                "Next",
                                style: TextStyle(color: Colors.white),
                              )),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ];

}

karena kita akan membuat sebuah onBoarding dimana kita membutuhkan 3 page untuk membuatnya maka kita menampungnya dengan sebuah list.

lalu pada body barulah kita panggil Liquid Swipe seperti berikut :

@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
LiquidSwipe(
pages: pages,
positionSlideIcon: 0.5,
enableLoop: true,
liquidController: liquidController,
onPageChangeCallback: (int index){
currentIndex = index;
},
ignoreUserGestureWhileAnimating: true,
slideIconWidget: Icon(
Icons.arrow_back_ios,
size: 30,
color: Colors.black,
),
),

],
),
);
}

maka ketika akan kita jalankan maka hasilnya akan seperti demikian :

Leave a Comment