Flutter

Flutter Resim Slider Yapma

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda resim slider yapımını anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme çerçevesidir. Flutter, hızlı, etkileşimli, güzel ve kullanımı kolay mobil uygulamalar oluşturmak için kullanılır. Flutter, birçok bileşen sunar ve bunlardan biri de resim slider’ıdır.

Resim slider, kullanıcının birden fazla resim arasında kaydırmasını sağlayan bir bileşendir. Bu bileşen, kullanıcının birden fazla resme göz atmasını ve resimleri daha etkileyici bir şekilde göstermesini sağlar. Bu makalede, Flutter’da resim slider yapmayı öğreneceksiniz.

İşlem Adımları

Öncelikle, Flutter’ın pub.dev’deki carousel_slider paketini kullanarak resim slider yapabiliriz. Bu paket, resimleri yatay veya dikey olarak kaydırmamızı sağlayan bir widget sağlar.

pubspec.yaml dosyasına aşağıdaki satırları ekleyin:

dependencies:
  carousel_slider: ^4.0.0

Daha sonra, terminali açın ve aşağıdaki komutu çalıştırın:

flutter packages get

Resim slider widget’ını oluşturma

Resim slider widget’ını oluşturmak için, CarouselSlider widget’ını kullanacağız. Aşağıdaki kodu main.dart dosyasına ekleyin:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Resim Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Resim Slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _currentIndex = 0;
  final CarouselController _controller = CarouselController();

  List _images = [
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
    'https://via.placeholder.com/350x150',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CarouselSlider(
            items: _images.map((item) => Container(
              child: Center(child: Image.network(item, fit: BoxFit.cover, height: 200,)),
            )).toList(),
            carouselController: _controller,
            options: CarouselOptions(
              height: 200,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 3),
              autoPlayAnimationDuration: Duration(milliseconds: 800),
              autoPlayCurve: Curves.fastOutSlowIn,
              enableInfiniteScroll: true
            ),
          ),
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: _images.asMap().entries.map((entry) {
              return GestureDetector(
                onTap: () => _controller.animateToPage(entry.key),
                child: Container(
                  width: 12.0,
                  height: 12.0,
                  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: (Theme.of(context).brightness == Brightness.dark ?Colors.white :Color.fromRGBO(0, 0, 0, 0.4))),
                  ),
                );
              }).toList(),
            ),
          ],
        ),
      );
  }
}

Kod Açıklamaları

Yukarıdaki kod, resimlerin bulunduğu bir listeyi oluşturur ve bu listeyi CarouselSlider widget’ına aktararak resimleri bir slayt halinde gösterir. Ayrıca resimler arasında geçiş yapmak için bir nokta listesi de oluşturduk.

Resimlerin bulunduğu liste _images listesidir. Burada, yer tutucu bir resim URL’si kullandık. Kendi resimlerinizi kullanabilirsiniz. Slider’ı kontrol etmek için, _controller adlı bir CarouselController kullanıyoruz. Bu, slaytın bir sonraki veya önceki resme geçmesini sağlar. Slider ayarları, CarouselOptions kullanılarak yapılandırılır. Bu ayarlar, slayt yüksekliği, otomatik oynatma aralığı, otomatik oynatma animasyonu, sonsuz kaydırma vb. içerir. Slider ayarları, CarouselOptions kullanılarak yapılandırılır. Bu ayarlar, slayt yüksekliği, otomatik oynatma aralığı, otomatik oynatma animasyonu, sonsuz kaydırma vb. içerir.

Sonuç

Bu örnek, carousel_slider paketinin basit bir kullanımını göstermektedir. Bu paket, resim slider’ı oluşturmak için kullanabileceğiniz birçok seçenek sunar.

Evet resim slider yapımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.

Skorumuz:
Oy Vermek İçin Tıklayın
[Toplam: 0 Ortalama: 0]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu