Flutter: Share State Between Parent And Child Widgets

Link Copied To Clipboard !

flutter_voidcallback_functioncallback Flutter

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Since the UI building using flutter is alot easier than by using native languages like xml, flutter is getting more and more attention. Flutter reduces the development time and increases the look of application in lesser time.

Let’s get into the topic. Sharing state between widgets is often needed while building an application. The typical situation is when you need to change the state variable of parent widget when something happens or some event fires on child widget.

For example, consider a very simple situation where you need to increment counter variable when a button is pressed, provided that the button lies in child widget.

There are two ways you can achieve this process. You can either use VoidCallback() or Function(x) callback. The VoidCallback is used when only event is fired and no value is expected from callback and the Function() is used when a return value is expected. Let’s see an example :


import 'package:flutter/material.dart';

class ParentWidget extends StatefulWidget {
  @override
  _ParentWidgetState createState() => _ParentWidgetState();
}

class _ParentWidgetState extends State<ParentWidget> {
  int _count = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Share State'),
      ),
      body: Column(
        children: <Widget>[
          Center(
            child: Text('$_count'),
          ),
          ChildWidget(
            voidCallback: () {
              setState(() {
                _count += 1;
              });
            },
            funCallback: () {
              setState(() {
                _count += 1;
              });
            },
          )
        ],
      ),
    );
  }
}

class ChildWidget extends StatefulWidget {
  final VoidCallback voidCallback;
  final Function() funCallback;

  ChildWidget({this.voidCallback, this.funCallback});

  @override
  _ChildWidgetState createState() =>
      _ChildWidgetState(voidCallback: voidCallback, funCallback: funCallback);
}

class _ChildWidgetState extends State<ChildWidget> {
  final VoidCallback voidCallback;
  final Function() funCallback;

  _ChildWidgetState({this.voidCallback, this.funCallback});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 18.0),
      child: Row(
        children: <Widget>[
          RaisedButton(
            onPressed: voidCallback,
            child: Text('Void Click'),
          ),
          RaisedButton(
            onPressed: funCallback(),
            child: Text('Func Click'),
          )
        ],
      ),
    );
  }
}

Here, in both cases, we are triggering the callbacks to increment _count variable. This ways, the buttons from child widget are able to change the state of parent widget changing _count variable.


You May Also Like