प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

सामग्रीसूची

प्रस्तावना

1. स्थानीयताजगीयाः महत्त्वम्

1. अवधारणा

2. महत्त्वम्

2. आंशिकं ताजगीं कार्यान्वितुं अनेकाः उपायाः

1. आंशिक-ताजगीकरणार्थं setState मेथड् इत्यस्य उपयोगं कुर्वन्तु

2. UI आंशिकरूपेण ताजगीं कर्तुं StatefulWidget तथा ​​InheritedWidget इत्येतयोः उपयोगं कुर्वन्तु

3.ValueNotifier和मूल्यश्रवणीयनिर्माता

4.स्ट्रीमबिल्डर

5.प्रदाता

6.GetX

7. GlobalKey इत्यस्य उपयोगं कुर्वन्तु

---

प्रस्तावना

Flutter इत्यस्मिन् राज्यप्रबन्धनं अनुप्रयोगे आँकडास्थितिं कथं प्रबन्धयितुं अद्यतनं च कर्तव्यम् इति निर्दिशति, तथा च राज्ये परिवर्तनस्य अनुसारं UI अद्यतनं कर्तव्यम् इति । प्रभावी राज्यप्रबन्धनं विकासकानां अधिककुशलं, परिपालनीयं च अनुप्रयोगं निर्मातुं साहाय्यं कर्तुं शक्नोति ।

setState Flutter इत्यस्मिन् सर्वाधिकं मूलभूतं राज्यप्रबन्धनविधिः अस्ति यदा अवस्था परिवर्तते तदा UI पुनर्निर्माणार्थं रूपरेखा सूचिता भविष्यति । अवश्यं वयं जानीमः यत् यदा वयं setState मेथड् आह्वयेम तदा पृष्ठं पुनः आकृष्टं भविष्यति यदा पृष्ठस्य विन्यासः अधिकं जटिलः भवति तदा कदाचित् अस्माकं केवलं पृथक् UI अपडेट् करणीयम् अस्ति, यदि वयं setState मेथड् इत्यस्य उपयोगं कुर्मः तर्हि तस्य भविष्यति अधिकं प्रदर्शनं वर्तमानपृष्ठस्य UI पुनः आकर्षयितुं उपभोक्तुं।

अतः UI इत्यस्य आंशिकरूपेण ताजगीं कर्तुं Flutter इत्यस्मिन् काः पद्धतयः सन्ति?

1. स्थानीयताजगीयाः महत्त्वम्

1. अवधारणा

आंशिकं ताजगीं केवलं अन्तरफलकस्य भागं ताजगीं कर्तुं निर्दिशति, न तु सम्पूर्णं पृष्ठम् । एतेन कार्यक्षमता, उपयोक्तृ-अनुभवः च सुधरति ।

2. महत्त्वम्

1. अनावश्यकं पुनः आकर्षणं परिहरन्तु, कार्यक्षमतां च सुधारयन्तु
2. सुचारुतरं उपयोक्तृअनुभवं प्रदातव्यम्
3. संसाधनस्य उपभोगं न्यूनीकरोतु

2. आंशिकं ताजगीं कार्यान्वितुं अनेकाः उपायाः

1. आंशिक-ताजगीकरणार्थं setState मेथड् इत्यस्य उपयोगं कुर्वन्तु

setState Flutter इत्यस्मिन् सर्वाधिकं प्रयुक्ता राज्यप्रबन्धनविधिः अस्ति अस्य उपयोगः राज्यपरिवर्तनस्य रूपरेखां सूचयितुं भवति, यत् अन्तरफलकपुनर्निर्माणं करोति ।

यदा वयं Flutter project रचयामः तदा पूर्वनिर्धारितरूपेण system द्वारा उत्पन्नस्य timer इत्यस्य उदाहरणं setState partial refresh इत्यस्य उदाहरणम् अस्ति ।

import 'package:flutter/material.dart';
 
