Reputation: 225
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
Upvotes: 2
Views: 1531
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