I want to call my sliding up panel as a button

Question

I would like when click on my edit button, my sliding up panel trigger and opens !

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: Text(
            "Modifier Profil",
            style: TextStyle(
                color: Color.fromARGB(255, 41, 40, 40),
                fontWeight: FontWeight.w500),
          ),
          backgroundColor: Color.fromARGB(255, 252, 249, 249),
          leading: IconButton(
            onPressed: () {},
            icon: Icon(Icons.arrow_back),
            color: Colors.black,
          ),
          //actions: [IconButton ( onPressed: () {}, icon: Icon(Icons.check), color: Colors.amber,)],
        ),
        body: SlidingUpPanel(
          body: Container(
            margin: EdgeInsets.only(left: 15, top: 20, bottom: 20),
            //color: Colors.blue,
            child: GestureDetector(
              onTap: () {
                FocusScope.of(context).unfocus();
              },
              child: ListView(
                scrollDirection: Axis.vertical,
                children: [
                  Center(
                    child: Stack(
                      children: [
                        CircleAvatar(
                          maxRadius: 58,
                          backgroundColor: Colors.white,
                          child: CircleAvatar(
                            maxRadius: 55,
                            foregroundImage: AssetImage("images/profile.png"),
                          ),
                        ),
                        Positioned(
                            bottom: 0,
                            top: 70,
                            right: 0,
                            child: CircleAvatar(
                              radius: 17,
                              backgroundColor: Colors.white,
                            )),
                        Positioned(
                            bottom: 0,
                            top: 70,
                            right: 0,
                            child: CircleAvatar(
                              radius: 15,
                              backgroundColor: Colors.amber,
                              child: IconButton(
                                iconSize: 15,
                                onPressed: () {},
                                icon: Icon(
                                  Icons.edit,
                                  color: Colors.white,
                                ),
                              ),
                            )),
                      ],
                    ),
                  ),

hrushingale · Answer

Declare a PanelController and in the onPressed method of your button you will be able to open and close the panel.

PanelController panelController=PanelController();

body: SlidingUpPanel(
 controller:panelController,
 .
 .
body:ElevatedButton(
child:Text("edit"),
onPressed: (){
            panelController.isPanelOpen? 
            panelController.close():panelController.open();
}

P.S. Would recommend you to check out Modal Bottom Sheet

I want to call my sliding up panel as a button

1 Answers