class SetStateMainPage extends StatefulWidget {
  final String title;
  const SetStateMainPage({super.key, required this.title});
 
  @override
  State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
}
 
class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  int _count = 0;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(
          '您点击了$_count次',
          style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            setState(() {
              _count++;
            });
          },
      )
    );
  }
}

चित्र 1.setState आंशिक ताजगी

यदा पृष्ठं तुल्यकालिकरूपेण सरलं भवति तदा भवन्तः प्रत्यक्षतया setState पद्धतेः उपयोगं कृत्वा UI इत्यस्य आंशिकरूपेण ताजगीं कर्तुं शक्नुवन्ति ।

उपयोगपरिदृश्यानि : सरलस्थितिपरिवर्तनानि, यथा बटनक्लिक् गणना, स्विचस्थितिः इत्यादयः ।

सावधानताः : १.

1. setState कृते नित्यं आह्वानं कार्यक्षमतायाः समस्यां जनयितुं शक्नोति
2. build मेथड् मध्ये setState इति आह्वानं परिहरन्तु

2. UI आंशिकरूपेण ताजगीं कर्तुं StatefulWidget तथा ​​InheritedWidget इत्येतयोः उपयोगं कुर्वन्तु

        StatefulWidget अवस्थायुक्तः अवयवः, २.InheritedWidget घटकवृक्षस्य अन्तः दत्तांशं साझां कर्तुं प्रयुक्तम् ।

यदा अस्माकं दत्तांशं साझां कर्तव्यं भवति तदा वयं StatefulWidget तथा ​​InheritedWidget इत्येतयोः विषये UI इत्यस्य आंशिकरूपेण ताजगीं कर्तुं विचारयितुं शक्नुमः ।

सम्पूर्णः कोडः यथा अस्ति ।

चित्र 2. दत्तांशं साझेदारी कृत्वा UI ताजगीं कुर्वन्तु

import 'package:flutter/material.dart';
 
class MyInheritedWidget extends InheritedWidget {
  final int counter;
  const MyInheritedWidget({
    super.key,
    required this.counter,
    required super.child,
  });
  @override
  bool updateShouldNotify(covariant InheritedWidget oldWidget) {
    return true;
  }
  static MyInheritedWidget? of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  }
}
 
class InheritedWidgetPage extends StatefulWidget {
  final String title;
  const InheritedWidgetPage({super.key, required this.title});
 
  @override
  State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
}
 
class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  int counter = 0;
  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return MyInheritedWidget(
      counter: counter,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(child: Column(
          children: [
            const Divider(),
            const CounterDisplay(),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: const Text('add'),
            ),
          ],
        ),),
      ),
    );
  }
}
 
class CounterDisplay extends StatelessWidget {
  const CounterDisplay({super.key});
  @override
  Widget build(BuildContext context) {
    final inheritedWidget = MyInheritedWidget.of(context);
    return Text('点击次数: ${inheritedWidget?.counter}');
  }
}

अस्याः पद्धतेः मुख्याः उपयोगपरिदृश्याः निम्नलिखितरूपेण सन्ति : घटकवृक्षे अवस्थां साझां कुर्वन्, यथा विषयः, भाषासेटिंग्स् इत्यादयः ।

लाभः अस्ति यत् दत्तांशसाझेदारी सुलभा अस्ति, तथा च कोडपरिचयः

दोषः अस्ति यत् अस्य उपयोगः जटिलः अस्ति तथा च कार्यप्रदर्शनं प्रभावितं भवितुम् अर्हति ।

3.ValueNotifier和मूल्यश्रवणीयनिर्माता

        ValueNotifier इदं सरलं स्थितिप्रबन्धनसाधनम् अस्ति,ValueListenableBuilder निगरानीयतायैValueNotifier परिवर्तनम् ।

प्रयोगः अपि अतीव सरलः अस्ति : १.

1. ValueNotifier इत्यस्य उदाहरणं कुर्वन्तु

