Last active
December 4, 2020 07:33
-
-
Save KDCinfo/3af7085f21400a5b6921ecc84052f4ba to your computer and use it in GitHub Desktop.
Flutter Provider Scope for NotifyListeners() - The following code shows that Provider only listens on its own ChangeNotifier updates.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:provider/provider.dart'; | |
void main() { runApp(MaterialApp(home: TestScreen())); } | |
class TestScreen extends StatelessWidget { | |
/// | |
/// Flutter Provider Scope for NotifyListeners() | |
/// | |
/// The following code shows that Provider only listens on its own ChangeNotifier updates. | |
/// | |
/// Flutter, Provider, Scope, NotifyListeners | |
@override | |
Widget build(BuildContext context) { | |
return SafeArea( | |
child: Scaffold( | |
body: MultiProvider( | |
providers: [ | |
ChangeNotifierProvider( | |
create: (context) => MyChangeProv1(), | |
), | |
ChangeNotifierProvider( | |
create: (context) => MyChangeProv2(), | |
), | |
], | |
child: buildScreen(), | |
), | |
), | |
); | |
} | |
Widget buildScreen() { | |
var title = ""; | |
title += "The enclosed code shows that Provider only listens on its own ChangeNotifiers.\n\n"; | |
title += "1. Clicking the second button does not call notifyListeners(), ergo, its text _WON'T_ be updated on the screen.\n\n"; | |
title += "2. Clicking the first button does call notifyListeners(), and its text change _IS_ reflected on the screen.\n\n"; | |
title += "This exercise simply points out that one Provider calling notifyListeners() does not also trigger listeners in other Providers.\n\n"; | |
title += "That is to say that notifyListeners() only affects its own Provider's listeners.\n\n"; | |
title += "Additionally, having the first button trigger a setState() also has NO effect on button 2's text, as button 2 is its own Widget with its own build().\n\n"; | |
title += "And being new to Flutter, feel free to comment with corrections, or any other observations you may have. I just wanted to code this out to test it for myself."; | |
return Container( | |
child: SingleChildScrollView( | |
child: Column( | |
children: [ | |
Container( | |
child: Padding( | |
padding: const EdgeInsets.all(11), | |
child: Text( | |
"$title", | |
style: TextStyle(fontSize: 20), | |
), | |
), | |
), | |
SizedBox(height: 11), | |
MyProv1(), | |
SizedBox(height: 11), | |
MyProv2(), | |
], | |
), | |
), | |
); | |
} | |
} | |
class MyChangeProv1 extends ChangeNotifier { | |
String _test1 = "Initial Text for button 1"; | |
String get getTest1 => _test1; | |
void setTest1(String val) { | |
_test1 = val; | |
notifyListeners(); | |
} | |
} | |
class MyProv1 extends StatefulWidget { | |
@override | |
_MyProv1State createState() => _MyProv1State(); | |
} | |
class _MyProv1State extends State<MyProv1> { | |
@override | |
Widget build(BuildContext ctx) { | |
print("BUILDING: _MyProv1State"); | |
String thisState1 = Provider.of<MyChangeProv1>(ctx).getTest1; | |
return Container( | |
child: Column( | |
mainAxisSize: MainAxisSize.min, | |
children: [ | |
Container( | |
child: Text("[_MyProv1State]", style: TextStyle(fontWeight: FontWeight.bold)), | |
), | |
RaisedButton( | |
child: Text(thisState1), | |
onPressed: () { | |
Provider.of<MyChangeProv1>(ctx, listen: false).setTest1("Button 1 has NEW TEXT!"); | |
setState(() { | |
print("setStated!"); | |
}); | |
}, | |
), | |
], | |
), | |
); | |
} | |
} | |
class MyChangeProv2 extends ChangeNotifier { | |
String _test2 = "Initial Text for button 2"; | |
String get getTest2 => _test2; | |
void setTest2(String val) { | |
_test2 = val; | |
// notifyListeners(); | |
} | |
} | |
class MyProv2 extends StatelessWidget { | |
@override | |
Widget build(BuildContext ctx) { | |
print("BUILDING: MyProv2"); | |
String thisState2 = Provider.of<MyChangeProv2>(ctx).getTest2; | |
return Column( | |
children: [ | |
Container( | |
child: Text("[MyProv2]", style: TextStyle(fontWeight: FontWeight.bold)), | |
), | |
RaisedButton( | |
child: Text(thisState2), | |
onPressed: () { | |
Provider.of<MyChangeProv2>(ctx, listen: false).setTest2("Button 2 has NEW TEXT!"); | |
}, | |
) | |
], | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment