如何在 flutter 的 AppBar 中更改图标的位置？

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.