If you are already learning about Flutter, this code is familiar.

@override
Widget build(BuildContext context) {
  return new Text(
     'Flutter Demo',
     style: Theme.of(context).textTheme.title,
   );
}
Copy the code

Inherited Widget is like an implementation or supplement to other widgets. Like theme. of(context), you can get a ThemeData and use its internal custom properties to change the appearance of your current widget.

[InheritedWidget] How to get common data in different inheritedWidgets [InheritedWidget]

inherited_widget.gif

1. Create a model to hold the current count

class InheritedTestModel {
  final int count;
  const InheritedTestModel(this.count);
}
Copy the code

2. Create an InheritedWidget

Class InheritedContext extends InheritedWidget {// Data final InheritedTestModel InheritedTestModel; Final Function() increment; Final Function() reduce; InheritedContext({ Key key, @required this.inheritedTestModel, @required this.increment, @required this.reduce, @required Widget child, }) : super(key: key, child: child); static InheritedContext of(BuildContext context) { return context.inheritFromWidgetOfExactType(InheritedContext); Override bool updateShouldNotify(InheritedContext oldWidget) {return inheritedTestModel! = oldWidget.inheritedTestModel; }}Copy the code

3. Isolate the +, -, and value widgets

class TestWidgetA extends StatelessWidget { @override Widget build(BuildContext context) { final inheritedContext = InheritedContext.of(context); final inheritedTestModel = inheritedContext.inheritedTestModel; Return new Padding(Padding: const EdgeInsets. Only (left: 10.0, top: 10.0, right: 10.0), child: new RaisedButton( textColor: Colors.black, child: new Text('+'), onPressed: inheritedContext.increment), ); } } class TestWidgetB extends StatelessWidget { @override Widget build(BuildContext context) { final inheritedContext = InheritedContext.of(context); final inheritedTestModel = inheritedContext.inheritedTestModel; Return new Padding(Padding: const EdgeInsets. Only (left: 10.0, top: 10.0, right: 10.0), child: New Text(' inheritedTestModel.count}',style: new TextStyle(fontSize: 20.0),); } } class TestWidgetC extends StatelessWidget { @override Widget build(BuildContext context) { final inheritedContext = InheritedContext.of(context); final inheritedTestModel = inheritedContext.inheritedTestModel; Return new Padding(Padding: const EdgeInsets. Only (left: 10.0, top: 10.0, right: 10.0), child: new RaisedButton( textColor: Colors.black, child: new Text('-'), onPressed: inheritedContext.reduce), ); }}Copy the code

Combination of 4.

class InheritedWidgetTestContainer extends StatefulWidget { @override State<StatefulWidget> createState() { return new _InheritedWidgetTestContainerState(); } } class _InheritedWidgetTestContainerState extends State<InheritedWidgetTestContainer> { InheritedTestModel inheritedTestModel; _initData() { inheritedTestModel = new InheritedTestModel(0); } @override void initState() { _initData(); super.initState(); } _incrementCount() { setState(() { inheritedTestModel = new InheritedTestModel(inheritedTestModel.count + 1); }); } _reduceCount() { setState(() { inheritedTestModel = new InheritedTestModel(inheritedTestModel.count - 1); }); } @override Widget build(BuildContext context) { return new InheritedContext( inheritedTestModel: inheritedTestModel, increment: _incrementCount, reduce: _reduceCount, child: new Scaffold( appBar: new AppBar( title: new Text('InheritedWidgetTest'), ), body: new Column( children: <Widget>[ new Padding( padding: Const EdgeInsets. Only (left: 10.0, top: 10.0, right: 10.0), child: New Text(' we use \nTheme. Of (context).textTheme\nMediaQuery.of(context).size, etc. \n is implemented by InheritedWidget ', style: New TextStyle(fontSize: 20.0),),), new TestWidgetA(), new TestWidgetB(), new TestWidgetC(),],),); }}Copy the code

Result: When you click “+”, “-“, the middle value changes, A, B, C three widgets can get the current value change in real time

image.png

Zhihu Daily Flutter version code has been uploaded to myGITHUB ZhihuDailyPurifyByFlutter

All the code in the basic learning processGITHUB Flutter_Study

Learn a little every day to learn about Flutter!