Membuat Image Slider Menggunakan Flutter

Pada kesempatan kali ini kita akan belajar cara membuat image slider menggunakan flutter. sebelum itu apa sih image slider itu ? nah mungkin ada beberapa yang bertanya seperti itu, jadi image slider itu merupakan sebuah widget untuk menampilkan gambar yang bisa digeser, ada juga fitur unlimited scrolling, dan juga bisa di custom, selain itu juga bisa geser sendiri (auto play). untuk contoh nya bisa lihat gambar dibawah ini

image slider carousel

Nah untuk membuat image slider ini kita menggunakan sebuah library. Oke langsung saja ke tutorialnya :

1. Buat Project Fluttter Baru

Buatlah project flutter baru, beri nama flutter_image_slider

2. Import Library

Setelah selesai membuat project flutter, langkah selanjutnya yaitu import library buka pubspec.yaml

carousel_slider: ^1.3.0

kira-kira ilustrasinya seperti dibawah ini :

klik Package get.

3. Mempersiapkan Asset

Langkah selanjutnya adalah mengimport gambar ke dalam project, siapkan beberapa gambar atau anda bisa juga download asset yang telah disediakan di link berikut : https://drive.google.com/openid=12yQyVt2DD35UG3HOCZ7TEVHlN-YL4WbI

setelah di download kemudian ekstrak -> buat directory di project namanya images -> kemudian buat package baru lagi namanya slider -> paste gambar ke slider

4. Mengaktifkan Asset

Buka file pubspec.yaml lagi uncomment asset, lihat gambar dibawah ini :

Perlu di ingat, kode assets harus sejajar dengan yang atas , agar tidak terjadi error.

5. Lets Code !

Buka file main.dart , lalu tambahkan kode berikut :

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static final List<String> imgSlider = [
    'elektronik.jpeg',
    'fashion.jpg',
    'food.jpg',
    'rendang.jpg',
    'sport.jpg'
  ];
  final CarouselSlider autoPlayImage = CarouselSlider(
    items: imgSlider.map((fileImage) {
      return Container(
        margin: EdgeInsets.all(5.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          child: Image.asset(
            'images/slider/${fileImage}',
            width: 10000,
            fit: BoxFit.cover,
          ),
        ),
      );
    }).toList(),
    height: 150,
    autoPlay: true,
    enlargeCenterPage: true,
    aspectRatio: 2.0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Column(
        children: <Widget>[
          autoPlayImage,

        ],
      ),
    );
  }
}

Sangat simple bukan ? coba kita run aplikasi nya maka akan tampil seperti dibawah ini :

Sekian tutorial dari saya, terima kasih.