स्टेट को साझा पूर्वज (ancestor) में रखें और अपने चाइल्ड विजेट को नियंत्रित विजेट में बदलें जो कॉलबैक के ज़रिए बदलावों की सूचना वापस देते हैं।
इस पाठ को Kodokon में खोलेंएक पारंपरिक स्थिति: एक मात्रा चयनकर्ता और कहीं और प्रदर्शित एक कुल योग को एक ही डेटा साझा करना होता है। सुनहरा नियम: स्टेट उन विजेट के निकटतम साझा पूर्वज में रहता है जो उस पर निर्भर हैं। पैरेंट डेटा का स्वामी होता है, उसे एक पैरामीटर के रूप में नीचे पास करता है, और एक कॉलबैक के ज़रिए बदलाव प्राप्त करता है जो ऊपर की ओर वापस बहता है। यही "स्टेट को ऊपर उठाना" (lifting state up) है।
import 'package:flutter/material.dart';
class CartScreen extends StatefulWidget {
const CartScreen({super.key});
@override
State<CartScreen> createState() => _CartScreenState();
}
class _CartScreenState extends State<CartScreen> {
int _quantity = 1;
void _updateQuantity(int value) {
setState(() => _quantity = value);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Cart')),
body: Column(
children: [
QuantitySelector(
quantity: _quantity,
onChanged: _updateQuantity,
),
Text('Total: ${_quantity * 20} €'),
],
),
);
}
}चाइल्ड एक नियंत्रित विजेट बन जाता है: यह एक StatelessWidget है, कुछ भी संग्रहीत नहीं करता, जो वैल्यू उसे मिलती है उसे प्रदर्शित करता है, और onChanged के ज़रिए हर मंशा का संकेत देता है। ValueChanged<int> बस void Function(int) का एक उपनाम (alias) है। मात्रा 1 पर अक्षम किए गए माइनस बटन पर ध्यान दें: onPressed को null पास करना पर्याप्त है, और यह तर्क सीधे प्राप्त वैल्यू से निकलता है।
import 'package:flutter/material.dart';
class QuantitySelector extends StatelessWidget {
const QuantitySelector({
super.key,
required this.quantity,
required this.onChanged,
});
final int quantity;
final ValueChanged<int> onChanged;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.remove),
onPressed: quantity > 1
? () => onChanged(quantity - 1)
: null,
),
Text('$quantity'),
IconButton(
icon: const Icon(Icons.add),
onPressed: () => onChanged(quantity + 1),
),
],
);
}
}आप इस अनुबंध का उपयोग हर समय बिना जाने ही करते हैं: Checkbox, Slider, Switch सभी नियंत्रित विजेट हैं (value + onChanged)। जब ट्री गहरा होता जाता है और कॉलबैक को पाँच स्तरों से गुज़ारना थकाऊ हो जाता है, तब स्टेट प्रबंधन समाधानों की खोज का समय होगा - यही अगले मॉड्यूल का विषय है।