CODEWITHSUNDEEP
flutterflutter-layout
Volodymyr
Volodymyr

Reputation: 1442

Flutter: CupertinoNavigationBar with leading icon and title

how can I create in Flutter a leading item of Navigation bar with back icon and title of the previous scaffold. Have a look in a picture:

enter image description here

I've tried to put a Text widget inside a Row but got an overflow.

CupertinoNavigationBar(
    middle: Text('New report'),
    leading: Align(
      alignment: Alignment(-1.5, -1),
      child: IconButton(
        onPressed: () {
          Navigator.pop(context);
        },
        icon: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(
              CupertinoIcons.left_chevron,
              color: CupertinoColors.destructiveRed,
            ),
          ],
        ),
      ),
    ),
  ),

Thanks in advance!

Upvotes: 1

Views: 3415

Answers (2)

atmaram
atmaram

Reputation: 500

Now in CupertinoNavigationBar when we give Back action on Bar we also have to provide action to it. This is my working snippet.

You can see that we have to provide IconButton which is Clickable.

return CupertinoPageScaffold(
  navigationBar: CupertinoNavigationBar(
    leading: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        IconButton(
          icon: Icon(CupertinoIcons.chevron_back),
          color: theme.colorScheme.onPrimary,
          onPressed: () {
            Navigator.pop(context);
          },
        )
      ],
    ),
    middle: Text(
      'Second Route',
      style: textStyle,
    ),
    backgroundColor: theme.colorScheme.primary,
  ),
  child: Center(
    child: CupertinoButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: const Text('Go back!'),
    ),
  ),
);

Upvotes: 0

Rodrigo Bastos
Rodrigo Bastos

Reputation: 2448

Your leading could be a Row containing the Icon and the text: Something like that:

CupertinoNavigationBar(
    middle: Text('New report'),
    leading: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Icon(
              CupertinoIcons.left_chevron,
              color: CupertinoColors.destructiveRed,
            ),
             Text('Reports')
             ],
        ),
    ),
  ),

Upvotes: 3

Related Questions