Flutter ile kabartma efektli navigation yapımı

1 hafta önce , Okuma süresi 1 dakika.

Flutter son zamanlarda trend olmaya hızla devam ediyor. Çoklu ortamlı uygulama geliştirme frameworkü olan Flutter daha da çok ses getirecek gibi. Bu yazıda Flutter projelerinizde kabartma efektifine sahip navigasyon yapımını paylaşacağız.
Flutter ile kabartma efektli navigation yapımı

Aşağıda tanıtacağımız custom_navigation_bar paketi ile uygulamalarınızda harika kabartma efektli navigasyon çubukları oluşturabilirsiniz. 

Bu paket, gezinme çubuğuna tıkladığınızda size sevimli bir balon efekti verir.

Dribbble:

68747470733a2f2f63646e2e6472696262626c652e636f6d2f75736572732f323131343538342f73637265656e73686f74732f373133343834392f2f2f63646e2e6472696262626
Uygulandı:

ekran görüntüsü

1–1-

2–1-

3–1-

4–1-

5-1-

6–1-

Nasıl kurulur

Bunu paketinizin pubspec.yaml dosyasına ekleyin:

dependencies:
  custom_navigation_bar: ^0.3.0
 

Dokümantasyon

Bu nitelikleri gezinme çubuğunda özelleştirebilirsiniz.

ATTRIBUTES TYPE DESCRIPTION DEFAULT
scaleFactor double scale factor for the icon scale animation. 0.2
elevation double The z-coordinate of this CustomNavigationBar 8.0
items List item data in CustomNavigationBar required
selectedColor Color [Color] when [CustomNavigationBarItem] is selected [blueAccent]
unSelectedColor Color [Color] when [CustomNavigationBarItem] is not selected. grey[600]
onTap Function(int) callback function when item tapped null
currentIndex int current index of navigation bar. 0
iconSize double size of icon. also represent the max radius of bubble effect animation. 24.0
backgroundColor Color Background color of [CustomNavigationBar] Colors.white
strokeColor Color stroke color blueAccent
bubbleCurve Curve animation curve of bubble effect linear
scaleCurve Curve animation curve of scale effect linear
borderRadius Radius border radius of navigation bar Radius.zero
isFloating bool control if CustomNavigationBar is floating false

Gezinme çubuğundaki simgeyi özelleştirmek için, istediğiniz simgeleri bunun CustomNavigationBarItemgibi yerleştirin.

Dart;

CustomNavigationBar(
        ...
        items: [
          CustomNavigationBarItem(
            icon: Icons.home,
          ),
          CustomNavigationBarItem(
            icon: Icons.shopping_cart,
          ),
          CustomNavigationBarItem(
            icon: Icons.lightbulb_outline,
          ),
          CustomNavigationBarItem(
            icon: Icons.search,
          ),
          CustomNavigationBarItem(
            icon: Icons.account_circle,
          ),
        ],
        ...
      )

GitHub : https://github.com/rickywen911/custom_bubble_navigation_bar

#Flutter