Flutter AppBar Icon is not responsive on all screens

Question

i Have two icons on my appbar on clicking save save icon dissappers and approve icon will pop it works fine but by app bar icon on larger screen cut according to below image. here is mycode

appBar: PreferredSize(
      preferredSize:  Size.fromHeight(70.0),
      child: AppBar(
      elevation: 10,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.red,
        title:  Text('Edit',style:
              TextStyle(fontSize: MediaQuery.of(context).size.width*0.1),
        ),

        actions: <Widget>[
          isVisibile
              ?  Container(
            height: 50,
                width: 50,
                child: Padding(
                  padding:  EdgeInsets.only(right:MediaQuery.of(context).size.width*0.3),
                  child: IconButton(
                        icon:  Icon(
                            Icons.save,
                            color: Colors.white,
                            size: MediaQuery.of(context).size.width*0.1,
                          ),

                        onPressed: () {
                          
                        },
                      ),
                ),
              )

              : Container(),
          isInvisible
              ? Padding(
                padding: EdgeInsets.only(right:MediaQuery.of(context).size.width*0.05,bottom: MediaQuery.of(context).size.height*0.05),
                child: IconButton(
                    icon: Icon(
                      Icons.done,
                      color: Colors.white,
                      size: MediaQuery.of(context).size.width*0.1,
                    ),
                    onPressed: () async {
                      // approve
                    },
                  ),
              )
              : Container(),
        ],
      //),
      ),
    ),

here is my app bar on large screens here is my image on small screen

so how can i make icons responsive thanks

Solution

Put your AppBar widget as a child of Container and set margin to EdgeInset.all(4). This should work.

Try Following code :

appBar: PreferredSize(
      preferredSize:  Size.fromHeight(70.0),
      child: Container(
              padding: EdgeInset.all(4), // you can change this value to 8 
            child:AppBar(
            ...

Comments

[Khal]

Jay Dangar it works there is error container margin i rectify it padding thanks