Why can't I call my changecolor function inside a class?

Viewed 44

I want to call the "changecolor();" function but it is in a different class.

class AppBarPage extends StatelessWidget implements PreferredSizeWidget {
  const AppBarPage({Key? key}) : super(key: key);

  @override
  Size get preferredSize => const Size.fromHeight(100);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
          drawer: const Drawer(),
          appBar: AppBar(
            backgroundColor: Colors.pink.shade400,
            toolbarHeight: 100,
            elevation: 14,
            shape: const RoundedRectangleBorder(
                // ignore: unnecessary_const
                borderRadius: const BorderRadius.only(
                    bottomRight: Radius.circular(70),
                    bottomLeft: Radius.circular(70))),
            title: const Text(
              'Rick and Morty',
            ),
            actions: [
              Row(
                children: [
                  Container(
                    height: 40,
                    width: 40,
                    alignment: Alignment.center,
                    // ignore: prefer_const_literals_to_create_immutables
                    decoration: BoxDecoration(boxShadow: [
                      const BoxShadow(
                          blurRadius: 7, spreadRadius: 3, color: Colors.pink)
                    ], shape: BoxShape.circle, color: Colors.pink.shade400),
                    child: IconButton(
                      icon: const Icon(Icons.settings),
                      onPressed: () {
                        
                        changecolor();
                        
                      },
                    ),

In the final part, as you can see, I want my card to change color when I call that function. here the other class

class _HomeRickState extends State<HomeRick> {
  Color color = const Color.fromARGB(243, 247, 243, 243);

  void changecolor() {
    setState(() {
      if (color == Color.fromARGB(243, 247, 243, 243)) {
        color = Color.fromARGB(243, 241, 220, 237);
      } else {
        color = Color.fromARGB(243, 247, 243, 243);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBarPage(),
      body: SafeArea(
        child: Card(
          color: color,
          //color: Color.fromARGB(243, 241, 220, 237),

both are in the same file. To be honest, I'm learning. I suppose that the problem is the "AppBarPage" class, because it is a statelesswidget, but when I want to transform it into a staefullwidget it gives me an error.

2 Answers

EDIT: Corrected my initial answer

Try adding a key to your Stateful Widget. When you call the function changecolor() you think that dart will recognise where it is from. That is not the case . This function is owned by the HomeRickState. So you need to create a key!

What is a key? I am a beginner as well so I will try my best to explain. It is a way to access a Stateful's widget state and thus, its functions. Think of it like this: When you have a normal class:

class MyClass{
  int i = 0;
  void printThis(){
   print(i);
  }
}

you call the function like this:

MyClass someName = MyClass();

someName.printThis();

You have to do the same thing , however this time it is a state and not a normal class or widget. So you create a key!

First rename _HomeRickState to HomeRickState everywhere.

Then add this to the top of your code GlobalKey<HomeRickState> homeKey = GlobalKey();

After that , go to your main.dart file . And change the home property of the MaterialApp widget from home: const HomeRick() to home: HomeRick(key: homeKey)

and when you call the changecolor() function , call it like this:

homeKey.currentState!.changecolor();

Let me know if it works

to call the function from another class without creating its instance you have to make it static make the function static and also the fields which are accessed in the function make them also static then you can call it from another class.

Related