2. निरीक्षणीयं Widget वस्तु ValueListenableBuilder इत्यनेन सह लपेटितम् अस्ति

3. इवेण्ट्-ट्रिगरड् डाटा कथं परिवर्तयितुं शक्यते

पूर्वविधिभिः सह तुलने अयं विधिः अतीव सरलः सुलभः च अस्ति, तस्य कार्यक्षमता अपि अतीव उच्चः अस्ति ।

दोषाः : केवलं सरलराज्यपरिवर्तनं सम्भालितुं शक्नोति

सम्पूर्णः कोडः यथा अस्ति ।

import 'package:flutter/material.dart';
 
class ValueNotifierPage extends StatefulWidget {
  final String title;
  const ValueNotifierPage({super.key, required this.title});
 
  @override
  State<ValueNotifierPage> createState() => _ValueNotifierPageState();
}
 
class _ValueNotifierPageState extends State<ValueNotifierPage> {
 
  final ValueNotifier<int> _counter = ValueNotifier<int>(0);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: ValueListenableBuilder<int>(
            valueListenable: _counter,
            builder: (context, value, child) {
              return Text(
                '您点击了$value次',
                style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
              );
            },
          )
        ),
        floatingActionButton: FloatingActionButton(
          child: const Icon(Icons.add),
          onPressed: () {
            _counter.value ++;
          },
        )
    );
  }
}

4.स्ट्रीमबिल्डर

Stream इति एकं वस्तु अस्ति यस्य उपयोगः अतुल्यकालिकघटनानां वितरणार्थं भवति, तथा च StreamController इत्यस्य माध्यमेन घटनाः प्रेषयितुं शक्यन्ते । यत्र भवद्भिः UI ताजगीकृत्य, भवन्तः Stream -इत्यत्र एकं घटनां प्रेषयितुं शक्नुवन्ति, ततः StreamBuilder इत्यस्य उपयोगं कृत्वा Stream इत्यस्य श्रवणं कर्तुं शक्नुवन्ति यदा नूतनं घटनां प्राप्यते तदा StreamBuilder स्वयमेव UI इत्यस्य पुनर्निर्माणं करिष्यति । एषा पद्धतिः तासु परिस्थितिषु उपयुक्ता यत्र बहुविध-अतुल्यकालिकघटनानां निरीक्षणस्य आवश्यकता भवति ।

यदा अस्माकं कृते अतुल्यकालिकदत्तांशप्रवाहाः, यथा संजाल-अनुरोधाः, वास्तविकसमय-दत्तांशः इत्यादयः, संसाधितुं प्रवृत्ताः भवन्ति तदा वयं StreamBuilder इत्यस्य उपयोगं विचारयितुं शक्नुमः । यथा, निम्नलिखित उदाहरणे वयं एकं अतुल्यकालिकं विधिं लिखितवन्तः यत् संजाल-अनुरोधं अनुकरणं करोति यदा संजाल-अनुरोधः सम्यक् परिणामं न ददाति तदा वयं प्रगति-पट्टिकां लोड् कर्तुं शक्नुमः ।

अस्याः पद्धतेः लाभः अस्ति यत् एतत् अतुल्यकालिक-अनुरोधं अधिकसटीकतया नियन्त्रयितुं शक्नोति, यथा संजाल-अनुरोधानाम् स्थितिः इत्यादयः । तथापि Dior अधिकं जटिलं भवति अतः अधिकसङ्केतस्य आवश्यकता भवितुम् अर्हति ।

सम्पूर्णः कोडः यथा अस्ति ।

import 'dart:async';
import 'package:flutter/material.dart';
 
class StreamBuilderRefreshUIPage extends StatefulWidget {
  final String title;
  const StreamBuilderRefreshUIPage({super.key, required this.title});
 
  @override
  State<StreamBuilderRefreshUIPage> createState() =>
      _StreamBuilderRefreshUIPageState();
}
 
