Flutter'da Scroll To Top Kütüphanesi Güncellendi


Görsel Referansı


Flutter'da Scroll To Top kütüphanesi güncellendi. İsterseniz yapılan değişikliklere birlikte bir göz atalım.


Yükleme


pubspec.yaml:

dependencies:
  flutter_scroll_to_top: ^1.1.0

Import ederken aşağıdaki kod satırındaki gibi çağrılması gerekiyor:

import 'package:flutter_scroll_to_top/flutter_scroll_to_top.dart';

ScrollWrapper


Ekranın sağ en üstünde görülen ikon, kaydırma işlemi yapıldıktan sonra karşımıza çıkıyor.

Görsel Referansı


Aşağıdaki örnekteki gibi kullanabiliyorsunuz:

ScrollWrapper(
        scrollController: scrollController,
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      ),


Özelleştirme


Özelleştirmek için aşağıdaki parametreleri kullanabiliyorsunuz.


PromptScrollOffset - Scroll to Top butonunun hangi kaydırma offset'inde gösterileceği.

PromptAlignment - Scroll to Top butonunun hizalamak için widget'ın neresinde olacağı.

PromptDuration - Scroll to Top butonunun görünmesi/kaybolması için geçen süre.

PromptAnimationCurve - Scroll to Top butonunun görünüme geldiğinde izleyeceği Animasyon Eğrisi.

PromptAnimationType - Scroll to Top butonunun animasyon sırasında izlediği PromptAnimation. Üç seçenek vardır, solma, ölçekleme ve boyut.

scrollToTopDuration - Scroll to Top butonuna basıldığında sayfanın en üste kaydırılması için geçen süre.

scrollToTopCurve - En üste kaydırmak için Animasyon Eğrisi.

PromptTheme - Prompt düğmesini daha fazla değiştirmek için Prompt Düğmesi Teması'na geçebilirsiniz. Aşağıdaki parametrelere sahiptir:

  • padding - Bilgi istemi butonunun etrafına dolgu.

  • iconPadding - Butonun içindeki simgenin etrafına dolgu.

  • icon - Butonun içindeki simge.

  • color - İstem butonunun rengi.

Aşağıdaki örnekte belirtilen şekilde kullanabiliyorsunuz:

ScrollWrapper(
        scrollController: scrollController,
        promptAlignment: Alignment.topCenter,
        promptAnimationCurve: Curves.elasticInOut,
        promptDuration: Duration(milliseconds: 400),
        promptScrollOffset: 300,
        promptTheme: PromptButtonTheme(
            icon: Icon(Icons.arrow_circle_up, color: Colors.amber),
            color: Colors.deepPurpleAccent,
            iconPadding: EdgeInsets.all(16),
            padding: EdgeInsets.all(32)),
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      ),

Görsel Referansı


Custom Button Oluşturmak


Varsayılan Scroll to Top butonunun, promptReplacementBuilder parametresini devre dışı bırakarak seçilen bir pencere aracıyla değiştirebilirsiniz.


Varsayılan prompt widget'ını, promptReplacementBuilder parametresini devre dışı bırakarak seçtiğiniz bir pencere aracıyla değiştirebiliyorsunuz.

ScrollWrapper(
        scrollController: scrollController,
        promptReplacementBuilder: (BuildContext context, Function scrollToTop) {
          return MaterialButton(
            onPressed: () {
              scrollToTop();
            },
            child: Text('Scroll to top'),
          );
        },
        child: ListView.builder(
          controller: scrollController,
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(
              title: Text('Tile $index'),
              tileColor: Colors.grey.shade200,
            ),
          ),
        ),
      )

Görsel Referansı


NestedScrollView


Görsel Referansı


Örnek Kod:

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

class NestedScrollViewExample extends StatelessWidget {
  final ScrollController scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: NestedScrollView(
          controller: scrollController,
          headerSliverBuilder: (context, innerBoxIsScrolled) => [
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverSafeArea(
                sliver: SliverAppBar(
                  expandedHeight: 300,
                  collapsedHeight: 100,
                  pinned: true,
                  title: Text('NestedScrollView Implementation'),
                ),
              ),
            )
          ],
          body: Builder(
            builder: (context) {
              NestedScrollView.sliverOverlapAbsorberHandleFor(context);
              return ScrollWrapper(
                scrollController: scrollController,
                promptReplacementBuilder:
                    (BuildContext context, Function function) {
                  return MaterialButton(
                    onPressed: () {
                      function();
                    },
                    child: Text('Scroll to top'),
                  );
                },
                child: CustomScrollView(
                  slivers: [
                    SliverOverlapInjector(
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                    ),
                    SliverList(
                        delegate: SliverChildBuilderDelegate((context, index) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ListTile(
                          title: Text('Tile $index'),
                          tileColor: Colors.grey.shade200,
                        ),
                      );
                    })),
                  ],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

Daha fazla bilgi için bu sayfayı ziyaret edebilirsiniz: https://pub.dev/packages/flutter_scroll_to_top


#cross #flutter #scrolltotop

0 yorum

Son Paylaşımlar

Hepsini Gör