Rounded AppBar in Flutter with Back button

Question

I created a custom rounded AppBar using a code found here, but with just a title in the center. I wanted to add a backbutton in the top left corner inside AppBar and I tried nesting a button and the text in a Row, but the result is that neither the button or the text are shown. Any help?

Here the code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

// ignore: must_be_immutable
class RoundedAppBar extends StatelessWidget implements PreferredSizeWidget {
  String title;

  RoundedAppBar(this.title);
  @override
  Widget build(BuildContext context) {
    return PreferredSize(
        child: LayoutBuilder(builder: (context, constraints) {
          final width =
              constraints.maxWidth * 16; //per modificare "rotondità" app Bar
          return OverflowBox(
            maxHeight: double.infinity,
            maxWidth: double.infinity,
            child: SizedBox(
              height: width,
              width: width,
              child: Padding(
                padding: EdgeInsets.only(
                    bottom: width / 2 - preferredSize.height / 2),
                child: Container(
                    alignment: Alignment.bottomCenter,
                    padding: EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                      color: const Color(0xff000350),
                      shape: BoxShape.circle,
                    ),
                    child: Row(
                      children: [
                        Align(
                          alignment: Alignment.centerLeft,
                          child: IconButton(
                            color: Colors.black,
                            icon: Icon(Icons.chevron_left),
                            onPressed: () => Navigator.pop(context),
                          ),
                        ),
                        Text(
                          title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontFamily: 'Conformity',
                              color: Colors.white,
                              fontSize: 30,
                              fontWeight: FontWeight.normal),
                        ),
                      ],
                    )),
              ),
            ),
          );
        }),
        preferredSize: preferredSize);
  }

  @override
  Size get preferredSize => Size.fromHeight(80);

EDIT: Tried using ListTile as suggested, something happened but didn't work properly. Here the result.

child: ListTile(
                    title: Text(
                      title,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontFamily: 'Conformity',
                          color: Colors.white,
                          fontSize: 30,
                          fontWeight: FontWeight.normal),
                    ),
                    leading: IconButton(
                      color: Colors.white,
                      icon: Icon(Icons.chevron_left),
                      onPressed: () => Navigator.pop(context),
                    ),
                  ),

EDIT: I inserted your code as shown. With trial and error, using 35 as height I was able to see the title, but still no button.

child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      _buildBack(true, context),
                      Container(
                        height: 35,
                        child: Text(
                          title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              fontFamily: 'Conformity',
                              color: Colors.white,
                              fontSize: 30,
                              fontWeight: FontWeight.normal),
                        ),
                      ),
                      _buildBack(false, context),
                    ],

and

  Widget _buildBack(bool isPlaceHolder, BuildContext context) {
    return Visibility(
      child: InkWell(
        child: Icon(
          Icons.close,
          size: 35,
        ),
        onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
      ),
      maintainSize: true,
      maintainAnimation: true,
      maintainState: true,
      visible: !isPlaceHolder,
    );
  }

and here the result

Solution

You can use a ListTile and use a IconButton as leading.

ListTile(
  
  leading: IconButton(
    icon: Icon(Icons.back),
    title: '',
    onPressed => Navigator.pop(context),
   ),
),

Another possibility I see:

As the child from the AppBar

Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              _buildBack(true, context),
              Container(
                height: height,
                child: Text(
                  '$_title',
                  style: Theme.of(context).textTheme.headline2,
                ),
              ),
              _buildBack(false, context),
            ],
          ),

In another place outside the builder.

  Widget _buildBack(bool isPlaceHolder, Buildcontext context) {
      return Visibility(
        child: InkWell(
          child: Icon(
            Icons.close,
            size: widget.height,
          ),
          onTap: () => Navigator.of(context, rootNavigator: true).pop('dialog'),
        ),
        maintainSize: true,
        maintainAnimation: true,
        maintainState: true,
        visible: !isPlaceHolder,
      );
  }}

Here there is again a row as you have tried it yourself, but this one is set up a little differently and an iconButton is built before and after the text, but so that the text remains in the center, the second one is made invisible,

Comments

[m123]

Please try to shorten the code to the relevant part in the future.

[m123]

You can add screenshots directly in in stackoverflow ;)

[c4dado]

Instead of what?

[m123]

Instead of the Row

[m123]

You already have the app bar, this is the content of it, did it work, don't forget to mark the question as solved ;)

[c4dado]

not properly, I edited the post and added a screenshot

[m123]

@c4dado Thanks for the edit, could you please replace the ListTile with a Container with a highly visible color, so that it is clear to see how big the area is. Also is there any error, Otherwise I cannot explain why the icon is not visible.

[c4dado]

prnt.sc/wlyv9p here what you asked. And no, there are no errors.

[c4dado]

Can't run it. How to handle this error? prnt.sc/wlzf0e

[c4dado]

Still nothing showing as in my first attempt. Screenshot: prnt.sc/wlzl5p

[c4dado]

but I also had to replace size: '''widget.height, height: height ''' with a random number like "10", probably I shouldn't did. These were the errors: prnt.sc/wlzprj - prnt.sc/wlzq6n

[m123]

@c4dado Oh yeah right, this was code from my Project, I must have overseen them in the post. Are there any more errors