बटन टैप का जवाब देकर और setState से डिस्प्ले अपडेट करके अपनी स्क्रीन में जान डालें।
इस पाठ को Kodokon में खोलेंहमारी स्क्रीन सुंदर हैं लेकिन जमी हुई: उपयोगकर्ता के इशारों का जवाब देने का समय आ गया है। मानक Material 3 बटन ElevatedButton है। यह दो आवश्यक पैरामीटर लेता है: child, इसकी दिखाई गई सामग्री (अक्सर एक Text), और onPressed, वह फ़ंक्शन जिसे टैप करने पर चलाया जाए। इस तरह पैरामीटर के रूप में पास किए गए फ़ंक्शन को कॉलबैक कहते हैं: आप इसे खुद नहीं बुलाते, Flutter इसे सही क्षण पर आपके लिए बुलाता है। () { ... } सिंटैक्स एक अनाम फ़ंक्शन बनाता है, बिना किसी नाम के, सीधे मौके पर लिखा गया।
import 'package:flutter/material.dart';
Widget buildHelloButton() {
return ElevatedButton(
onPressed: () {
debugPrint("Button pressed!");
},
child: const Text("Tap here"),
);
}debugPrint कंसोल में लिखता है... लेकिन स्क्रीन खुद नहीं बदलती। क्यों? क्योंकि एक StatelessWidget (एक स्टेट-रहित विजेट) जमा हुआ होता है: एक बार बन जाने पर, यह और नहीं बदल सकता। किसी बदलती वैल्यू को दिखाने के लिए, आपको एक StatefulWidget (एक स्टेट-युक्त विजेट) की ज़रूरत होती है। स्टेट वह डेटा का समूह है जो विजेट के जीवनकाल में बदल सकता है: एक काउंटर, एक चेक किया गया बॉक्स, कुछ टाइप किया गया टेक्स्ट... एक StatefulWidget हमेशा एक State क्लास के साथ-साथ चलता है, जो इस डेटा को रखता है और build मेथड रखता है। यहाँ शुरुआती दिनों का महान क्लासिक है: काउंटर।
import 'package:flutter/material.dart';
void main() {
runApp(const CounterApp());
}
class CounterApp extends StatelessWidget {
const CounterApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() =>
_CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int count = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Counter: $count",
style: const TextStyle(fontSize: 32),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () {
setState(() {
count = count + 1;
});
},
child: const Text("+1"),
),
],
),
),
);
}
}यह तंत्र तीन चरणों में आता है। 1) count वेरिएबल _CounterPageState में रहता है: यही स्टेट है। 2) हर टैप पर, कॉलबैक setState को बुलाता है: यह मेथड स्टेट को बदलता है और Flutter को बताता है कि कुछ बदल गया है। 3) फिर Flutter build को दोबारा चलाता है, जो count की नई वैल्यू के साथ स्क्रीन को फिर से बनाता है। दर्शन को याद रखें: आप स्क्रीन को कभी सीधे नहीं बदलते, आप डेटा बदलते हैं, और Flutter डिस्प्ले का ध्यान रखता है।