Image Slider

Merhaba Flutter Geliştiricileri ,

Sizlerle bir mobil uygulamanın olmazsa olmazı ImageSlider‘ı anlatıcağım. Öncelikle konuya biraz hakim olabilmeniz adına kısa bir tanıtım ile başlamak istiyorum. Herhangi bir mobil uygulama indirdiniz ve karşınıza tanıtım amaçlı birkaç Slider elemanı çıkıyor yani kayan bir yapı içerisinde elemanlar çıkıyor bu yapı geliştiricilere göre değişir istenirse ilk yüklenmede tanıtım amaçlı istenirse her defasında çalışan bir Slider tasarımı yapabilirsiniz. Kesinlikle uygulamanızı kaliteli gösteren bir parça. Daha da derine inersek ekrana ilk gelen veya Tasarladığınız Slider yapısı resimlerden olabileceği gibi Scaffold iskeletinizin Body kısmı da olabilir. Resim yazı vs. geliştiriciye kalmış bir durum. Oluşturduğunuz yapılarda index değerine göre de işlem yapabileceğimize değinmek istedim. Sadece ufak bir algoritma ile istenilen slider üzerine daha farklı nesneler de ekleyebilirsiniz. İlk etapta sadece resimleri barındıran bir Slider yapalım.

Resimleri internet sitesinden çekip koymayı tercih ettim.Sizin tercihleriniz arasında —assets klasörüne eklemek var ise sadece küçük bir kısma müdahale ederek yapabilirsiniz. Burdaki önemli kısım yapınızı StatefullClass’ı ile yapmak olucaktır. Çünkü programın herhangi bir yerinde yaptığınız değişiklikte etkilenecek başka bir Widget veya yapınız olabilir.

Bu uygulamayı carousel_slider pluginin kullanarak yaptım. Projenizin pubspec.yaml dosyasına paketimizi eklemeyi unutmayınız! Ardından paketi kullanacağınız dart sayfasına da import işlemini gerçekleştiriniz.

dependencies:
  carousel_slider: ^2.0.0Code language: CSS (css)

import 'package:carousel_slider/carousel_slider.dart';Code language: JavaScript (javascript)

Bir uygulama geliştirme sürecindeki iken kendiniz tasarladığınız bir widget’ı daha farklı yollarla tasarlayabileceğiniz gibi kullandığınız bir plugin ile tasarladığınız yapıyı farklı pluginler kullanarak da tasarlayabilirsiniz. Örneğin bu uygulama için swiper pluginini de kullanarak da yapabilirsiniz. Uygulama üzerinde son sayfaya bir buton koyup Navigator ( rota/geçiş ) işlemi yapmasını sağladım bunu indexleme mantığıyla yaptım. Scaffold iskeletimizin body kısmını değiştirebileceğimiz gibi küçük bir container içerisine alıp farklı amaçlarla da kullanılabilir. Kodlamada çoğu height veya width değerlerini elimle verdim bunu doğru bir şekilde kullanmak için yani her cihazın boyutuna göre farklı şekillenebilme durumunu ele aldığımızda MediaQuery ile kullanmamızın daha doğru olur. Kod üzerinde bazı kısımlarda gerekli açıklamalarda bulundum.

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

//carousel_slider: ^1.4.1 Kütüphanesini Kullandık
//Scaffold Sabit Body Değişiyor

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
];
final List child = map<Widget>(imgList, (index, i) {
  return SingleChildScrollView(
    child: Column(
      children: <Widget>[//
        Container(
          margin: EdgeInsets.all(5),
          child: ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(8)),
            child: Stack(
              children: <Widget>[
                Image.network(i, fit: BoxFit.cover, width: 1000.0, height: 500,),
              ],
            ),
          ),
        ),
      ],
    ),
  );
}).toList();

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }
  return result;
}

class MekanScreen extends StatefulWidget {
  @override
  _MekanScreenState createState() => _MekanScreenState();
}

class _MekanScreenState extends State<MekanScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      height: double.infinity, //En dıştaki containerin tüm alana yayılması
      child: Padding(
          padding: EdgeInsets.all(15),
          child: CarouselSlider.builder(
              height: 600,
              autoPlay: false,
              enlargeCenterPage: true,
              viewportFraction: 0.9, //Kenarındaki resimlerin gözükmesi arasındaki mesafe kontrolü
              aspectRatio: 2.0, //Kenarındaki resimlerin konumları kaydırmadaki konum
              itemCount: child.length,
              itemBuilder: (BuildContext context, int index) {
                debugPrint(index.toString());
                return SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      InkWell(
                        splashColor: Colors.white,
                        onTap:(){
                          debugPrint("dsf");
                          },
                        child:  child[index],),

                      index == 2 ? butongetir() : Container(), //Fotograflar
                      //index 0 dan başlar aslanım
                    ],
                  ),
                );
              })),
    );
  }

  Widget butongetir() {
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(25)),
      child:  RaisedButton(
        color: Color.fromARGB(155, 10, 0, 100),
        splashColor: Colors.red,
        child: Padding(
          padding:EdgeInsets.symmetric(horizontal: 120),
          child: Text("Giriş",style: TextStyle(color:Colors.white70,fontSize: 20,fontWeight: FontWeight.w400),),
        ),
        onPressed: () {
          debugPrint("Tıklandı");
        },
      ),
    );
  }
}Code language: PHP (php)

ImageSlider

Sadece resimli olan yapı için github ‘da inceleyebilirsiniz.

ImageSlider (Buton ile )

Buton eklenmesi ile olan yapı için github ‘da inceleyebilirsiniz.