Search code examples
flutterdart

Centre the appbar with extra icons


I am new to Flutter and I have used two icons in the leading because of that my title is not centred I have also used centre widget, but that also didn't work.

Here's my appbar code:

appBar: AppBar(
  automaticallyImplyLeading: false,
  title: Stack(
    children: [
      Center(
        child: Text(
          _appBarTitle,
          style: const TextStyle(color: Colors.white),
        ),
      ),
    ],
  ),
  backgroundColor: AppColors.appbarColor,
  scrolledUnderElevation: 0,
  leading:const SizedBox(
    width: 70, 
  ),
  actions: [
    IconButton(
      onPressed: () {
        setState(() {
          _isSearchVisible = !_isSearchVisible;
        });
      },
      icon:const Icon(Icons.search, size: 30, color: Colors.white),
    ),
    IconButton(
      onPressed: () {
        Navigator.of(context).push(MaterialPageRoute(builder: (context) => const CartScreen()));
      },
      icon: const Icon(Icons.shopping_cart, size: 30, color: Colors.white),
    ),
  ],
),
  

enter image description here
As you can see, this is not perfectly centred.


Solution

  • Just use centerTitle: true in your AppBar.

    AppBar(
      title: Text('Your Title'),
      centerTitle: true,
    )