class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  late Future<String> _data;
 
  Future<String> fetchData() async {
    // 模拟网络请求延迟
    await Future.delayed(const Duration(seconds: 2));
    // 返回模拟数据
    return 'Hello, Flutter!';
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _data = fetchData();
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder<String>(
          future: _data,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Data: ${snapshot.data}');
            }
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: fetchData,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5.प्रदाता

       Provider इदं फ्लुटर इत्यनेन अनुशंसितं राज्यप्रबन्धनसमाधानम् अस्ति ।Consumer स्थितिं पठितुं निरीक्षितुं च उपयुज्यते ।

उदाहरणरूपेण समयनिर्धारकम् अपि गृह्णामः ।

1. प्रथमं वयं Provider आयातयामः।

प्रदाता : ^६.१.२

2. ChangeNotifier वर्गं अनुकूलितं कुर्वन्तु।

ChangeNotifier इति Flutter SDK इत्यस्मिन् सरलः वर्गः अस्ति । श्रोतृभ्यः सूचनां प्रेषयितुं तस्य उपयोगः भवति । अन्येषु शब्देषु, यदि ChangeNotifier इति परिभाषितं भवति तर्हि भवान् तस्य अवस्थापरिवर्तनस्य सदस्यतां ग्रहीतुं शक्नोति । (एतत् परिचितस्य प्रेक्षकप्रतिमानस्य सदृशम् अस्ति)।

वयं यस्मिन् कोड् कार्यान्वितुं इच्छामः तस्मिन् _counter1 तथा _counter2 इति द्वौ चरौ स्तः ।

class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}

3. वयं यत् Widget ताजगं कर्तुम् इच्छामः तत् लपेटयितुं Customer इत्यस्य उपयोगं कुर्वन्तु

            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),

4. सम्पूर्णः कोडः निम्नलिखितरूपेण अस्ति ।

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
 
class ProviderRefreshPage extends StatefulWidget {
  final String title;
  const ProviderRefreshPage({super.key, required this.title});
 
  @override
  State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
}
 
class CounterModel extends ChangeNotifier {
  int _counter1 = 0;
  int _counter2 = 0;
  void addCounter1(){
    debugPrint('counter:$_counter1');
    _counter1 += 1;
    notifyListeners();
  }
  void addCounter2(){
    debugPrint('counter:$_counter2');
    _counter2 += 1;
    notifyListeners();
  }
}
 
class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(height: 10,), // 添加一些间距
            const Divider(),
            const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter1}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter1();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),
 
            Consumer<CounterModel>(
              builder: (context, counterModel, child) {
                return Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Text('计数器1个数: ${counterModel._counter2}'),
                    ElevatedButton(onPressed: (){
                      counterModel.addCounter2();
                    }, child: const Icon(Icons.add),),
                  ],
                );
              },
            ),
            const Divider(height: 20,),
          ],
        ),
      ),
    );
  }
}

6.GetX

UI इत्यस्य आंशिकं ताजगीं कार्यान्वितुं वयं GetX इत्यस्य उपयोगं अपि कर्तुं शक्नुमः ।

प्रथमं GetX संस्थापनं कुर्वन्तु:

get: ^4.6.6

ततः वयं GetxController इत्यस्मिन् चराः एन्कैप्सुलेट् कुर्मः ।

class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}

ततः तर्कं प्रदर्शयितुं आवश्यकं Widget लपेटयितुं Obx इत्यस्य उपयोगं कुर्वन्तु ।

Obx(()=> Text('गणक 1 संख्या: ${controller.counter2.value}'))

सम्पूर्णः कोडः यथा अस्ति ।

import 'package:flutter/material.dart';
import 'package:get/get.dart';
 
 
class CounterManagerController extends GetxController {
  final counter1 = 0.obs;
  final counter2 = 0.obs;
  void incrementCount1() {
    counter1.value++;
  }
  void incrementCount2() {
    counter2.value++;
  }
}
 
