Nylo Website home page
  1. Advanced
  2. State Management
Advanced

Durum Yönetimi

Giriş

Durum yönetimi, tüm sayfaları yeniden oluşturmadan UI'nizin belirli bölümlerini güncellemenize olanak tanır. Nylo Website v7'de, uygulamanız genelinde iletişim kuran ve birbirini güncelleyen widget'lar oluşturabilirsiniz.

Nylo Website durum yönetimi için iki sınıf sunar:

  • NyState — Yeniden kullanılabilir widget'lar oluşturmak için (sepet rozeti, bildirim sayacı veya durum göstergesi gibi)
  • NyPage — Uygulamanızda sayfalar oluşturmak için (NyState'i sayfaya özel özelliklerle genişletir)

Durum yönetimini şu durumlarda kullanın:

  • Uygulamanızın farklı bir yerinden bir widget'ı güncellemeniz gerektiğinde
  • Widget'ları paylaşılan verilerle senkronize tutmanız gerektiğinde
  • UI'nin yalnızca bir kısmı değiştiğinde tüm sayfaları yeniden oluşturmaktan kaçınmak istediğinizde

Önce Durum Yönetimini Anlayalım

Flutter'da her şey bir widget'tır, bunlar tam bir uygulama oluşturmak için birleştirebileceğiniz küçük UI parçalarıdır.

Karmaşık sayfalar oluşturmaya başladığınızda, widget'larınızın durumunu yönetmeniz gerekecektir. Bu, bir şey değiştiğinde, örneğin veri, tüm sayfayı yeniden oluşturmak zorunda kalmadan o widget'ı güncelleyebileceğiniz anlamına gelir.

Bunun önemli olmasının birçok nedeni vardır, ancak ana neden performanstır. Sürekli değişen bir widget'ınız varsa, her değişikliğinde tüm sayfayı yeniden oluşturmak istemezsiniz.

İşte Durum Yönetimi burada devreye girer, uygulamanızdaki bir widget'ın durumunu yönetmenize olanak tanır.

Durum Yönetimi Ne Zaman Kullanılmalı

Tüm sayfayı yeniden oluşturmadan güncellenmesi gereken bir widget'ınız olduğunda Durum Yönetimi kullanmalısınız.

Örneğin, bir e-ticaret uygulaması oluşturduğunuzu hayal edin. Kullanıcıların sepetindeki toplam ürün sayısını gösteren bir widget oluşturdunuz. Bu widget'a Cart() diyelim.

Nylo'da durum yönetimli bir Cart widget'ı şöyle görünecektir:

Adım 1: Widget'ı statik bir durum adıyla tanımlayın

/// The Cart widget
class Cart extends StatefulWidget {

  Cart({Key? key}) : super(key: key);

  static String state = "cart"; // Unique identifier for this widget's state

  @override
  _CartState createState() => _CartState();
}

Adım 2: NyState'i genişleten durum sınıfını oluşturun

/// The state class for the Cart widget
class _CartState extends NyState<Cart> {

  String? _cartValue;

  _CartState() {
    stateName = Cart.state; // Register the state name
  }

  @override
  get init => () async {
    _cartValue = await getCartValue(); // Load initial data
  };

  @override
  void stateUpdated(data) {
    reboot(); // Reload the widget when state updates
  }

  @override
  Widget view(BuildContext context) {
    return Badge(
      child: Icon(Icons.shopping_cart),
      label: Text(_cartValue ?? "1"),
    );
  }
}

Adım 3: Sepeti okumak ve güncellemek için yardımcı fonksiyonlar oluşturun

/// Get the cart value from storage
Future<String> getCartValue() async {
  return await storageRead(Keys.cart) ?? "1";
}

/// Set the cart value and notify the widget
Future setCartValue(String value) async {
    await storageSave(Keys.cart, value);
    updateState(Cart.state); // This triggers stateUpdated() on the widget
}

Bunu inceleyelim.

  1. Cart widget'ı bir StatefulWidget'tır.

  2. _CartState, NyState<Cart> sınıfını genişletir.

  3. state için bir ad tanımlamanız gerekir, bu durumu tanımlamak için kullanılır.

  4. boot() metodu, widget ilk yüklendiğinde çağrılır.

  5. stateUpdate() metotları, durum güncellendiğinde ne olacağını yönetir.

Bu örneği Nylo Website projenizde denemek isterseniz, Cart adında yeni bir widget oluşturun.

metro make:state_managed_widget cart

Ardından yukarıdaki örneği kopyalayıp projenizde deneyebilirsiniz.

Şimdi, sepeti güncellemek için aşağıdakini çağırabilirsiniz.

_updateCart() async {
  String count = await getCartValue();
  String countIncremented = (int.parse(count) + 1).toString();

  await storageSave(Keys.cart, countIncremented);

  updateState(Cart.state);
}

Yaşam Döngüsü

Bir NyState widget'ının yaşam döngüsü şu şekildedir:

  1. init() - Bu metot, durum başlatıldığında çağrılır.

  2. stateUpdated(data) - Bu metot, durum güncellendiğinde çağrılır.

    updateState(MyStateName.state, data: "The Data") çağırırsanız, stateUpdated(data) çağrılmasını tetikler.

Durum ilk kez başlatıldıktan sonra, durumu nasıl yönetmek istediğinizi uygulamanız gerekecektir.

Durum Aksiyonları

Durum aksiyonları, uygulamanızın herhangi bir yerinden bir widget üzerinde belirli metotları tetiklemenize olanak tanır. Bunları bir widget'a gönderebileceğiniz adlandırılmış komutlar olarak düşünün.

Durum aksiyonlarını şu durumlarda kullanın:

  • Bir widget üzerinde belirli bir davranışı tetiklemek istediğinizde (sadece yenilemek değil)
  • Bir widget'a veri göndermek ve belirli bir şekilde yanıt vermesini sağlamak istediğinizde
  • Birden fazla yerden çağrılabilecek yeniden kullanılabilir widget davranışları oluşturmak istediğinizde
// Sending an action to the widget
stateAction('hello_world_in_widget', state: MyWidget.state);

// Another example with data
stateAction('show_high_score', state: HighScore.state, data: {
  "high_score": 100,
});

Widget'ınızda, işlemek istediğiniz aksiyonları tanımlayabilirsiniz.

...
@override
get stateActions => {
  "hello_world_in_widget": () {
    print('Hello world');
  },
  "reset_data": (data) async {
    // Example with data
    _textController.clear();
    _myData = null;
    setState(() {});
  },
};

Ardından, uygulamanızın herhangi bir yerinden stateAction metodunu çağırabilirsiniz.

stateAction('hello_world_in_widget', state: MyWidget.state);
// prints 'Hello world'

User user = User(name: "John Doe", age: 30);
stateAction('update_user_info', state: MyWidget.state, data: user);

Durum aksiyonlarınızı init getter'ınızda whenStateAction metodunu kullanarak da tanımlayabilirsiniz.

@override
get init => () async {
  ...
  whenStateAction({
    "reset_badge": () {
      // Reset the badge count
      _count = 0;
    }
  });
}

NyState - Durum Aksiyonları

İlk olarak, bir stateful widget oluşturun.

metro make:stateful_widget [widget_name]

Örnek: metro make:stateful_widget user_avatar

Bu, lib/resources/widgets/ dizininde yeni bir widget oluşturur.

O dosyayı açarsanız, durum aksiyonlarınızı tanımlayabileceksiniz.

class _UserAvatarState extends NyState<UserAvatar> {
...

@override
get stateActions => {
  "reset_avatar": () {
    // Example
    _avatar = null;
    setState(() {});
  },
  "update_user_image": (User user) {
    // Example
    _avatar = user.image;
    setState(() {});
  },
  "show_toast": (data) {
    showSuccessToast(description: data['message']);
  },
};

Son olarak, uygulamanızın herhangi bir yerinden aksiyonu gönderebilirsiniz.

stateAction('reset_avatar', state: MyWidget.state);
// prints 'Hello from the widget'

stateAction('reset_data', state: MyWidget.state);
// Reset data in widget

stateAction('show_toast', state: MyWidget.state, data: "Hello world");
// shows a success toast with the message

NyPage - Durum Aksiyonları

Sayfalar da durum aksiyonları alabilir. Bu, widget'lardan veya diğer sayfalardan sayfa düzeyinde davranışları tetiklemek istediğinizde kullanışlıdır.

İlk olarak, durum yönetimli sayfanızı oluşturun.

metro make:page my_page

Bu, lib/resources/pages/ dizininde MyPage adında yeni bir durum yönetimli sayfa oluşturur.

O dosyayı açarsanız, durum aksiyonlarınızı tanımlayabileceksiniz.

class _MyPageState extends NyPage<MyPage> {
...

@override
bool get stateManaged => true;

@override
get stateActions => {
  "test_page_action": () {
    print('Hello from the page');
  },
  "reset_data": () {
    // Example
    _textController.clear();
    _myData = null;
    setState(() {});
  },
  "show_toast": (data) {
    showSuccessToast(description: data['message']);
  },
};

Son olarak, uygulamanızın herhangi bir yerinden aksiyonu gönderebilirsiniz.

stateAction('test_page_action', state: MyPage.state);
// prints 'Hello from the page'

stateAction('reset_data', state: MyPage.state);
// Reset data in page

stateAction('show_toast', state: MyPage.state, data: {
  "message": "Hello from the page"
});
// shows a success toast with the message

Durum aksiyonlarınızı whenStateAction metodunu kullanarak da tanımlayabilirsiniz.

@override
get init => () async {
  ...
  whenStateAction({
    "reset_badge": () {
      // Reset the badge count
      _count = 0;
    }
  });
}

Ardından uygulamanızın herhangi bir yerinden aksiyonu gönderebilirsiniz.

stateAction('reset_badge', state: MyWidget.state);

Bir Durumu Güncelleme

updateState() metodunu çağırarak bir durumu güncelleyebilirsiniz.

updateState(MyStateName.state);

// or with data
updateState(MyStateName.state, data: "The Data");

Bu, uygulamanızın herhangi bir yerinden çağrılabilir.

Ayrıca bakınız: NyState durum yönetimi yardımcıları ve yaşam döngüsü metotları hakkında daha fazla bilgi için.

İlk Widget'ınızı Oluşturma

Nylo projenizde, yeni bir widget oluşturmak için aşağıdaki komutu çalıştırın.

metro make:stateful_widget todo_list

Bu, TodoList adında yeni bir NyState widget'ı oluşturur.

Not: Yeni widget, lib/resources/widgets/ dizininde oluşturulacaktır.