Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – 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 🙂

Tags:

2

Answers


  1. 0

    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);
}
    Login or Signup to reply.
  2. 0

    Create an app with a static app bar that includes a back button, You can use a WillPopScope to handle back navigation and customize your app bar to reflect the current page.

    import 'package:flutter/material.dart';

class CustomAppBar extends StatelessWidget {

final String title;
final VoidCallback? onBackPressed;

const CustomAppBar({Key? key, required this.title, this.onBackPressed}) : super(key: key);

@override
Widget build(BuildContext context) {
    return AppBar(
            title: Text(title),
            leading: onBackPressed != null
            ? IconButton(
            icon: Icon(Icons.arrow_back),
            onPressed: onBackPressed,
        )
      : null,
);
}}

    Now, you can create a main widget that uses the CustomAppBar. here we set up the navigation logic.

    void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return MaterialApp(
            home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
    return Scaffold(
            appBar: CustomAppBar(
            title: 'Home Page',
  ),
    body: Center(
            child: ElevatedButton(
            onPressed: () {
        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);
        },
          ),
        );
    },
    child: Text('Go to User Info'),
    ),
  ),
);
}}

    Create another class UserInfoPage

    In the UserInfoPage, you can again use the CustomAppBar, but this time, you will pass the onBackPressed callback to handle navigation back to the HomePage.

    class UserInfoPage extends StatelessWidget {
final String data;
const UserInfoPage({Key? key, required this.data}) : super(key: key);
@override
Widget build(BuildContext context) {
    return Scaffold(
            appBar: CustomAppBar(
            title: 'User Info Page',
            onBackPressed: () {
        Navigator.pop(context);
    },
  ),
    body: Center(
            child: Text(data),
  ),
);
}}

    Now run your app. You’ll see a static app bar on both pages. Clicking the button will take you to the UserInfoPage, with a back button to return to the HomePage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search