class GetXRefreshUIPage extends StatelessWidget {
  final String title;
  const GetXRefreshUIPage({super.key, required this.title});
 
  @override
  Widget build(BuildContext context) {
    final CounterManagerController controller = Get.put(CounterManagerController());
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount1();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
                ElevatedButton(
                  onPressed: () {
                    controller.incrementCount2();
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}

अवश्यं, GetX मध्ये आंशिकं ताजगीं कार्यान्वितुं अन्ये अपि अनेकाः उपायाः सन्ति भवान् तस्य दस्तावेजीकरणं अवलोकयितुं शक्नोति । अत्र केवलम् एकः कार्यान्वयनविचारः अस्ति ।

7. GlobalKey इत्यस्य उपयोगं कुर्वन्तु

उपर्युक्ताः त्रीणि कार्यान्वयनविधयः सर्वाणि ढाञ्चायाः माध्यमेन कार्यान्विताः सन्ति यदि भवान् एतत् ढाञ्चं आयातयितुम् इच्छति तर्हि वयं UI इत्यस्य आंशिकं ताजगीकरणकार्यं कार्यान्वितुं GlobalKey इत्यस्य उपयोगं कर्तुं शक्नुमः ।

एकः कीलः यः सम्पूर्णे अनुप्रयोगे अद्वितीयः अस्ति GlobalKey अद्वितीयरूपेण तत्त्वानां परिचयं करोति, यथा...BuildContext .कृतेStatefulWidgets, GlobalKey इत्यपि प्रदातिStateअभिगमः।

अस्माकं टाइमर डेमो मध्ये यदि वयं GlobalKey मार्गेण UI आंशिकरूपेण ताजगीं कुर्मः तर्हि प्रथमं वयं आंशिकरूपेण ताजगीकृत्य विजेट् बहिः निष्कास्य पृथक् घटके समाहितं कुर्मः ।

सम्पूर्णः कोडः निम्नलिखितरूपेण अस्ति ।

class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}
 
class CounterTextState extends State<CounterText> {
  String _text="0";
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}

ततः अस्माकं मुख्य-अन्तरफलके GlobaKey इत्यस्य उदाहरणं कुर्वन्तु:

  int _count   = 0;
  int _count2  = 0;
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();    

यस्मिन् सन्दर्भे UI ताजगीकृत्य आवश्यकं भवति, तस्मिन् सन्दर्भे पूर्वपदे प्रदत्तं अन्तरफलकं GlobalKey मार्गेण आह्वयन्तु, ताजगीं कुर्वन्तु च ।

सम्पूर्णः कोडः यथा अस्ति ।

import 'package:flutter/material.dart';
 
class GlobalKeyRefreshPage extends StatefulWidget {
  final String title;
  const GlobalKeyRefreshPage({super.key, required this.title});
 
  @override
  State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
}
 
class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  int _count   = 0;
  int _count2  = 0;
//包裹你定义的需要更新的weight
  GlobalKey<CounterTextState> textKey = GlobalKey();
  GlobalKey<CounterTextState> textKey2 = GlobalKey();
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:  Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            const SizedBox(
              height: 10,
            ), // 添加一些间距
            const Divider(),
            const Text(
              '计数器实例',
              style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey),
                ElevatedButton(
                  onPressed: () {
                    _count++;
                    textKey.currentState?.onPressed(_count);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                CounterText(textKey2),
                ElevatedButton(
                  onPressed: () {
                    _count2++;
                    textKey2.currentState?.onPressed(_count2);
                  },
                  child: const Icon(Icons.add),
                ),
              ],
            ),
            const Divider(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}
 
 
class CounterText extends StatefulWidget {
  const CounterText(Key key) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return CounterTextState();
  }
}
 
class CounterTextState extends State<CounterText> {
  String _text="0";
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(_text,style: const TextStyle(fontSize: 20),),
    );
  }
  void onPressed(int count) {
    setState(() {
      _text = count.toString();
    });
  }
}