How To Use SetState In ExpandablePanel in flutter

Question

in ExpandedPanel I put two buttons when press on the first change container contant, but setState() doesn't work to change the value of Scaffold_Syllabus* with the value of Table_Lecture***_Scaffold**

the code

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

  @override
  State<Syllabus> createState() => _SyllabusState();
}

class _SyllabusState extends State<Syllabus> {
  @override
  Widget build(BuildContext context) {
    Size? _size = MediaQuery.of(context).size;
    Container _Scaffold_Syllabus = Container();
    final Color color1 = HexColor('#3E6BA9');
    return SingleChildScrollView(
      child: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ExpansionPanelList(
                children: [
                  ExpansionPanel(
                      headerBuilder: (context, isExpanded) {
                        return Text("dc");
                      },
                      body: SingleChildScrollView(
                        child: Container(
                          padding: _size.width > 450
                              ? EdgeInsets.all(40)
                              : EdgeInsets.only(top: 40),
                          decoration: BoxDecoration(
                              border: Border.all(width: 3, color: color1)),
                          child: Column(
                            children: [
                              Row(
                                children: [
                                  Expanded(
                                    child: Center(
                                      child: ElevatedButton(
                                        onPressed: () {
// the next code want change the container contant
                                          setState(() {
                                            _Scaffold_Syllabus =
                                                Table_Lectures_Scaffold;
                                          });
                                        },
                                        child: new Text("ترم أول",
                                            style: TextStyle(
                                                fontSize: _size.width <= 435
                                                    ? 9
                                                    : 15)),
                                        style: ElevatedButton.styleFrom(
                                          foregroundColor: _Scaffold_Syllabus ==
                                                  Table_Lectures_Scaffold
                                              ? color1
                                              : Colors.white,
                                          backgroundColor: _Scaffold_Syllabus ==
                                                  Table_Lectures_Scaffold
                                              ? Colors.white
                                              : color1,
                                        ),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Center(
                                      child: ElevatedButton(
                                        onPressed: () {
                                          setState(() {
                                            _Scaffold_Syllabus =
                                                Table_Lectures_Scaffold;
                                          });
                                        },
                                        child: new Text("ترم ثان",
                                            style: TextStyle(
                                                fontSize: _size.width <= 435
                                                    ? 9
                                                    : 15)),
                                        style: ElevatedButton.styleFrom(
                                          foregroundColor: _Scaffold_Syllabus ==
                                                  Table_Lectures_Scaffold
                                              ? color1
                                              : Colors.white,
                                          backgroundColor: _Scaffold_Syllabus ==
                                                  Table_Lectures_Scaffold
                                              ? Colors.white
                                              : color1,
                                        ),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              SafeArea(
                                child: Container(
                                  width: 500,
                                  height: 500,
                                  padding: _size.width > 450
                                      ? EdgeInsets.all(40)
                                      : EdgeInsets.only(top: 40),
                                  decoration: BoxDecoration(
                                      border:
                                          Border.all(width: 3, color: color1)),
                                  child: _Scaffold_Syllabus,
                                ),
                              )
                            ],
                          ),
                        ),
                      ))
                ],
              ),
              ExpandablePanel(
                  header: Text("منهج السنه الدراسية الرابعة"),
                  collapsed: Text(""),
                  expanded: SingleChildScrollView(
                    child: Container(
                      padding: _size.width > 450
                          ? EdgeInsets.all(40)
                          : EdgeInsets.only(top: 40),
                      decoration: BoxDecoration(
                          border: Border.all(width: 3, color: color1)),
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Expanded(
                                child: Center(
                                  child: ElevatedButton(
                                    onPressed: () {
                                      setState(() {
                                        _Scaffold_Syllabus =
                                            Table_Lectures_Scaffold;
                                      });
                                    },
                                    child: new Text("ترم أول",
                                        style: TextStyle(
                                            fontSize:
                                                _size.width <= 435 ? 9 : 15)),
                                    style: ElevatedButton.styleFrom(
                                      foregroundColor: _Scaffold_Syllabus ==
                                              Table_Lectures_Scaffold
                                          ? color1
                                          : Colors.white,
                                      backgroundColor: _Scaffold_Syllabus ==
                                              Table_Lectures_Scaffold
                                          ? Colors.white
                                          : color1,
                                    ),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Center(
                                  child: ElevatedButton(
                                    onPressed: () {
                                      setState(() {
                                        _Scaffold_Syllabus =
                                            Table_Lectures_Scaffold;
                                      });
                                    },
                                    child: new Text("ترم ثان",
                                        style: TextStyle(
                                            fontSize:
                                                _size.width <= 435 ? 9 : 15)),
                                    style: ElevatedButton.styleFrom(
                                      foregroundColor: _Scaffold_Syllabus ==
                                              Table_Lectures_Scaffold
                                          ? color1
                                          : Colors.white,
                                      backgroundColor: _Scaffold_Syllabus ==
                                              Table_Lectures_Scaffold
                                          ? Colors.white
                                          : color1,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          SafeArea(
                            child: Container(
                              width: 500,
                              height: 500,
                              padding: _size.width > 450
                                  ? EdgeInsets.all(40)
                                  : EdgeInsets.only(top: 40),
                              decoration: BoxDecoration(
                                  border: Border.all(width: 3, color: color1)),
                              child: _Scaffold_Syllabus,
                            ),
                          )
                        ],
                      ),
                    ),
                  ))
            ],
          ),
        ),
      ),
    );
  }
}

i try to change the contant of container when i press the button, but setstate doesn't work

Wodota ML · Answer 1 · 2023-03-05T14:01:09.173

I'm sorry for asking but, why do you need variable with type of container? So there's an error that, you are declaring variables in the build method, and when you use setstate, build method is rebuild and your variables stay unchanged. Because they are also redeclared in the build method. Try to declare variables out of build method. Example:

import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

@override
State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {

@override
void initState() {
container = Container(color: Colors.black,);
super.initState();
}
Container? _Scaffold_Syllabus=Container(); //Declare variables
here
@override
Widget build(BuildContext context) {
return Scaffold(
  body: Container(
    color: Colors.amber,
    child: Column(
      children: [
        Expanded(child: container!),//this container is changed when 
button is pressed
        ElevatedButton(onPressed: (){
          container = Container(color: Colors.red,);
          setState(() {});
        }, child: Text("red Container")),
        ElevatedButton(onPressed: (){
          container = Container(color: Colors.blue,);
          setState(() {});
        }, child: Text("blue Container")),
      ],
    ),
  ),
);
}
}

in Table_Lectures_Scaffold i put statefulwidget in container then when i put it in Scaffold_Syllabus the container should change but it doesn't work — Bavli Badry, Mar 05 '23 at 09:19
okay I understood, my friend I'm saying that, `build` method is rebuild **everytime** when you use `setstate`, so you need to declare variables outside of build method, or on the top of the method. Just look in the answer where I declared variables. Your PROBLEM is ONLY you DECLARE VARIABLES IN BUILD METHOD AND IT IS WRONG. — Wodota ML, Mar 05 '23 at 13:53
here is another example for you: `class _TestPage extends State{ Container _Scaffold_Syllabus=Container() //Declare variables here @override build(BuildContext context){ return Scaffold(); } } ` — Wodota ML, Mar 05 '23 at 13:55

score 0 · Answer 2 · answered Mar 05 '23 at 06:13

It is primarily because of the wrong logic, i.e

You've established a Containertype variable named _Scaffold_Syllabus in your code and given it an empty Container. When the buttons are pressed, you are then setting its value to Table_Lectures_Scaffold. But, altering its value will have no impact on the user interface because you are not really utilising _Scaffold_Syllabus anywhere in your code.

You must swap out the Container widget in your SafeArea for _Scaffold Syllabus in order to fulfil your goals. Depending on which button is pushed, you should also modify the value of _Scaffold_Syllabus to Scaffold_Syllabus1 or Scaffold_Syllabus2.

How To Use SetState In ExpandablePanel in flutter

2 Answers2