the question is exactly same as

and other two buttons on the right side. the solutions in the link all put the title widget slightly on the left side.

does anyone know how to do this without using Stack? I'm afraid of the title widget being over the button widgets when the title gets too long.

the code:

SizedBox(
  height: 40,
  width: MediaQuery.of(context).size.width,
  child: Row(
      children: [
        const SizedBox(width: 17),
        Text(
          'TITLE',
          style: const TextStyle(
              color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
        ),
        Spacer(),
        Row(
            children: [
              GestureDetector(
                onTap: (){null;},
                child: SizedBox(
                  child: Icon(Icons.wallet_membership, color: Colors.white),
                ),
              ),
              const SizedBox(width: 17),
              GestureDetector(
                onTap: (){Get.toNamed('/wallet_setting');},
                child: const SizedBox(
                  child: Icon(Icons.settings, color: Colors.white),
                ),
              ),
            ]
        )

      ]
  ),
)

CodePudding user response：

Try this One

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Expanded(
      child: Container(
        child: Center(
          child: Text(
            'TITLE',
            style: const TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.w500),
          ),
        )
      )
    ),
    Align(
      alignment: Alignment.centerRight,
      child: Row(
        children: [
          GestureDetector(
            onTap: (){null;},
            child: SizedBox(
              child: Icon(Icons.wallet_membership, color: Colors.white),
            ),
          ),
          const SizedBox(width: 17),
          GestureDetector(
            onTap: (){Get.toNamed('/wallet_setting');},
            child: const SizedBox(
              child: Icon(Icons.settings, color: Colors.white),
            ),
          ),
        ]
      )
    )
  ],
)

OutPut:

CodePudding user response：

i think you should wrap it with centre

CodePudding user response：

Try this approach:

first make widget from your right widgets:

Widget _rightIcons() {
    return Row(children: [
      GestureDetector(
        onTap: () {
          null;
        },
        child: SizedBox(
          child: Icon(Icons.wallet_membership, color: Colors.white),
        ),
      ),
      const SizedBox(width: 17),
      GestureDetector(
        onTap: () {
           Get.toNamed('/wallet_setting');
        },
        child: const SizedBox(
          child: Icon(Icons.settings, color: Colors.white),
        ),
      ),
    ]);
  }

then build your header like this:

Row(
    children: [
      _rightIcons(),
      Expanded(
        child: Center(
          child: Text(
            'TITLE',
            style: const TextStyle(
                color: Colors.white,
                fontSize: 30,
                fontWeight: FontWeight.w500),
          ),
        ),
      ),
      Opacity(
        opacity: 0,
        child: _rightIcons(),
      )
    ],
  ),

CodePudding user response：

You can use centerTitle:true on Appbar

appBar: AppBar(
  centerTitle: true,
  title: Text("title"),
  actions: [

---

Another way

Container(
  color: Colors.purple,
  height: 40 * 2,
  width: MediaQuery.of(context).size.width,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      IconButton(onPressed: () {}, icon: Icon(Icons.navigate_before)),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            flex: 1,
            child: SizedBox(),
          ),
          Expanded(
            flex: 4,
            child: Text(
              'TITLE',
              textAlign: TextAlign.center,
              style: const TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  fontWeight: FontWeight.w500),
            ),
          ),
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    GestureDetector(
                      child: Icon(Icons.wallet_membership,
                          color: Colors.white),
                    ),
                    const SizedBox(width: 17),
                    GestureDetector(
                      onTap: () {},
                      child: const SizedBox(
                        child:
                            Icon(Icons.settings, color: Colors.white),
                      ),
                    ),
                  ]),
            ),
          )
        ],
      ),
    ],
  ),
)

---

Preferable solution: You can implements PreferredSizeWidget to create custom Appbar. Play with color and other decoration.

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyAppBar({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment.bottomCenter,
          child: Text("title"),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              IconButton(
                //you can use callback method to get onpressed
                onPressed: () {},
                icon: Icon(Icons.settings),
              ),
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.settings),
              ),
            ],
          ),
        )
      ],
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight * 2);
}

And use like appBar: MyAppBar(),