How to set the state of a stateful widget from a child stateless widget

Question

Okay, so just to warn you, I'm 15 and I'm a complete flutter noob. This is my first ever project, so excuse the probably dumb question, and please go easy on me. I have this stateful widget (ride) where the body is one of the child stateless widgets defined in _children. The if statement just changes between the 1st and 2nd child widgets depending on if the user has connected a BT device (that part is irrelevant). What I need to do is set the state from the inside of the MaterialButton found on ln 68 so that ride shows the riding stateless widget, but obviously I can't change the state from inside startRide because it's a stateless widget. How would I go about doing this?

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' ;
import 'results.dart';
import 'settings.dart';


class ride extends StatefulWidget {
  @override
  _rideState createState() => _rideState();
}

class _rideState extends State<ride> {
  int _currentState = 0;
  final List<Widget> _children = [
    notConnected(),
    startRide(),
    riding(),
  ];

  bool connected = checkBT(); // Function defined in settings.dart


  @override
  Widget build(BuildContext context) {
    if (connected == true){
      _currentState = 1;
      setState((){_currentState;});
    }
    return _children[_currentState];
  }
}

class notConnected extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Container(
        height:180,
        padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
        child: Center(
          child: Text(
            "Oops! Looks like your phone isn’t connected to your bluetooth device.",
            style:Theme.of(context).textTheme.bodyText2,
            textAlign: TextAlign.center,
          ),
        ),
      ),

    );
  }
}

class startRide extends StatelessWidget {
  AudioPlayer _audioPlayer = AudioPlayer();
  AudioCache player = AudioCache();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Container(
          width: 200,
          height: 80,
          child: MaterialButton(
            onPressed:(){
              player.play("beeps.mp3");
              // I NEED TO SET THE STATE OF RIDE HERE
            },

            child: Text(
              "Start!",
              style: Theme.of(context).textTheme.headline1,
            ),
            color: Colors.red[500],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(40.0)),


          ),
      ),
      ),
      ),
    );

  }

}

class riding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); //not finished writing this yet
  }
}

I'm probably going about doing this in completely the wrong way, but I've come from python so it's very different. Any help would be greatly appreciated :)

Arpit Awasthi Arpit Awasthi · Accepted Answer · 2020-11-03T19:09:17

You can create callback, i.e passing function

Here is a sample code

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' ;
import 'results.dart';
import 'settings.dart';


class ride extends StatefulWidget {
  @override
  _rideState createState() => _rideState();
}

class _rideState extends State<ride> {
  int _currentState = 0;
  final List<Widget> _children = [
    notConnected(),
    startRide((){
      // you can setState((){}) here
    }),
    riding(),
  ];

  bool connected = checkBT(); // Function defined in settings.dart


  @override
  Widget build(BuildContext context) {
    if (connected == true){
      _currentState = 1;
      setState((){_currentState;});
    }
    return _children[_currentState];
  }
}

class notConnected extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Container(
        height:180,
        padding: EdgeInsets.fromLTRB(40, 0, 40, 0),
        child: Center(
          child: Text(
            "Oops! Looks like your phone isn’t connected to your bluetooth device.",
            style:Theme.of(context).textTheme.bodyText2,
            textAlign: TextAlign.center,
          ),
        ),
      ),

    );
  }
}

class startRide extends StatelessWidget {
  AudioPlayer _audioPlayer = AudioPlayer();
  AudioCache player = AudioCache();
  Function callback;

  startRide(Function callback){
     this.callback = callback;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Container(
          width: 200,
          height: 80,
          child: MaterialButton(
            onPressed:(){
              player.play("beeps.mp3");
              // I NEED TO SET THE STATE OF RIDE HERE
              // callback function
              callback();
            },

            child: Text(
              "Start!",
              style: Theme.of(context).textTheme.headline1,
            ),
            color: Colors.red[500],
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(40.0)),


          ),
      ),
      ),
      ),
    );

  }

}

class riding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(); //not finished writing this yet
  }
}

Edit :- Test code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Test(),
    );
  }
}

class Test extends StatefulWidget {
  @override
  _Test createState() => _Test();
}

class _Test extends State<Test> {

  int current = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: root(),
    );
  }

  Widget root() {
    return Container(
      child: TestingStateless((){
        setState(() {
          current++;
          print(current);
        });
      }),
    );
  }
}

// ignore: must_be_immutable
class TestingStateless extends StatelessWidget{
  Function func;

  TestingStateless(Function func){
    this.func = func;
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
        func();
      },
      child: Container(
        height: 50,
        color: Colors.green,
        child: Text('TESTING'),
      ),
    );
  }
}

How to set the state of a stateful widget from a child stateless widget

1 Answers