Flutter Scaffold Appbar not showing the back button
Try to make your own back button :
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back_ios),
iconSize: 20.0,
onPressed: () {
_goBack(context);
},
),
centerTitle: true,
title: Text('back')),
And the _goBack method :
_goBack(BuildContext context) {
Navigator.pop(context);
}
Flutter 2.0 appbar back button disappeared if contains endDrawer
This is current behavior in version 2.0, if
condition also check !hasEndDrawer
version 1.17
if (canPop)
leading = useCloseButton ? const CloseButton() : const BackButton();
https://github.com/flutter/flutter/blob/aee9e94c21009bfc6c08f442eacde06f001c25f9/packages/flutter/lib/src/material/app_bar.dart#L510
version 2.0
if (!hasEndDrawer && canPop)
leading = useCloseButton ? const CloseButton() : const BackButton();
https://github.com/flutter/flutter/blob/ca2bef6ee915d943b5a160055b5065ec3391f19a/packages/flutter/lib/src/material/app_bar.dart#L793
You can add your own logic in leading
code snippet
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
final ScaffoldState scaffold = Scaffold.maybeOf(context);
final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
final bool canPop = parentRoute?.canPop ?? false;
if (hasEndDrawer && canPop) {
return BackButton();
} else {
return SizedBox.shrink();
}
},
),
title: Text('Page 2'),
),
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Page1(),
);
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: TextButton(
child: Text(
'Page 1',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Page2()));
},
)),
),
);
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
final ScaffoldState scaffold = Scaffold.maybeOf(context);
final ModalRoute<dynamic> parentRoute = ModalRoute.of(context);
final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
final bool canPop = parentRoute?.canPop ?? false;
if (hasEndDrawer && canPop) {
return BackButton();
} else {
return SizedBox.shrink();
}
},
),
title: Text('Page 2'),
),
body: Container(
child: Center(
child: TextButton(
child: Text(
'Page 2',
style: TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),
),
onPressed: () {
Navigator.pop(context);
},
),
),
),
endDrawer: Drawer(),
);
}
}
flutter remove back button on appbar
You can remove the back button by passing an empty new Container()
as the leading
argument to your AppBar
.
If you find yourself doing this, you probably don't want the user to be able to press the device's back button to get back to the earlier route. Instead of calling pushNamed
, try calling Navigator.pushReplacementNamed
to cause the earlier route to disappear.
The function pushReplacementNamed
will remove the previous route in the backstack and replace it with the new route.
Full code sample for the latter is below.
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(),
},
);
}
}
How to change the appBar back button color
You have to use the iconTheme
property from the AppBar , like this:
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.black, //change your color here
),
title: Text("Sample"),
centerTitle: true,
),
Or if you want to handle the back button by yourself.
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
title: Text("Sample"),
centerTitle: true,
),
Even better, only if you want to change the color of the back button.
appBar: AppBar(
leading: BackButton(
color: Colors.black
),
title: Text("Sample"),
centerTitle: true,
),
Appbar not showing back button
Try this
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
back button inside AppBar showing black screen in flutter
The reason why you see a blank screen is because you navigated using pushReplacement
. What pushReplacement
does it that it will navigate to the next screen without stacking itself to the route meaning that it will make the app forget that the last screen was your screen B. Try using Navigator.push()
instead.
Here is an example:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ScreenC()),
);
}
Related Topics
Gson Expected Begin_Array But Was String At Line 1 Column 62
Sharing a Variable Between Multiple Different Threads
How to Center Crop a Background Image of Linear Layout
Java to Jackson Json Serialization: Money Fields
How to Call a Function Only After the Previous Function Is Fully Executed in Java
Intellij Idea - Gradle: Execution Failed for Task ':Compilejava'
Java Spring @Scheduled Tasks Executing Twice
Spring Boot Application Shutdown Immediate After Starting
How to Change Cookie Processor to Legacycookieprocessor in Tomcat 8
Spring Webclient: How to Stream Large Byte[] to File
Deserialization With @Jsonsubtypes for No Value - Missing Property Error
How to Do Name Validation Allowing Alphabet, Spaces and Dot in Android
Automatically Convert Style Sheets to Inline Style
Create List of Object from Another Using Java 8 Streams
Java.Time.Format.Datetimeparseexception: Text Could Not Be Parsed At Index 3