flutter menghapus tombol kembali di appbar

124

Saya bertanya-tanya, apakah ada yang tahu cara untuk menghapus tombol kembali yang muncul di appBardalam aplikasi flutter saat Anda menggunakan Navigator.pushNameduntuk pergi ke halaman lain. Alasan saya tidak menginginkannya di halaman yang dihasilkan ini adalah karena itu berasal dari navigasi dan saya ingin pengguna menggunakan logouttombol sebagai gantinya, sehingga sesi dimulai kembali.

Robert
sumber

Jawaban:

146

Anda dapat menghapus tombol kembali dengan melewatkan kosong new Container()sebagai leadingargumen AndaAppBar .

Namun, jika Anda menemukan diri Anda melakukan ini, Anda mungkin tidak ingin pengguna dapat menekan tombol kembali perangkat untuk kembali ke rute sebelumnya. Daripada menelepon pushNamed, coba teleponNavigator.pushReplacementNamed untuk menghilangkan rute sebelumnya.

Contoh kode lengkap untuk pendekatan terakhir ada di bawah.

import 'package:flutter/material.dart';

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

}
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Remove Back Button"),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.fullscreen_exit),
        onPressed: () {
          Navigator.pushReplacementNamed(context, "/logout");
        },
      ),
    );
  }
}

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
      routes: {
        "/logout": (_) => new LogoutPage(),
      },
    );
  }
}
Collin Jackson
sumber
Ya, perintah saya campur aduk. Saya akan mencobanya, Terima kasih atas bantuan Anda.
Robert
2
@Collin, pushReplacementNamed tampaknya tidak menghilangkan kemungkinan untuk kembali dengan panah mundur sistem.
Jackpap
@Collin Jackson, Apakah pushReplacementNamed()membuang widget layar sebelumnya (dan semua tergantung data & status)?
Dmitriy Blokhin
@Jackpap itu karena benar-benar menunjukkan tanda panah jika ada rute sebelumnya. Jika itu satu-satunya rute, maka tidak ada yang bisa kembali. Dalam kasus Anda, gunakan metode Container () kosong.
ThinkDigital
1
Metode penampung kosong tampaknya menghasilkan ruang di mana tombol kembali seharusnya sehingga judul Appbar dipindahkan sedikit. Masih bukan metode yang ideal.
Hasen
304

Saya yakin solusinya adalah sebagai berikut

Anda sebenarnya:

  • Tidak ingin menampilkan bahwa tombol jelek kembali (:]), dan dengan demikian pergi untuk: AppBar(...,automaticallyImplyLeading: false,...);

  • Tidak ingin pengguna kembali - mengganti tampilan saat ini - dan dengan demikian memilih Navigator.pushReplacementNamed(## your routename here ##):;

  • Tidak ingin pengguna kembali - mengganti tampilan tertentu kembali ke tumpukan - dan karenanya menggunakan: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); mana f adalah fungsi yang kembali truesaat bertemu dengan tampilan terakhir yang ingin Anda simpan di tumpukan (tepat sebelum yang baru);

  • Tidak ingin pengguna kembali - PERNAH - mengosongkan sepenuhnya tumpukan navigator dengan: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

Bersulang

Fabio Veronese
sumber
8
Inilah jawaban yang saya cari! pushReplacementNamed () tidak berfungsi untuk saya, tetapi pengguna yang kembali PERNAH itulah yang akhirnya berhasil! Terima kasih!
Jembatan
1
memang inilah jawaban terbaik.
Jay Jeong
Terima kasih, saya harus menggunakan "pushReplacementNamed", bukan "popAndPushNamed"
camillo777
Ini harus menjadi jawaban yang ditandai
Bright
159

Sebuah cara sederhana untuk menghilangkan tombol kembali di AppBar adalah untuk set automaticallyImplyLeadingke false.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),
Jackpap
sumber
Terima kasih untuk kesederhanaannya
Qutbuddin Bohra
Meskipun ini sederhana untuk diterapkan, untuk skenario yang diberikan, Navigator.pushReplacementNamedadalah solusi yang tepat. Apa yang Anda sarankan adalah solusi yang jika diterapkan dalam semua skenario, pada akhirnya dapat menyimpulkan perilaku yang salah, seperti di suatu tempat di mana seseorang ingin AppBarterus menyiratkan perilaku utama (yaitu: tombol navigasi kembali)
Guilherme Matuella
35

Hanya ingin menambahkan beberapa deskripsi atas jawaban @Jackpap:

otomatisImplyLeading:

Ini memeriksa apakah kita ingin menerapkan widget belakang (widget terkemuka) di atas bilah aplikasi atau tidak. Jika automaticImplyLeading salah maka secara otomatis spasi diberikan ke judul dan jika widget utama bernilai true, maka parameter ini tidak berpengaruh.

void main() {
  runApp(
    new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false, // Used for removing back buttoon. 
          title: new Center(
            child: new Text("Demo App"),
          ),
        ),
        body: new Container(
          child: new Center(
            child: Text("Hello world!"),
          ),
        ),
      ),
    ),
  );
}  
jitsm555
sumber
6

// jika Anda ingin menyembunyikan tombol kembali gunakan kode di bawah ini

class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Remove Back Button'),
    
    //hide back button
    automaticallyImplyLeading: false,
   ),
  body: Center(
    child: Container(),
  ),
);
}
}

// jika Anda ingin menyembunyikan tombol kembali dan menghentikan pop action gunakan kode di bawah ini

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) {
 return new WillPopScope(

  onWillPop: () async => false,
  child: Scaffold(
    appBar: AppBar(
      title: Text("Second Screen"),
      //For hide back button
      automaticallyImplyLeading: false,
    ),
    body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('Back'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ],
        )
    ),
  ),
);
 }

[

ShigaSuresh
sumber
4

Widget AppBar memiliki properti bernama automaticallyImplyLeading. Secara default nilainya adalah true. Jika Anda tidak ingin flutter secara otomatis membuat tombol kembali untuk Anda, buat saja propertinya false.

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
),

Untuk menambahkan tombol kembali kustom Anda

appBar: AppBar(
  title: Text("YOUR_APPBAR_TITLE"), 
  automaticallyImplyLeading: false,
  leading: YOUR_CUSTOM_WIDGET(),
),
Ahammed Hossain Shanto
sumber
3

Jika menavigasi ke halaman lain. Navigator.pushReplacement()dapat digunakan. Ini dapat digunakan jika Anda menavigasi dari login ke layar beranda. Atau Anda bisa menggunakan.
AppBar(automaticallyImplyLeading: false)

SR Keshav
sumber
3

Gunakan ini untuk slivers AppBar

SliverAppBar (
        automaticallyImplyLeading: false,
        elevation: 0,
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        pinned: true,
      ),

Gunakan ini untuk Appbar normal

 appBar: AppBar(
    title: Text
    ("You decide on the appbar name"
    style: TextStyle(color: Colors.black,), 
    elevation: 0,
    brightness: Brightness.light,
    backgroundColor: Colors.white,
    automaticallyImplyLeading: false,

),
Diskon Kobby
sumber
-2
  appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
        leading: new Container(),
      ),

Ini bekerja dengan baik

siva
sumber
kita perlu menyediakan tag Container () terdepan
siva