Search code examples
alignmenttext-alignmentappbarflutter-appbar

Alignment Issue Appbar


How can I place the name closer to the "Welcome Back" text? I've tried to do this with centerTitle: true, and textAlign: TextAlign.center but no luck so far? What am I missing out on?

 return new Scaffold(
      appBar: new AppBar(
          brightness: Brightness.light,
          backgroundColor: Colors.white,
          elevation: 0,
          centerTitle: true,
          title: Text(
            "Welcome Back,",
            textAlign: TextAlign.center,
            style: TextStyle(
                color: Color.fromRGBO(49, 39, 79, 1),
                fontWeight: FontWeight.bold,
                fontSize: 20),
          ),
          actions: <Widget>[
            Row(
              children: <Widget>[
                Container(
                    child: Text(name,
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color.fromRGBO(49, 39, 79, 1),
                            fontWeight: FontWeight.bold,
                            fontSize: 20))),

enter image description here


Solution

  • Just customize left: in Padding():

    actions: <Widget>[
      Row(
        children: <Widget>[
        Container(
          child: Text(name, style: TextStyle(color: Color.fromRGBO(49, 39, 79, 1), fontWeight: FontWeight.bold,fontSize: 20))
        ),
        /// Play with the parameter `left: ...`
        Padding(padding: const EdgeInsets.only(left: 30, right: 8.0, top: 8.0, bottom: 8.0),
          child: CircleAvatar(
                   backgroundImage: NetworkImage(imageUrl)),
          ),
        ],
      ),
    ]
    

    Another solution: Use the variable name in the AppBar-Title:

    title: Text("Welcome Back, $name", style: TextStyle(color: Color.fromRGBO(49, 39, 79, 1), fontWeight: FontWeight.bold,fontSize: 20),),
    actions: <Widget>[
      Row(
        children: <Widget>[
        /// Play with the parameter `left: ...`
        Padding(padding: const EdgeInsets.only(left: 30, right: 8.0, top: 8.0, bottom: 8.0),
          child: CircleAvatar(
                   backgroundImage: NetworkImage(imageUrl)),
          ),
        ],
      ),
    ]
    

    Result:

    enter image description here