Flutter Title center-allignment

Question

I made a custom app bar with the Container, but i need the title to be placed in the center of the row and the back button to be placed on the edge of left side. I did try it out by adding the spacer, mainaxisallignment everything but it is not properly getting placed as required. So is there any approach i could make use of? Thanks in advance.

Widget header() {
    return new Container(
      height: 140,
      decoration: BoxDecoration(
          color: Color(0xFFAFDCEC),
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(20),
              bottomRight: Radius.circular(20))),
      width: MediaQuery.of(context).size.width,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 60,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(icon: Icon(Icons.arrow_back_ios, color: Colors.white,),),
              Text(
                'To-Do List',
                style: TextStyle(color: Colors.white, fontSize: 25),
              )
            ],
          )
        ],
      ),
    );
  }

see if this helps [Align](https://api.flutter.dev/flutter/widgets/Align-class.html) — dev-aentgs, Jun 03 '20 at 11:31
question is on similar line to [How to align single widgets in Flutter?](https://stackoverflow.com/questions/53716571/how-to-align-single-widgets-in-flutter) — dev-aentgs, Jun 03 '20 at 11:32
using the alignment property i can just bring the text to the center only inside a container/center widget not inside the row — Niroop Nife, Jun 04 '20 at 01:59

Nickan · Answer 1 · 2020-06-03T07:14:33.730

0

Row(
    // mainAxisAlignment: MainAxisAlignment.spaceAround,

    children: <Widget>[

      SizedBox(width:10), //if you want to have some space (like 10px) from left edge for back button use this or wrapping IconButton with Padding with only left prameter

      IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: Colors.white,
          ),
          onPressed: () {}),

      Expanded(
        child: Center(
          child: Text(
            'To-Do List',
            style: TextStyle(color: Colors.white, fontSize: 25),
          ),
        ),
      ),

    ],
)

edited Jun 03 '20 at 07:14

answered Jun 03 '20 at 07:02

Nickan

466
5
17

From your code the title is starting from the center but i need the title to be placed in center – Niroop Nife Jun 03 '20 at 07:47

Flutter Title center-allignment

1 Answers1