Membuat Slider & Indicator dengan PageView Flutter

Share:
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 Slider PageView
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.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik