I need a dynamic "back" button on every screen/page that also shows the title of the previous screen.
Navigation is done via global navigatorKey, pushing new routes is not done from a specific screen.
Is this possible with built-in navigator or it needs to be built from scratch?
Just pass the string you want to display to the constructor of the widget which will be your next page.
Example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
Widget build(context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FlatButton(
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return Sec('title1');
}));
},
child: Text('Press here'))));
}
}
Widget backButton(context, t) {
return Row(children: [
Expanded(
child: IconButton(
icon: Icon(Icons.backspace),
onPressed: () => Navigator.pop(context),
),
),
Text(t,style:TextStyle(fontSize:16))
]);
}
class Sec extends StatelessWidget {
String t;
Sec(String x) {
t = x;
}
Widget build(context) {
return Scaffold(
appBar: AppBar(leading: backButton(context, t)),
body: Center(
child: FlatButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Press here to go back'))));
}
}
Output
Related
I've followed some online tutorials and managed to implement ChangeNotifier when the app has a single route however none of these explain how to implement this when the app has more than one route (screen) which is rather the point!
I made an attempt to figure this out myself but when the app runs in the emulator I get a blank screen.
/* main.dart */
import 'dart:collection'; // used in test.dart
import 'package:flutter/foundation.dart'; // used in test.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class Person extends ChangeNotifier {
Person({this.firstName});
String firstName = '';
void updateName(String n) {
this.firstName = n;
notifyListeners();
}
}
void main() {
runApp(
Provider(
create: (_) => Person(firstName: 'Mark'),
child: MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeRoute(),
'/second': (context) => SecondRoute(),
'/third': (context) => ThirdRoute(),
},
),
)
);
}
class HomeRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Provider.of<Person>(context).firstName),
),
body: Center(
child: new IconButton(
icon: new Icon(Icons.favorite, color: Colors.redAccent),
iconSize: 70.0,
onPressed: () {
Navigator.of(context).pushNamed("/second");
}
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Page'),
),
body: Center(
child: Text(Provider.of<Person>(context).firstName),
),
);
}
}
class ThirdRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Third Page'),
),
body: Center(
child: Text('Third Route'),
),
);
}
}
The project builds and runs with no error messages which has stumped me.
Any thoughts?
Code developed in FlutLab
Having a problem with getting text to display in my home.dart file when it's entered in the FloatingActionButton.
Below is the code sample. Any suggestions where I am getting it wrong. I believe that the 'String value;' line must be within the same MaterialButton function, though not sure how to do it without ruining it further.
}`
I'm using a simple app here to demonstrade the behavior. You can test by copy and running this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SomeScreen(),
);
}
}
class SomeScreen extends StatefulWidget {
#override
_SomeScreenState createState() => _SomeScreenState();
}
class _SomeScreenState extends State<SomeScreen> {
String value = '';
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () async {
await _createDialog(context);
setState(() {});
},
child: Icon(Icons.add),
backgroundColor: Colors.red,
),
body: Container(
color: Colors.blue,
child: Center(
child: Text(value),
),
),
);
}
_createDialog(context) async {
await showDialog(
context: context,
builder: (BuildContext dialogContext) {
return AlertDialog(
title: Text('title'),
content: TextField(
onChanged: (text) {
value = text;
},
),
actions: <Widget>[
FlatButton(
child: Text('buttonText'),
onPressed: () {
Navigator.pop(context);
},
),
],
);
},
);
}
}
Building a flutter app. I want one page to display in landscape, and the rest of the app to display in portrait. I can make that happen using techniques that I've found here and elsewhere, but it doesn't work very well. On initially entering the landscape screen, there's a kind of "shudder" while the app seems to be figuring out what to do. Then it displays ok. But on going back, the original screen first is displayed in landscape for a considerable time (nearly a second), and then there's another "shudder" before the screen is displayed in portrait. Simplified main.dart below. What am I doing wrong?
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class ScreenOne extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('screen one'),
),
body: Column(
children: <Widget>[
Center(
child: Text('some text'),
),
RaisedButton(
child: Text('Go to screen two'),
onPressed: () {
Navigator.pushNamed(
context,
'screenTwo',
);
},
)
],
),
);
}
}
class ScreenTwo extends StatefulWidget {
#override
_ScreenTwoState createState() => _ScreenTwoState();
}
class _ScreenTwoState extends State<ScreenTwo> {
#override
void dispose() {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
super.dispose();
}
#override
Widget build(BuildContext context) {
if (MediaQuery.of(context).orientation != null) {
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,
]);
}
return Scaffold(
appBar: AppBar(
title: Text('screen two'),
),
body: Center(
child: Text('other text'),
),
);
}
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ScreenOne(),
routes: {
'screenTwo': (ctx) => ScreenTwo(),
},
);
}
}
Modify your second screen like this
return WillPopScope(
onWillPop: () {
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
]);
Navigator.of(context).pop();
//we need to return a future
return Future.value(false);
},
child: Scaffold(
appBar: AppBar(
title: Text('screen two'),
),
body: Center(
child: Text('other text'),
),
),
);
Just wonder if I use this code to return PageA from PageD, which function will it get called in PageA?
PageD
Navigator.of(context).popUntil(ModalRoute.withName(PageA.ROUTE));
I would like to make the listView on PageA refreshed once it is back from PageD, but I don't know how to achieve it.
I added a then in PageA, but it is not printing anything.
Navigator.pushNamed(context, PageB.ROUTE).then((onValue) {
print("call from Page4");
_refreshListView();
});
Edit
My project flow is Page A > Page B > Page C > Page D > page A.
All you need to do is return data when you pop PageD and await the data when you push.
This code should help:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/' : (context) => PageA(),
'/go': (context) => PageD()
},
);
}
}
class PageA extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page A"),
),
body: Center(
child: ListView(
children: <Widget>[
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
_navigateAndDisplaySelection(context);
},
child: Icon(Icons.forward),
),
);
}
_navigateAndDisplaySelection(BuildContext context) async {
final result = await Navigator.pushNamed(
context,
'/go'
);
if(result){
print(result);
//call the refresh ListView here
_refreshListView();
}
}
}
class PageD extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page D"),
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.white,),
onPressed: (){
Navigator.pop(context, true);
},
)
),
body: Center(
child: Text("Press back!!"),
),
);
}
}
As to what you explained in the comments... you have to pass arguments from Page D to A when navigating.
Hope this helps.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: '/',
routes: {
'/': (context) => PageA(),
'/b': (context) => PageB(),
'/c': (context) => PageC(),
'/d': (context) => PageD()
},
);
}
}
class PageA extends StatelessWidget {
#override
Widget build(BuildContext context) {
final bool shouldRefresh = ModalRoute.of(context).settings.arguments;
if (shouldRefresh != null) {
print(shouldRefresh);
//call the refresh ListView here
_refreshListView();
}
return Scaffold(
appBar: AppBar(
title: Text("Page A"),
),
body: Center(
child: ListView(
children: <Widget>[],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, '/b');
},
child: Icon(Icons.forward),
),
);
}
}
class PageB extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page B"),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.forward),
onPressed: () {
Navigator.pushNamed(context, '/c');
},
),
);
}
}
class PageC extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page C"),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.forward),
onPressed: () {
Navigator.pushNamed(context, '/d');
},
),
);
}
}
class PageD extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Page D"),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () {
Navigator.pushNamed(context, '/', arguments: true);
},
)),
body: Center(
child: Text("Press back!!"),
),
);
}
}
If you want to go to Page D when you press back in Page A then use this
class PageA extends StatelessWidget {
#override
Widget build(BuildContext context) {
final bool shouldRefresh = ModalRoute.of(context).settings.arguments;
print(shouldRefresh);
return Scaffold(
appBar: AppBar(
title: Text("Page A"),
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white,
),
onPressed: () {
Navigator.pushNamed(
context,
'/d',
arguments: true
);
},
),
),
body: Center(
child: ListView(
children: <Widget>[
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushNamed(context, '/b');
},
child: Icon(Icons.forward),
),
);
}
}
I wrote a code for ExitPopUp on a single page. Here is the code -
import 'package:flutter/material.dart';
class ExitPopUp extends StatelessWidget {
final page;
ExitPopUp(this.page);
#override
Widget build(BuildContext context) {
Future<bool> showExitPopUp() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Confirm"),
content: Text("Do you want to Exit ?"),
actions: <Widget>[
RaisedButton(child: Text("No"), onPressed: null),
RaisedButton(child: Text("Yes "), onPressed: null)
],
);
});
}
return WillPopScope(child: page, onWillPop: showExitPopUp);
}
}
Now I want to call this ExitPopUp from other page (***example:* registration.dart)**. Here is the code of Registration page-
import 'package:bloodhero/widgets/drawer.dart';
import 'package:bloodhero/widgets/exitpop.dart';
import 'package:flutter/material.dart';
import 'package:bloodhero/widgets/form.dart';
class Registration extends StatefulWidget {
#override
_RegistrationState createState() => _RegistrationState();
}
class _RegistrationState extends State<Registration> {
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () {
print("Hey I am Dialog Box");
return ExitPopUp();
},
child: Scaffold(
appBar: AppBar(
title: Text("Registration"),
backgroundColor: Colors.deepOrange,
),
drawer: DrawerApp(),
body: ListView(
children: <Widget>[
FormPage(),
],
)));
}
}
But It's not working. Error show in OnWillPop.
How can I fix it?
You can copy paste run full code below
You can pass Scaffold part code as parameter of ExitPopUp
code snippet
class _RegistrationState extends State<Registration> {
#override
Widget build(BuildContext context) {
return ExitPopUp(Scaffold(
appBar: AppBar(
title: Text("Registration"),
backgroundColor: Colors.deepOrange,
),
//drawer: DrawerApp(),
body: ListView(
children: <Widget>[
Text("FormPage()"),
],
)));
}
}
working demo
full code
import 'package:flutter/material.dart';
class ExitPopUp extends StatelessWidget {
final page;
ExitPopUp(this.page);
#override
Widget build(BuildContext context) {
Future<bool> showExitPopUp() {
return showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("Confirm"),
content: Text("Do you want to Exit ?"),
actions: <Widget>[
RaisedButton(child: Text("No"), onPressed: (){}),
RaisedButton(child: Text("Yes "), onPressed: null)
],
);
});
}
return WillPopScope(child: page, onWillPop: showExitPopUp);
}
}
class Registration extends StatefulWidget {
#override
_RegistrationState createState() => _RegistrationState();
}
class _RegistrationState extends State<Registration> {
#override
Widget build(BuildContext context) {
return ExitPopUp(Scaffold(
appBar: AppBar(
title: Text("Registration"),
backgroundColor: Colors.deepOrange,
),
//drawer: DrawerApp(),
body: ListView(
children: <Widget>[
Text("FormPage()"),
],
)));
}
}
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Registration(),
);
}
}