플러터 앱바의 뒤로 버튼 제거


123

다른 페이지로 이동할 appBar때 Flutter 앱 에 표시되는 뒤로 버튼을 제거하는 방법을 아는 사람이 있는지 궁금 Navigator.pushNamed합니다. 이 결과 페이지에서 원하지 않는 이유는 탐색에서 오는 것이고 사용자가 logout대신 단추 를 사용 하여 세션이 다시 시작 되기를 원 하기 때문입니다.

답변:


145

new Container()leading인수 로 전달하여 뒤로 버튼을 제거 할 수 있습니다 AppBar.

그러나이 작업을 수행하는 경우 사용자가 장치의 뒤로 버튼을 눌러 이전 경로로 돌아갈 수있는 것을 원하지 않을 것입니다. 대신 호출하는 pushNamed호출 시도 Navigator.pushReplacementNamed이전 경로가 사라 발생할 수 있습니다.

후자의 접근 방식에 대한 전체 코드 샘플은 다음과 같습니다.

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(),
      },
    );
  }
}

네, 내 명령이 뒤섞여 있습니다. 시도해 보겠습니다. 도와 주셔서 감사합니다.
Robert

2
@Collin, pushReplacementNamed는 시스템 뒤로 화살표로 되돌아 갈 가능성을 제거하지 않는 것 같습니다.
Jackpap

@Collin Jackson, pushReplacementNamed()이전 화면 위젯을 삭제 합니까 (및 모든 데이터 및 상태에 따라 다름)?
Dmitriy Blokhin 2018

@Jackpap은 이전 경로가 있으면 실제로 화살표를 표시하기 때문입니다. 이것이 유일한 경로라면 다시 갈 것이 없습니다. 귀하의 경우에는 빈 Container () 메서드를 사용하십시오.
ThinkDigital jul.

1
빈 컨테이너 메서드는 뒤로 버튼이 있었을 공간이 생겨 Appbar 제목이 약간 이동합니다. 여전히 이상적인 방법은 아닙니다.
Hasen 19

303

해결책은 다음과 같습니다.

당신은 실제로 :

  • 못생긴 뒤로 버튼 (:])을 표시하고 싶지 않으므로 : AppBar(...,automaticallyImplyLeading: false,...);

  • 사용자가 현재보기 로 돌아가서 다음으로 이동하는 것을 원하지 않습니다 . Navigator.pushReplacementNamed(## your routename here ##);

  • - 수행은 사용자가 다시 가고 싶지 스택의 특정 뷰 다시 교체 - 따라서 사용 Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); f는 반환하는 함수입니다 true당신이 (오른쪽 새로운 일 전) 스택에 유지하려는 마지막보기 회의 때이;

  • - 사용자가 다시 가고 싶지 않아 EVER - 완전히 네비게이터 스택을 비우는 : Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

건배


8
이것이 제가 찾고 있던 대답이었습니다! pushReplacementNamed ()는 나를 위해 작동하지 않았지만 사용자가 EVER로 돌아가서 결국 작동했습니다! 감사합니다!
s.bridges

1
실제로 이것이 최선의 대답입니다.
제이 정

감사합니다. "popAndPushNamed"대신 "pushReplacementNamed"를 사용해야했습니다
camillo777

표시된 답변이어야합니다
Bright

158

AppBar에서 뒤로 버튼을 제거하는 간단한 방법은로 설정 automaticallyImplyLeading하는 것 false입니다.

appBar: AppBar(
  title: Text("App Bar without Back Button"),
  automaticallyImplyLeading: false,
),

간단 해 주셔서 감사합니다
Qutbuddin Bohra

이것은 구현이 간단하지만 주어진 시나리오에 Navigator.pushReplacementNamed대한 올바른 솔루션입니다. 제안한 것은 모든 시나리오에 적용되면 결국 잘못된 동작을 추론 할 수있는 해결 방법입니다 AppBar(예 : 누군가가 계속해서 선행 동작 (예 : 뒤로 탐색 단추)을 암시하는 위치)
Guilherme Matuella

35

@Jackpap 답변에 대한 설명을 추가하고 싶습니다.

automaticImplyLeading :

앱바 위에 백 위젯 (리딩 위젯)을 적용할지 여부를 확인합니다. automaticImplyLeading이 false이면 제목에 자동으로 공백이 지정되고 선행 위젯이 true이면이 매개 변수가 적용되지 않습니다.

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!"),
          ),
        ),
      ),
    ),
  );
}  

5

// 뒤로 버튼을 숨기려면 코드 아래 사용

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(),
  ),
);
}
}

// 뒤로 버튼을 숨기고 팝 액션을 중지하려면 아래 코드를 사용하십시오.

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);
              },
            ),
          ],
        )
    ),
  ),
);
 }


[


4

AppBar 위젯에는 automaticallyImplyLeading. 기본적으로 값은 true입니다. flutter가 자동으로 뒤로 버튼을 빌드하지 않으려면 속성을 만드십시오 false.

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

사용자 지정 뒤로 단추를 추가하려면

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

3

다른 페이지로 이동하는 경우. Navigator.pushReplacement()사용할 수 있습니다. 로그인에서 홈 화면으로 이동하는 경우 사용할 수 있습니다. 또는.
AppBar(automaticallyImplyLeading: false)


2

슬라이 버 AppBar에 사용

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

일반 Appbar에 사용

 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,

),

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

잘 작동합니다


새로운 컨테이너 () 태그 : 우리는 선도적 인 제공해야
시바
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.