Membuat Slider & Indicator dengan PageView Flutter

Halo semuanya, kembali lagi di sahretech. Kesempatan kali ini kita akan membuat slider dan indikator slider dengan menggunakan pageview. Penasaran?, ayo ikuti pembahasannya di bawah ini.

PageView

PageView adalah widget yang disediakan oleh flutter untuk membuat list halaman. Dengan menggunakan widget ini, user dapat berpindah halaman hanya dengan melakukan scrolling ke samping atau ke atas. Widget ini memang diperuntukan untuk membuat page seperti tampilan onboarding, tapi kita juga bisa menggunakannya untuk membuat slider atau carousel.

Kita nantinya juga membutuhkan PageController untuk menghandle halaman yang discrolling. Dengan bantuan PageController kita bisa membuat indikator secara mandiri tanpa plugin tambahan. Untuk melihat hasil akhirnya silahkan scroll ke bagian paling bawah artikel ini.

Membuat Slider dan Indikator di Flutter

1. Buatlah sebuah project flutter baru dengan nama bebas. Disini saya sudah menggunakan flutter versi null safety.

2. Buka file main.dart. Lalu ganti isi di dalamnya dengan script di bawah ini.

    

import 'package:flutter/material.dart';

    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);
    
      @override
      State<MyApp> createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
    
      //viewport as margin left
      final _pageController = PageController(viewportFraction: 0.877);
    
      double currentPage = 0;
    
      //indicator handler
      @override
      void initState() {
        //pagecontroller dibuat selalu listening
        //setiap pageview discrollke samping maka akan mengambil index page
        _pageController.addListener(() {
          setState(() {
            currentPage = _pageController.page!.toDouble();
            print(currentPage);
          });
        });
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: SafeArea(
              child: ListView(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text(
                      "Slider\nPageView",
                      style: TextStyle(fontSize: 35, fontWeight: FontWeight.w400),
                    ),
                  ),
                  Container(
                    height: 200,
                    child: PageView(
                      //boucingscrollphysics() membuat efek mantul saat discroll ke samping
                      physics: BouncingScrollPhysics(),
                      controller: _pageController,
    
                      //membuat pageview dapat discroll ke samping
                      scrollDirection: Axis.horizontal,
                      children: [
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          width: 350,
                          height: 200,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                "https://images.unsplash.com/photo-1607355739828-0bf365440db5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1444&q=80",
                              ),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          width: 350,
                          height: 200,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                "https://images.pexels.com/photos/2583852/pexels-photo-2583852.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260",
                              ),
                            ),
                          ),
                        ),
                        Container(
                          margin: EdgeInsets.only(right: 15),
                          width: 350,
                          height: 200,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            image: DecorationImage(
                              fit: BoxFit.cover,
                              image: NetworkImage(
                                "https://images.unsplash.com/photo-1584810359583-96fc3448beaa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1267&q=80",
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.all(25),
    
                    //membuat dot indicator
                    child: Row(
                      children: List.generate(
                        3,
                        (index) {
                          return Container(
                            margin: EdgeInsets.only(right: 5),
                            alignment: Alignment.centerLeft,
                            height: 9,
                            width: 9,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: currentPage == index
                                  ? Colors.black
                                  : Colors.black12,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

3. Silahkan jalankan project ini, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini

Hasil Akhir

Nah, sekarang kalian sudah bisa membuat slider dan indikator secara mandiri tanpa menggunakan plugin tambahan. Kalian bisa meningkatkan/improvisasi widget yang sudah kalian pelajari dengan menambahkan data dummy atau data yang bersumber dari internet. Saya juga sudah membuat beberapa artikel terkait flutter lainnya

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Sekian tutorial flutter kali ini tentang cara membuat slider dan indikator dengan menggunakan pageview di flutter. Semoga bermanfaat, jika ada kesulitan silahkan konsultasikan langsung di kolom komentar di bawah ini. Sekian dan sampai jumpa.