I am trying to create a flexible navigation system, that uses one page to display different things pulled from a database.
For example
If I would click the button Cars it would navigate to the fixed page (Lets call it display page) And it would pull the title and description from the database and show accordingly. So by clicking Cars, it would send the String Cars with it, so i could use it to find the desired thing from the database.
My question is, how can I send this info to the next page?
I want to use
ElevatedButton(
child: Text("Cars"),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => HabitPage()));
},
And send the desired item with HabitPage('cars(for example)') (I have studied C and that's how you would send variables, not sure it will work in dart.)
This is my HabitPage
class HabitPage extends StatefulWidget {
#override
_HabitPageState createState() => _HabitPageState();
}
class _HabitPageState extends State<HabitPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar
(
title: new Text("HabitPage")
),
body: new Center(
child: new Text("HabitPage"),
),
);
}
}
ElevatedButton(
child: Text("Cars"),
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => HabitPage(info: 'Cars'))); // Passing the info as argument
},
class HabitPage extends StatefulWidget {
HabitPage({this.info}) : super(key: key);
final String info; // Variable to receive the info as argument
#override
_HabitPageState createState() => _HabitPageState();
}
class _HabitPageState extends State<HabitPage> {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar
(
title: new Text("HabitPage ${widget.info}")// Showing the info passed as argument
),
body: new Center(
child: new Text("HabitPage"),
),
);
}
}
Make this changes in your code.
In the future, you will probably use Named Routes, so you will need this tutorial.
https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments#1-define-the-arguments-you-need-to-pass
But for now, this is the solution
Related
Excuse me guys, i tryin to build a new page, but with variable "nextcode" in it. so in the new page, it will show nextcode text
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Lemari(nextcode)));
},
but in the line "Widget build(String Kode) {" it must be like this "Widget build(BuildContext context) {"
class Lemari extends StatelessWidget {
#override
Widget build(String Kode) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue[900],
title: Text('this is th next page'),
),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: [
Container(height: 100, width: 100, color: Colors.red, child: Text('hhe'),),
]
),
),
);
}
}
So anyone who can help me ? please :(
You don't have to change the build method parameters instead you should add a new parameter in the widget and require it
Example
const MyPageView({Key? key}) : super(key: key);
Here you can add another parameter.
Then inside the class you define that parameter.. so when you make a new MyPageView you will have to pass the newly added parameter
Bye :)
Your code should have a compiler error
In Lemari , you never declare nextcode and constructor also do not have parameter nextcode.
You can try like this, add
class Lemari extends StatelessWidget {
final String nextcode;
const Lemari({Key key, this.nextcode}) : super(key: key);
#override
Widget build(BuildContext context) {}
}
if your nextcode is String
I need know how to push values from a screen to another screen with Navigators, because I searched and and didn't understand how it works to push and recieve data and values, or what is the best way to share values to of a screen to another screen.
UPDATE
Look I want to push the var videoPath value to the previuos screen after finishing the _stopvideoRecording() Future function.
Refer this official doc of Flutter
Code to send data to new Screen
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
Second Page/Receiving page
class TodosScreen extends StatelessWidget {
final List<Todo> todos;
//requiring the list of todos
TodosScreen({Key key, #required this.todos}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Todos'),
),
//passing in the ListView.builder
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title)
);
},
),
);
}
}
The class in question is invoked from another page with the line
onPressed: () {
Navigator.push(context, MaterialPageRoute(
builder: (context) =>
ProPage(iD: bestRatedPros[index]["ID"])));
},
Where bestRatedPros is a list of maps with the variable iD for the following class -
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class ProPage extends StatefulWidget {
ProPage({Key key, this.iD}) : super(key: key);
final iD;
#override
_ProPageState createState() => _ProPageState(iD);
}
class _ProPageState extends State<ProPage> {
int iD;
_ProPageState(this.iD);
#override
void initState() {
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.amber,
extendBodyBehindAppBar: true,
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.white, //change your color here
),
elevation: 0,
backgroundColor: Colors.amber
),
body:
Text("EWFWEFEWEWFWEF",style: TextStyle(color: Colors.black))
);
}
}
The getDataFromBackend function and
all the variables associated with it was meant to be within the body. But Nothing shows up in the body no matter what it is. Even a simple Text widget doesn't. I'm only trying to pass the variable iD from one page to the other without complicating things. The Run log doesn't show any Errors or warnings.
Arun,
See below where your Text is:
Reason for that is that you specified:
extendBodyBehindAppBar: true,
on your Scaffold, so body is expanded and top part of it is hidden behind AppBar
I´m currently working on my first simple flutter application and am trying to figure our the best approach to handle the navigation between screens.
Already Possible:
Navigation through screens with BottomNavigationBar + BottomNavigationBarItem
Navigation with Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);
Problem:
Having sub-screens in the screens of BottomNavigationBar
Code Example:
I want to have three main screens Screen1(), Screen2() and Screen3() accessible from the BottomNavigationBar. In Screen1() there is a button to navigate to another screen, let´s call it Screen4(), where the user can choose from a list of items. You can then add all chosen items to a list and navigate back to Screen1().
To achieve this I created the code below. The main Widget of the body will be changed according to the current index of the selected BottomNavigationItem.
main.dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
static const String _title = 'Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyApp(),
);
}
}
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[
Screen1(),
Screen2(),
Screen3(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Stackoverflow Example'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Screen1'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Screen2'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('Screen3'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
The problem is when I navigate within the Screen1() - Widget to Screen4() by using
Navigator.push(context,MaterialPageRoute(builder: (context) => Screen4()),);
the navigation will happen outside of MyApp() and therefore there is no Scaffold.
If someone has an example, where this is achieved I´d be very happy.
Thank you for reading.
I know it's a bit late, but hopefully, it can help you.
To achieve this you can use the Offstage widget with a navigator as its child, this way you will have a persistent navigation bar throughout all of your pages.
you can follow this article for more details and how to implement it
https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
you might need to tweak it a little to match your case.
info about the Offstage widget:
https://api.flutter.dev/flutter/widgets/Offstage-class.html
I suggest that you run a CupertinoApp instead of a MaterialApp. Use a CupertinoTabScaffold instead of Scaffold. Add a CupertinoTabBar as tabBar and return a CupertinoTabView as a tabBuilder
example of tabBuilder
tabBuilder: (context, index) {
if (index == 0) {
return CupertinoTabView(
navigatorKey: firstTabNavKey,
builder: (BuildContext context) => Screen1(),
Have a look at this great short article on how to implement a Tab Bar and also allow for Navigation between screens: link
I'm new in Flutter.
I have a question
How to call layouts in flutter ?
I've been create some layouts that contains a lot of widget.
It's not right if I make every code inside 1 file.
so I decide to put the code for the widgets in every 1 layouts file.
and I dont know how to call them in the home-page.dart that I create.
I mean, if I push THIS (i.e page1.dart), then the page1.dart is appear.
thought that file (page1.dart) is in other directory (not inside lib dir).
I dont know. am I should use ROUTES ?
but I dont know how.
would you like to teach me ?
..............
here are. I have TabBar like this in my home_page.dart:
import 'package:flutter/material.dart';
import 'package:coba/second.dart';
class HomePage extends StatelessWidget {
static String tag = 'home-page';
#override
Widget build(BuildContext ctxt) {
return new MaterialApp(
title: "MySampleApplication",
home: new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter App"),
bottom: new TabBar(
tabs: <Widget>[
new Tab(text: "First Tab"),
new Tab(text: "Second Tab"),
new Tab(text: "Third Tab"),
],
),
),
body: new TabBarView(
children: <Widget>[
new Text("You've Selected First"),
new SecondWidget(),
new ThirdWidget(),
]
)
),
)
);
}
}
class SecondWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
second(data: 'Hello there from the first page!'),
),
}
}
class ThirdWidget extends StatelessWidget {
#override
Widget build(BuildContext ctxt) {
return new Column(
children: <Widget>[
Text('halooo'),
Container(
color: Colors.black,
width: 200,
height: 200,
)
],
);
}
}
thank you so much
You can use any name that you want (generally, we have seen xxxScreen.dart or xxxPage.dart, but it is totally up to you).
Import your "destiny" page using in "origin" page using import:
import 'package:myproject/myPageScreen.dart';
Flutter offers 3 options:
Using Navigator:
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) =>
SecondPage(data: 'Hello there from the first page!'),
),
Using Named routes:
Declare you routes in MaterialApp:
MaterialApp(
// Start the app with the "/" named route. In our case, the app will start
// on the FirstScreen Widget
initialRoute: '/',
routes: {
// When we navigate to the "/" route, build the FirstScreen Widget
'/': (context) => FirstScreen(),
// When we navigate to the "/second" route, build the SecondScreen Widget
'/second': (context) => SecondScreen(),
},
);
And then use named route with Navigator:
onPressed: () {
Navigator.pushNamed(context, '/second');
}
Using onGenerateRoute:
Declare this property on your MaterialApp:
return MaterialApp(
// Initially display FirstPage
initialRoute: '/',
onGenerateRoute: _getRoute,
);
And create your route generator :
final args = settings.arguments;
switch (settings.name) {
case '/':
return MaterialPageRoute(builder: (_) =>
FirstPage());
case '/second':
// Validation of correct data type
if (args is String) {
return MaterialPageRoute(
builder: (_) => SecondPage(
data: args,
),
);
}
You can create your router as another file to help to organize your project.