Necip Akgöz Mobil Yazılım dünyası ile ilgili yazılar PageView
PageView widgeti aşağı, yukarı sürüklenebilir sayfalar yapmamızı yardımcı olan bir widgettir.
PageView Çeşitleri
- PageView
- PageView.builder
- PageView.custom
Örneklerde kullanılacak uygulamanın iskeleti
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: PageViewDemo(), ); } } class PageViewDemo extends StatefulWidget { @override _PageViewDemoState createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("PageView")), body: // PageView Widgetimiz buraya gelicek, ); } |
Pageview
Varsayılan kurucu methodu ile pageView
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | PageView buildPageView() { return PageView( children: <Widget>[ Container( color: Colors.pink, ), Container( color: Colors.cyan, ), Container( color: Colors.deepPurple, ), ], ); } |
PageView.builder
itemBuilder ile kolaylıkla çok sayıda sayfa oluşturabiliriz. ListView.builder mantığı gibi çalışır.
Örnek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | PageView buildPageViewBuilder() { return PageView.builder( // İtemCount boş geçilirse sınırsız sayıda sayfa üretecektir itemCount: 10, itemBuilder: (context, index) { return Container( // RasgelenRenk sınıfından rasgele renk üretmeye yarıyan method color: RasgeleRenk.renkUret(), child: Center( child: Text("$index. Sayfa"), ), ); }, ); } |
Bazı Önemli Özellikleri
Sürükleme Tarafı (scrollDirection)
Axis.vertical : Aşşağı Yukarı
Axis.horizontal : Sağa Sola
1 2 3 4 5 6 | PageView( children: <Widget>[ // Sayfalar buraya gelicek ], scrollDirection: Axis.vertical, ) |
PageSnapping
Bu özellik sayesinde sayfalar arası geçişlerde, sürüklemeyi bıraktığımızda çoğunluk kısmı görünen sayfayı otomatik ortalanıp ortalanmamasını ayarlarız.
1 2 3 4 5 6 | PageView( children: <Widget>[ // Sayfalar Buraya gelicek ], pageSnapping: false, ) |
ScrollPhysics
physic özelliği sayesinde sürüklenme davranışını değiştirebiliriz.
Sürüklenme davranışını kendimiz yapabileceğimiz gibi ön tanımlı gelenlerden birini kullana biliriz.
Örnek olarak BouncingScrollPhysics kullanalım, sayfa sonuna veya başına gelince zıplama sekme efekti vericek.
1 2 3 4 5 6 7 | PageView( scrollDirection: Axis.vertical, children: <Widget>[ // Sayfalar Buraya ], physics: BouncingScrollPhysics(), ) |
PageController
PageView’imize controller atayıp başlanğıç sayfasının ne olacağı gibi ayarları ayarlayabilriiz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | PageView buildPageViewBuilder() { // Page controller oluşturulması PageController controller = PageController( // sayfalar bulunduğu konumda ne kadar yer kaplasın default : 1 viewportFraction: 2, // Diğer bir sayfaya gidip gelindiğinde o anki bulunduğu sayfayı hatırlasın mı ? keepPage: true, // Başlangıç Sayfası initialPage: 2, ); return PageView.builder( // conrollerimizi atadık controller: controller, // İtemCount boş geçilirse sınırsız sayıda sayfa üretecektir itemCount: 10, itemBuilder: (context, index) { return Container( margin: EdgeInsets.all(10), child: Card( // RasgelenRenk sınıfından rasgele renk üretmeye yarıyan method color: RasgeleRenk.renkUret(), child: Center( child: Text("$index. Sayfa"), ), ), ); }, ); } |
PageController ile işlemler
PageController ile belli bir sayfaya atlama, sayfalar arası geçiş anismayonları gibi bir çok ayar yapabiliriz.
PageController ile sayfa geçiş butonu ve animayonu ekleyelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | Widget pageViewController() { // Page controller oluşturulması PageController controller = PageController(); return Column( children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ RaisedButton( child: Text("Önceki"), // pageController methodlarından yararlanarak butonumuza önceki sayfata geçiş ve // animasyonun gerçekleşme süresini belirterek // flutterda ön tanımlı olarak gelen basit animasyonlardan birini atadık onPressed: () => controller.previousPage( duration: Duration(seconds: 1), curve: Curves.easeInCubic), ), RaisedButton( child: Text("6. Sayfata git"), // Tıklanıldığında 6 sayfaya animasyon geçişi ile gidicek onPressed: () => controller.animateToPage(6, duration: Duration(seconds: 1), curve: Curves.easeInCubic), ), RaisedButton( child: Text("Sonraki"), // Buradada aynı işlem ileri sayfaya git ile yapıldı onPressed: () => controller.nextPage( duration: Duration(seconds: 1), curve: Curves.ease), ), ], ), Expanded( child: PageView.builder( physics: BouncingScrollPhysics(), // conrollerimizi atadık controller: controller, // İtemCount boş geçilirse sınırsız sayıda sayfa üretecektir itemCount: 10, itemBuilder: (context, index) { return Container( margin: EdgeInsets.all(10), child: Card( // RasgelenRenk sınıfından rasgele renk üretmeye yarıyan method color: RasgeleRenk.renkUret(), child: Center( child: Text("$index. Sayfa"), ), ), ); }, ), ), ], ); } } |
Örneğin Tamamı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | import 'dart:math'; import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: PageViewDemo(), ); } } class PageViewDemo extends StatefulWidget { @override _PageViewDemoState createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("PageView")), body: pageViewController(), ); } /* -------------------------------- PageView -------------------------------- */ PageView buildPageView() { return PageView( children: <Widget>[ Container( color: Colors.pink, ), Container( color: Colors.cyan, ), Container( color: Colors.deepPurple, ), ], ); } /* ---------------------------- PageView.builder ---------------------------- */ PageView buildPageViewBuilder() { // Page controller oluşturulması PageController controller = PageController( // sayfalar bulunduğu konumda ne kadar yer kaplasın default : 1 // viewportFraction: 2, // Diğer bir sayfaya gidip gelindiğinde o anki bulunduğu sayfayı hatırlasın mı ? keepPage: true, // Başlangıç Sayfası initialPage: 2, ); return PageView.builder( physics: BouncingScrollPhysics(), // conrollerimizi atadık controller: controller, // İtemCount boş geçilirse sınırsız sayıda sayfa üretecektir itemCount: 10, itemBuilder: (context, index) { return Container( margin: EdgeInsets.all(10), child: Card( // RasgelenRenk sınıfından rasgele renk üretmeye yarıyan method color: RasgeleRenk.renkUret(), child: Center( child: Text("$index. Sayfa"), ), ), ); }, ); } /* ------------------------ PageController Kullanımı ------------------------ */ Widget pageViewController() { // Page controller oluşturulması PageController controller = PageController(); return Column( children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ RaisedButton( child: Text("Önceki"), // pageController methodlarından yararlanarak butonumuza önceki sayfata geçiş ve // animasyonun gerçekleşme süresini belirterek // flutterda ön tanımlı olarak gelen basit animasyonlardan birini atadık onPressed: () => controller.previousPage( duration: Duration(seconds: 1), curve: Curves.easeInCubic), ), RaisedButton( child: Text("6. Sayfata git"), // Tıklanıldığında 6 sayfaya animasyon geçişi ile gidicek onPressed: () => controller.animateToPage(6, duration: Duration(seconds: 1), curve: Curves.easeInCubic), ), RaisedButton( child: Text("Sonraki"), // Buradada aynı işlem ileri sayfaya git ile yapıldı onPressed: () => controller.nextPage( duration: Duration(seconds: 1), curve: Curves.ease), ), ], ), Expanded( child: PageView.builder( physics: BouncingScrollPhysics(), // conrollerimizi atadık controller: controller, // İtemCount boş geçilirse sınırsız sayıda sayfa üretecektir itemCount: 10, itemBuilder: (context, index) { return Container( margin: EdgeInsets.all(10), child: Card( // RasgelenRenk sınıfından rasgele renk üretmeye yarıyan method color: RasgeleRenk.renkUret(), child: Center( child: Text("$index. Sayfa"), ), ), ); }, ), ), ], ); } } class RasgeleRenk { static final random = Random(); /// Verilen minimum parpaklık değeri ile rasgele renk olusturur static Color renkUret({int minBrightness = 50}) { assert(minBrightness >= 0 && minBrightness <= 255); return Color.fromARGB( 0xFF, minBrightness + random.nextInt(255 - minBrightness), minBrightness + random.nextInt(255 - minBrightness), minBrightness + random.nextInt(255 - minBrightness), ); } } |
