Question 76038 in Flutter Question posted in
The official Flutter documentation can be found here.

How to center app bar text title with buttons next to it – Flutter

I’m trying to center my Text and two icon buttons which are the arrows in the middle. I tried adding padding but it seems kind of brute force, wondering if there was a proper way for this. problem im having

return Scaffold(
  appBar: AppBar(
    title: Row(
      children: [
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            // do something when the back arrow button is tapped
          },
          color: Colors.black,
        ),
        Text(
          'Today',
          style: TextStyle(
            color: Colors.black, // set the color of the title text
          ),
        ),
        IconButton(
          icon: Icon(Icons.arrow_forward),
          onPressed: () {
            // do something when the forward arrow button is tapped
          },
          color: Colors.black,
        ),
      ],
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      onPressed: () {},
    ),
    actions: [
      Padding(
        padding: EdgeInsets.only(
            right: 12.0), // set the horizontal padding to 16.0
        child: IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors
                .black, // set the color of the search icon button to white
          ),
          onPressed: () {},
        ),
      ),
    ],
    elevation: 0,
  ),

I also saw that you can add a spacer widget but don’t think that’s wise.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I just needed to wrap the widget with a center widget with mainAxisAlignment

    return Scaffold(
  appBar: AppBar(
    title: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: () {
              // do something when the back arrow button is tapped
            },
            color: Colors.black,
          ),
          Text(
            'Today',
            style: TextStyle(
              color: Colors.black, // set the color of the title text
            ),
          ),
          IconButton(
            icon: Icon(Icons.arrow_forward),
            onPressed: () {
              // do something when the forward arrow button is tapped
            },
            color: Colors.black,
          ),
        ],
      ),
    ),
    backgroundColor: Theme.of(context).scaffoldBackgroundColor,
    centerTitle: true,
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
      ),
      onPressed: () {},
    ),
    actions: [
      Padding(
        padding: EdgeInsets.only(
            right: 12.0), // set the horizontal padding to 16.0
        child: IconButton(
          icon: Icon(
            Icons.settings,
            color: Colors
                .black, // set the color of the search icon button to white
          ),
          onPressed: () {},
        ),
      ),
    ],
    elevation: 0,
  ),

  2. 0

    There are two possible solutions:

     Row(
   mainAxisAlignment: MainAxisAlignment.center,
   children: [...]
 );

    or

     Row(
   mainAxisSize: MainAxisSize.min,
   children: [...]
 );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search