How To Use SetState In ExpandablePanel in flutter

BavliBadry
March 5, 2023
174 views
0 votes
2 Answers

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

Answers

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")),
      ],
    ),
  ),
);
}
}

- AgniGari
- March 5, 2023 at 7:13 am
- 0 votes
0
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.

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.