Khal
Khal

Reputation: 225

Flutter AppBar Icon is not responsive on all screens

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 enter image description here here is my image on small screen enter image description here

so how can i make icons responsive thanks

Upvotes: 2

Views: 1531

Answers (1)

Jay Dangar
Jay Dangar

Reputation: 3479

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(
            ...

Upvotes: 2

Related Questions