Is it possible to call setState() inside of a function inside flutter

SamiKhan
August 6, 2023
301 views
0 votes
2 Answers

When I try to use setState() inside of a custom function that I have defined it says that "setState() isn’t defined" even though I have ‘flutter/material.dart’ package imported:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:smooth_like_flutter/components/service_field.dart';

void showCustomDialog(
  BuildContext context,
) {
  var number = 10;

  showDialog(
      context: context,
      builder: (BuildContext context) {
        return Column(
          children: [
            Text(
              number,
              style: TextStyle(color: Colors.grey[700]),
            ),
            MyServiceField(
              hint: 'hello',
              onChange: (fieldData) {
                var fieldNum = int.parse(fieldData);
                setState(                     // The function 'setState' isn't defined.
                  number = fieldNum
                );
              },
            ),
            ],
        );
      });
}

This code is to only give a general idea of what I’m trying to achieve, if need be, I can upload the entire code

i’ve tried importing material.dart

Answers

It is possible to call setState method when you’re inside a StatefulWidget but not outside it, unless you pass a callback.
At this point you could extract the widget inside the dialog into a statefulwidget:

class CustomWidget extends StatefulWidget {
  const CustomWidget({super.key});

  @override
  State<CustomWidget> createState() => _CustomWidgetState();
}

class _CustomWidgetState extends State<CustomWidget> {
  var number = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Text(
            number.toString(),
            style: TextStyle(color: Colors.grey[700]),
          ),
          TextField(
            onChanged: (fieldData) {
              var fieldNum = int.parse(fieldData);
              setState(() => number = fieldNum);
            },
          ),
        ],
      ),
    );
  }
}

and use it in the dialog as follows:

void showCustomDialog(BuildContext context) {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return const CustomWidget();
      });
}

setState’s role is to update the UI of a screen/widget. You can use setState inside a function but it has to be inside a stateful class. Stateful class allows you to rebuild your user interface. In your code, you have declared the function outside a statefulwidget class. What you can do is:-

class NewScreen extends StatefulWidget {
  const NewScreen({Key? key}) : super(key: key);

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {

void showCustomDialog(
  BuildContext context,
) {
  var number = 10;

  showDialog(
    context: context,
    builder: (BuildContext context) {
    return Column(
      children: [
        Text(
          number,
          style: TextStyle(color: Colors.grey[700]),
        ),
        MyServiceField(
          hint: 'hello',
          onChange: (fieldData) {
            var fieldNum = int.parse(fieldData);
            setState(                     // Now you can use setState as you have declared your function in a sateful widget.
              number = fieldNum
            );
          },
        ),
        ],
    );
  });
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Setstaet in Function'),
        backgroundColor: Colors.green,
      ),
      body: Container(
          child: Center(
         child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: Container(
          child: Text(
            'User Interface Changed!!',
          ),
        )),
      )),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.