How to change positions of icons in AppBar in flutter? - flutter

Question

I am trying to reposition my "compass" icon near the "search" icon from the App bar. Everytime i try to make a change in the container with higher value 55 for example "padding: const EdgeInsets.symmetric(horizontal: 50)," i get error stack over flow. Also when i try to change the logo(png) the allingment, nothing happens. Help please!
Image
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Colors.pink[400], Colors.blue[400]]
),
),
),
title: Row(
children: [
Container(
alignment: Alignment.center,
height: 40,
child: SizedBox(
child: Image.asset(
'assets/images/logox.png',
)
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: SizedBox(
child: Icon(
Icons.explore_rounded,
))),
// Container(child: Icon(Icons.explore_rounded)),
],
),
actions: [
GestureDetector(
onTap: () {
// authMethods.signOut();
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => SearchScreen(),
));
},
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Icon(Icons.search)),
)
],
),
drawer: MainDrawer(),
//body: Body(),
bottomNavigationBar: GradientBottomNavigationBar(
fixedColor: Colors.white,
backgroundColorStart: Colors.pink[400],
backgroundColorEnd: Colors.blue[400],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('Home')),
BottomNavigationBarItem(
icon: Icon(Icons.wallet_membership), title: Text('QUA')),
BottomNavigationBarItem(
icon: Icon(Icons.help), title: Text('Help')),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.pink,
elevation: 50,
hoverColor: Colors.red,
autofocus: true,
onPressed: () {
print('hi');
},
child: Icon(
Icons.comment,
),
tooltip: 'Pick Image',
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
}

Answer 1

There is actions property in AppBar widget which is mainly used to put icons in AppBar. And in your case centerTitle is used to align your image to center
Output
Full code
class MyHomePage extends StatefulWidget {
final Function onItemPressed;
MyHomePage({
Key key,
this.onItemPressed,
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: <Color>[Colors.pink[400], Colors.blue[400]]),
),
),
centerTitle: true,
title: Container(
alignment: Alignment.center,
height: 40,
child: SizedBox(
child: Image.asset(
'assets/logo.png',
)),
),
actions: [
IconButton(
onPressed: () {},
icon: Icon(Icons.explore_rounded),
),
IconButton(
onPressed: () {},
icon: Icon(Icons.search),
)
],
),
);
}
}

Answer 2

Material appbar has an actions property, you can use that to put search and compass icon together. In order to achieve the same remove
Container(
padding: const EdgeInsets.symmetric(horizontal: 50),
child: SizedBox(
child: Icon(
Icons.explore_rounded,
))),
from its current position and add it into the actions property just above the search button.