How to change positions of icons in AppBar in flutter?

user_15410144 0
Viewed 1730

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;
    });
  }
}
dart flutter appbar icons
2 Answers

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

enter image description here

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),
          )
        ],
      ),
    );
  }
}
user_152367860

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.

user_168612540
Related