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 !
Table of Contents
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.
carousel_slider paketinin kurulumu
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.
