CODEWITHSUNDEEP
flutterdart
DanielRamiz
DanielRamiz

Reputation: 159

Flutter trigger a function inside a widget from the father

Let said I have a widget "mySonWidget" inside this widget I have a function "updateIconColor", I want to call that function from the father of "mySonWidget"

I did something similiar with callback but this is not the same scenario. I saw people other widgets doing similar thing with controllers, but I don't know how create a custom controller.

How can I do it? HELP

class mySonWidget extends StatefulWidget {
  @override
  _mySonWidgetState createState() => _mySonWidgetState();
}

class _mySonWidgetState extends State<mySonWidget> {
  var _iconColor = Colors.red[500];

  void updateIconColor() {
    setState(() {
      print('updateIconColor was called');
      _iconColor = Colors.green;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(0),
      child: IconButton(
        icon: (Icon(Icons.star)),
        color: _iconColor,
        onPressed: () {},
      ),
    );
  }
}

father example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: <Widget>[
          mySonWidget(),
          FlatButton(
            onPressed: () {
              /*..Call Function inside mySonWidget (updateIconColor) ..*/
            },
            child: Text(
              "Change Color",
            ),
          ),
        ]),
      ),
    );
  }
}

Upvotes: 1

Views: 1990

Answers (1)

chunhunghan
chunhunghan

Reputation: 54367

You can copy paste run full code below
You can use GlobalKey can use _key.currentState to call updateIconColor()
code snippet

GlobalKey _key = GlobalKey();
...
mySonWidget(key: _key),
            FlatButton(
              onPressed: () {
                final _mySonWidgetState _state = _key.currentState;
                _state.updateIconColor();
              },    
...           
class mySonWidget extends StatefulWidget {
  mySonWidget({Key key}) : super(key: key);

working demo

enter image description here

full code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  GlobalKey _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          body: Column(children: <Widget>[
            mySonWidget(key: _key),
            FlatButton(
              onPressed: () {
                final _mySonWidgetState _state = _key.currentState;
                _state.updateIconColor();
              },
              child: Text(
                "Change Color",
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

class mySonWidget extends StatefulWidget {
  mySonWidget({Key key}) : super(key: key);

  @override
  _mySonWidgetState createState() => _mySonWidgetState();
}

class _mySonWidgetState extends State<mySonWidget> {
  var _iconColor = Colors.red[500];

  void updateIconColor() {
    setState(() {
      print('updateIconColor was called');
      _iconColor = Colors.green;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(0),
      child: IconButton(
        icon: (Icon(Icons.star)),
        color: _iconColor,
        onPressed: () {},
      ),
    );
  }
}

Upvotes: 4

Related Questions