So, after building my first flutter page, I began working on some other flutter pages for my app. I successfully made two other flutter pages and was able to allows users to navigate between the two, however when I try to allow users to navigate on the original flutter page to any of the other two flutter pages, nothing happens.
Note: the code for navigation seems to be properly written (it works for the other two pages)
Note 2: The line where I navigate to another page is linked to a raised button labeled 'View Record'
Can anyone point anything out in this page that wouldn't allow users to navigate to another page? Thank you!
import 'package:flutter/material.dart';
import 'package:faui/faui.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:provendor3/FlutterAuthUiDemoy.dart';
import 'main.dart';
void firestore_page() => runApp(firestore_pagey());
class firestore_pagey extends StatefulWidget {
#override
MyApps createState() => MyApps();
}
class MyApps extends State<firestore_pagey> {
final databaseReference = Firestore.instance;
#override
Widget build(BuildContext context) {
return MaterialApp(home:
Scaffold(
appBar: AppBar(
title: Text('FireStore Demo'),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('Create Record'),
onPressed: () {
createRecord();
},
),
RaisedButton(
child: Text('View Record'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyApp()),
);
},
),
RaisedButton(
child: Text('Update Record'),
onPressed: () {
updateData();
},
),
RaisedButton(
child: Text('Delete Record'),
onPressed: () {
deleteData();
},
),
new Expanded(child:
new StreamBuilder<QuerySnapshot>(
stream: databaseReference.collection('books').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return new Text('Loading...');
return new ListView(
children: snapshot.data.documents.map((DocumentSnapshot document) {
return new ListTile(
title: new Text(document['title']),
subtitle: new Text('${document['description']} description'),
);
}).toList(),
);
},
)
)
],
)),
) //center
);
}
Main.dart
import 'package:flutter/material.dart';
import 'FlutterAuthUiDemoy.dart';
import "firestore_page.dart";
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Builder(
builder: (context) => Scaffold(
appBar: AppBar(
title: Text("Page 1"),
),
body: Center(
child: Column(
children: <Widget>[
MaterialButton(
child: Text("Next Page"),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FlutterAuthUiDemo()),
);
},
color: Colors.red,
)
],
),
),
),
),
);
Can you remove your MaterialApp then try again? You already have a MaterialApp in your main.dart I assume.
Widget build(BuildContext context) {
return
Scaffold(
appBar: AppBar(
title: Text('FireStore Demo'),
...
So, the problem appeared to be coming from the page that I was navigating from. I was using a library that seemed to prevent navigation after use, so I removed the library from the page before it and now I can navigate on the page just fine! Thanks for all the help!
Related
How to use MaterialPageRoute with a new file dart?
My codes:
main.dart
import 'package:flutter/material.dart';
import 'package:hello_world/settings_page.dart';
void main() => runApp(Belajar());
class Belajar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
leading: Icon(Icons.android),
title: Text('Hello World'),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SettingsPage();
},
),
);
},
)
],
),
),
);
}
}
settings_page.dart
import 'package:flutter/material.dart';
class SettingsPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
I tried the code above. But, give me an error:
Navigator operation requested with a context that does not include a Navigator.
What wrong with my code?
you are missing just one thing
MaterialApp(
home:Builder(
//use this context to push new route
builder:(context){
return Scaffold(
appBar://..
);
}
)
)
here builder will introduce a new context which will contain the navigator introduced by material app
First create a class for example runFunction()
and you can use these code for going to that screen
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => runFunction(),
),
);
an example of runFuction
class _recipeSearchState extends State<recipeSearch> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hello'),
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
Text("Text"),
],
),
),
);
}
}
I tried to make Dialog function on my app.
But the "No MaterialLocalizations found." error came out and it didn't open the popup window.
I don't know how to solve this issue even though I tried to find other references.
Please let me know how to fix this issue.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(OverApp());
}
class OverApp extends StatefulWidget {
#override
_OverAppState createState() => _OverAppState();
}
class _OverAppState extends State<OverApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('List'),
),
body: RaisedButton(
child: Text('Show Material Dialog'),
onPressed: _showMaterialDialog,
),
),
);
}
_showMaterialDialog() {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Material Dialog"),
content: new Text("Hey!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
}
}
You need to put the MaterialApp in runApp (or make another widget and put the Scaffold in its build and use this new widget as the home of the MaterialApp).
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(home: OverApp()));
}
class OverApp extends StatefulWidget {
#override
_OverAppState createState() => _OverAppState();
}
class _OverAppState extends State<OverApp> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('List'),
),
body: RaisedButton(
child: Text('Show Material Dialog'),
onPressed: _showMaterialDialog,
),
);
}
_showMaterialDialog() {
showDialog(
context: context,
builder: (_) => new AlertDialog(
title: new Text("Material Dialog"),
content: new Text("Hey!"),
actions: <Widget>[
FlatButton(
child: Text('Close me!'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
));
}
}
Functionality behind the app:
The soccer ball in the upper right corner is a IconButton.
Once the soccer IconButton is clicked, it creates a modal pop up in the middle of the screen and the outside of the modal box is blurred.
The alert box shows heading "Success!" and then the content "You are in the football universe!".
I have included an image example of how it would look like once the the code is successful.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple[200],
actions: <Widget>[
IconButton(
icon: Icon(
MdiIcons.soccer,
color: Colors.grey[800],
),
iconSize: 30,
onPressed: () => {
CupertinoAlertDialog(
title: Text('Success!'),
content: Text('You are in the football universe!'),
),
},
),
],
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
Issues:
There is no error being displayed.
The functionality for the modal being popped up is not being excuted.
Things I have tried that were unsuccessful:
I have tried to make another stateless widget and then included the name of that stateless widget inside appBar.
You can copy paste run full code below
Step 1: You can use showDialog
Step 2: Move MaterialApp to upper level void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));
code snippet
Future<void> _handleClickMe() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text('Success!'),
content: Text('You are in the football universe!'),
);
},
);
}
working demo
full code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
void main() => runApp(MaterialApp(title: 'Welcome to Flutter', home: MyApp()));
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Future<void> _handleClickMe() async {
return showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return CupertinoAlertDialog(
title: Text('Success!'),
content: Text('You are in the football universe!'),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple[200],
actions: <Widget>[
IconButton(
icon: Icon(
MdiIcons.soccer,
color: Colors.grey[800],
),
iconSize: 30,
onPressed: () => _handleClickMe(),
),
],
),
body: Center(
child: Text('Hello World'),
),
);
}
}
Looks like you need to call showDialog and pass your CupertinoAlertDialog to the builder
onPressed: () => {
showDialog(
context: context,
builder: (BuildContext context) => CupertinoAlertDialog(
title: Text('Success!'),
content: Text('You are in the football universe!')
),
),
},
I am trying flutter and have problems in making a simple showdialog work. I tried a simple test with one button:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter Test',
home: Scaffold(
appBar: AppBar(
backgroundColor: Colors.teal,
title: Text('Flutter'),
),
body: Center(
child: ListView(
padding: EdgeInsets.all(8),
children: <Widget>[
Container(
child: RaisedButton(
child: Text('My Button'),
onPressed: () => {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
title: Text('Test'),
content: Text('Dialog content'),
);
},
),
},
color: Colors.cyan,
textColor: Colors.white,
),
),
],
),
),
),
);
}
}
I expect the alert to pop on button tap. What am I missing? I also tried it with the showdialog in a separate custom function call, same result.
You need to use the showDialog method provided by Flutter, as seen on the example here. Check my example below with your button but using the showDialog method:
class DialogIssue extends StatefulWidget {
#override
_DialogIssueState createState() => _DialogIssueState();
}
class _DialogIssueState extends State<DialogIssue> {
#override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text('My Button'),
onPressed: () => _confirmDialog(),
color: Colors.cyan,
textColor: Colors.white,
),
);
}
Future<void> _confirmDialog() async {
switch (await showDialog<bool>(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: const Text('True or false'),
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SimpleDialogOption(
onPressed: () { Navigator.pop(context, true); },
child: const Text('Confirm',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
SimpleDialogOption(
onPressed: () { Navigator.pop(context, false); },
child: const Text('Cancel'),
),
],
),
],
);
}
)){
case true:
print('Confirmed');
break;
case false:
print('Canceled');
break;
default:
print('Canceled');
}
}
}
It can be done in a StatelessWidget, like in this DartPad pad.
Sidenote: I've had to use a Builder because the context in MyApp's build method doesn't have a MaterialApp ancestor.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
showAppDialog(BuildContext context) {
print("Showing app dialog");
showDialog(context: context,
builder: (context) {
return AlertDialog(
title: const Text(
"This is a dialog that works.",
),
icon: const Icon(Icons.delete),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text("OK"),
),
],
);
});
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(body: SafeArea(child: Builder(
builder: (context) {
return TextButton(child: Text("Show dialog"), onPressed: () => showAppDialog(context),);
}
))),
);
}
}
PS: You're already using showDialog, why does this answer suggest you to do that 🤔.
In my Flutter project, I have three screens - Screen0, Screen1, Screen2. Now, from the screen0 , I can go to the screen1 with a button click, then from screen1 we can go to screen2 with a button. In screen2, I have a button which I have used to go back to screen0. As Screen0 is the initial screen, I want to clear all the previous screens when I come back to Screen0 and don't want to have any back option like in this image-
And here's my code-
main.dart
import 'package:flutter/material.dart';
import 'screen0.dart';
import 'screen1.dart';
import 'screen2.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context)=> Screen0(),
'/first': (context)=> Screen1(),
'/second': (context)=> Screen2(),
},
);
}
}
I have set all the routes in my main.dart file. Then in the Screen0, I have a button to go to screen1 like below-
screen0.dart
import 'package:flutter/material.dart';
class Screen0 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Text('Screen 0'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
color: Colors.red,
child: Text('Go to screen 1'),
onPressed: (){
Navigator.pushNamed(context, '/first');
},
),
],
),
),
);
}
}
In the screen1, I have a button to go to screen2-
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Text('Screen 1'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
color: Colors.red,
child: Text('Go to screen 2'),
onPressed: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) {
return Screen2();
})
);
},
),
],
),
),
);
}
}
Now, in the screen2, i have the button to go to screen0 -
class Screen2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.purple,
title: Text('Screen 2'),
),
body: Center(
child: Column(
children: <Widget>[
RaisedButton(
color: Colors.red,
child: Text('Go to screen 0'),
onPressed: (){
Navigator.pop(context, Screen2);
Navigator.pushNamed(context, '/');
},
),
],
),
),
);
}
}
I have tried some solution like using Navigator.pushAndRemoveUntil given in the below link-
Flutter - Navigate to a new screen, and clear all the previous screens
But this solution didn't work for me.
So, it would be nice if someone help me out this code to solve the problem.
use pushNamedAndRemoveUntil
for example
Navigator.of(context).pushNamedAndRemoveUntil('/screen4', (Route<dynamic> route) => false);