CODEWITHSUNDEEP
flutterflutter-navigationflutter-appbar
Guy Mayo
Guy Mayo

Reputation: 21

Create an app with static app bar and a back button on the top left

I am new to flutter and I am trying to create a simple app with a "static" that doesn't change between pages. I want also that the app bar will have a back button the page is changed, how can i keep truck of that.

I have a created a widget for the app bar and tried making it statefull widget and save the Navigator state so that when it updates i will update my appBar widget.

I will add the code for how i change pages as well:

onTap: () {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) =>
          UserInfoPage(data: 'Hello from Home Page!'),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) {
        return FadeTransition(opacity: animation, child: child);
      },
    ),
  );
},

Thank you for your help guys, I am here to learn :)

Upvotes: -1

Views: 56

Answers (2)

Guy Mayo
Guy Mayo

Reputation: 21

Thank you, everyone, for your help. In the end, what was bothering me was that when changing pages, the entire page transitioned in a weird way, and I wanted the app bar to remain the same while the page changed.

All I did was simply modify the animation of the page transitions.

Here is a code example:

Function to move to another page:

onTap: () {
  Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) =>
          UserInfoPage(data: 'Hello from Home Page!'),
      transitionsBuilder:
          (context, animation, secondaryAnimation, child) {
        return FadeTransition(opacity: animation, child: child);
      },
    ),
  );
},

To add the back button and prevent the app bar from transitioning weirdly, all I did was move the title to the center:

import 'package:flutter/material.dart';

class UserAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  final Size preferredSize;

  // Constructor to allow custom height if needed
  UserAppBar({super.key, this.customHeight = kToolbarHeight})
      : preferredSize = Size.fromHeight(customHeight),
        userIconHeight = customHeight * 0.75;

  final double customHeight;
  final double userIconHeight;

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: Colors.black,
      centerTitle: true,
      title: const Text(
        "Heyo",
        style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontStyle: FontStyle.italic),
      ),
      actions: [
        IconButton(
          onPressed: () {},
          icon: ClipOval(
              child: Image.asset(
            'assets/icons/profile-pic.jpg',
            width: userIconHeight,
            height: userIconHeight,
            fit: BoxFit.cover,
          )),
        )
      ],
    );
  }
}

Upvotes: 0

th38amorim
th38amorim

Reputation: 11

To help you with navigation and control of the back button in the AppBar, a good practice is to use the Scaffold widget on each page and manage navigation through the Navigator. Then, you can configure the AppBar of each page to display the back button automatically when needed, using the automaticallyImplyLeading property of the AppBar. This will make Flutter display the back button when there is a previous page in the navigation stack.

Here is a simplified approach:

import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
  final String title;

  MyAppBar({required this.title});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title),
      // O botão de voltar será exibido automaticamente quando necessário
      automaticallyImplyLeading: true,
    );
  }

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

Upvotes: 0

Related Questions