Open In App

Flutter – Remove Arrow Button in the AppBar

Improve
Improve
Like Article
Like
Save
Share
Report

We can remove the Arrow button in the AppBar by various methods, but in this article, we will cover one of the following methods. Basically this arrow appears when we navigate to the new screen so that we can get back to the previous screen. But if we don’t want this arrow button, then we can use the pushReplacementNamed function to navigate to the new screen.

How to Use?

Dart




floatingActionButton: FloatingActionButton(
        child: Icon(Icons.logout_outlined),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
    },
),


Step By Step Implementation

Step 1: Create a New Project in Android Studio or in Vs code

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the material package

A material package gives us the essential functions and Parameters, Now call the runApp method that needs an Application in the main function.

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

In the above code, runApp method calls the class RunMyApp, Now we have to create it.

Step 3: Creating Stateless Widget

Now we have to make a stateless widget because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more of the application.

Shortcut: For creating a stateless or Stateful widget, you can create a stateless or stateful widget by just typing three alphabets ‘stl’ and you can see a stateless widget and then hit enter. After Adding MaterialApp, set debugShowCheckedModeBanner to false and give it a theme. 

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
      routes: {
        "/logout": (_) => LogoutPage(),
  );
 }
}

Step 4: Now we have to create the MyHomePage Screen. Where actually have nothing, but can use the Scaffold widget, which will have the AppBar and the body of the app. We also use the floating action button to navigate to another page. Now here, we will use pushReplacementNamed,  so that we can’t pop back to the previous screen.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Remove Back Button"),
      ),
      body: Center(
        child: Text("Home Page"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.logout_outlined),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}

Step 5: Now we have to create the new screen Logout where we actually navigate to. But notice that we use the pushReplacementNamed, so the leading arrow does not see.

class LogoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Logout Page"),
      ),
      body: Center(
        child: Text('You have been logged out'),
      ),
    );
  }
}

Complete Code

Dart




import 'package:flutter/material.dart';
  
void main() {
  runApp(RunMyApp());
}
  
class RunMyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
      routes: {
        "/logout": (_) => LogoutPage(),
      },
    );
  }
}
  
class LogoutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Logout Page"),
      ),
      body: Center(
        child: Text('You have been logged out'),
      ),
    );
  }
}
  
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Remove Back Button"),
      ),
      body: Center(
        child: Text("Home Page"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.logout_outlined),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}


Output

Summarize

In this code we actually create two screens named as MyHomePage and Logout Screen, when we navigate to the new screen using pushReplacementNamed, we can’t get back and the arrow button does not appear on the AppBar.



Last Updated : 14 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads