How to translate an array with data into a widget - flutter

How to translate an array with data into a widget
array
[{id: 1, section_name: Name1, route: Gorod(), icon: Icons.location_city}, {id: 2, section_name: Name2, route: Gorod(), icon: Icons.chat}]
SearchData
void SearchData() {
info = new List.from(data);
for (int i = 0; i < info.length; i++) {
Widget routed = info[i]['route'];
Navigator.push(context, MaterialPageRoute(builder: (context) => routed));
// Widget test = Gorod();
// Navigator.push(context, MaterialPageRoute(builder: (context) => test));
}
}
an error comes out
[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: type 'String' is not a subtype of type 'Widget'
file Gorod();
import 'package:flutter/material.dart';
class Gorod extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return GorodState();
}
}
class GorodState extends State<Gorod> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData (
color: Colors.white,
),
title: Text('Title Gorod', style: TextStyle(color: Colors.white)),
),
body: Container (
child: Text('Text fdsf fds fdsf'),
)
);
}
}
page code where I want to go
I want to take the path from the array and then substitute it and go to the page.

As can be seen from your error you are receiving string from your List.
There is no method to convert string to widget directly, so you have to manually check what you are getting from string by comparing and then you can create widget from it.
I hope Following minimal example will clear your idea.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var info = [
{
'id': 1,
'section_name': 'Name1',
'route': 'Gorod()',
'icon': 'Icons.location_city'
},
{
'id': '2',
'section_name': 'Name2',
'route': 'Gorod()',
'icon': 'Icons.chat'
}
];
List<Widget> searchData() {
List<Widget> _list = [];
for (int i = 0; i < info.length; i++) {
print(info[i]['route']);
if (info[i]['route'] == "Gorod()") {
_list.add(RaisedButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) => Gorod()));
},
child: Text("text"),
));
}
}
return _list;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: searchData(),
),
),
);
}
}
class Gorod extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return GorodState();
}
}
class GorodState extends State<Gorod> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
iconTheme: IconThemeData(
color: Colors.white,
),
title: Text('Title Gorod', style: TextStyle(color: Colors.white)),
),
body: Container(
child: Text('Text fdsf fds fdsf'),
));
}
}

Related

How to Refresh State from Navigator Pop in Flutter

I want to refresh the state when calling Navigator Pop / Navigator Pop Until.
While I was doing some research, I finally found this article Flutter: Refresh on Navigator pop or go back. From the code in the article, it can work fine.
But there is a problem when I use the widget tree, for example like the code below:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Refresh on Go Back',
home: HomePage(),
);
}
}
Home Page - Parent Class
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int id = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Data: $id',
style: Theme.of(context).textTheme.headline5,
),
ButtonWidget(),
],
),
),
);
}
void refreshData() {
id++;
}
onGoBack(dynamic value) {
refreshData();
setState(() {});
}
}
Button Widget - Widget Class
class ButtonWidget extends StatelessWidget{
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) =>
SecondPage())).then(onGoBack);
// The Problem is Here
// How to call a Method onGoBack from HomePage Class
}
);
}
}
SecondPage
class SecondPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'),
),
),
);
}
}
Or is there another solution to refresh the state class when calling Navigator Pop / Navigator Pop Until?
re-write your Button's class like this:
class ButtonWidget extends StatelessWidget{
final Function onGoBack;
ButtonWidget({this.onGoBack})
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) =>
SecondPage())).then(onGoBack);
//to avoid any np exception you can do this: .then(onGoBack ?? () => {})
// The Problem is Here
// How to call a Method onGoBack from HomePage Class
}
);
}
}
And add the onGoBack function as a parameter from the home page like this:
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int id = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Data: $id',
style: Theme.of(context).textTheme.headline5,
),
ButtonWidget(onGoBack: onGoBack),
],
),
),
);
}
void refreshData() {
id++;
}
onGoBack(dynamic value) {
refreshData();
setState(() {});
}
}
you must sent function on widget
class ButtonWidget extends StatelessWidget{
final Function(dynamic)? refresh;
const ButtonWidget({this.refresh})
#override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: ()async {
await Navigator.push(context, MaterialPageRoute(builder: (context) =>
SecondPage()));
if(refresh!=null){
refresh!("your params");
}
// The Problem is Here
// How to call a Method onGoBack from HomePage Class
}
);
}
}
and you can use widget
ButtonWidget(
refresh:onGoBack
)
Try this, it just you are calling method out of scope
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Refresh on Go Back',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int id = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'Data: $id',
style: Theme.of(context).textTheme.headline5,
),
ButtonWidget(
refresh: onGoBack,
)
],
),
),
);
}
void refreshData() {
id++;
}
onGoBack(dynamic value) {
refreshData();
setState(() {});
}
}
class ButtonWidget extends StatelessWidget {
final Function(dynamic)? refresh;
ButtonWidget({Key? key, this.refresh}) : super(key: key);
#override
Widget build(BuildContext context) {
print(refresh);
return RaisedButton(onPressed: () async {
await Navigator.push(
context, MaterialPageRoute(builder: (context) => SecondPage()))
.then((value) => refresh!("okay"));
});
}
}
class SecondPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'),
),
),
);
}
}

Flutter Navigation: how to make a routename as a funciton of an instance?

I want to make a new page which depends on a text input that a user typed in, so I want to make a routeName as a function of an instance, the following code doesn't work..
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: 'main',
routes: {
'main': (context) => MainPage(),
NodeInsideChat().routeName(): (context) => NodeInsideChat(),
},
);
}
}
Here You can see I'm trying to make routeName be newly genereated as an each page is created. But I have no idea what to pass inside NodeInsideChat()..
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
String wordInput;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
TextField(
onChanged: (value) {
wordInput = value;
},
),
RawMaterialButton(
onPressed: () {
Navigator.pushNamed(context, NodeInsideChat(wordInput).routeName(),
arguments: NodeInsideScreenArguments(wordInput));
},
fillColor: Colors.red,
child: Text('Go to the new Page'),
),
],
);
}
}
class NodeInsideChat extends StatelessWidget {
NodeInsideChat(this.wordInput);
final String wordInput;
String routeName() {
return wordInput;
}
#override
Widget build(BuildContext context) {
final NodeInsideScreenArguments args =
ModalRoute.of(context).settings.arguments;
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFFFF8A80),
title: Text(
args.wordindex,
style: TextStyle(
fontSize: 20.0,
),
),
),
);
}
}
class NodeInsideScreenArguments {
final String wordindex;
NodeInsideScreenArguments(this.wordindex);
}
By ModalRoute or onGenerateRoute, I could not set the routeName as a function..

How do I initialize data with the Provider in flutter

This is code:
main
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<Something>(
create: (_) => Something(),
child: Consumer<Something>(
builder: (BuildContext context, Something value, Widget child) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
},
),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String mockData = '';
#override
void initState() {
super.initState();
initData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'moceData:$mockData',
),
Text(
'${Provider.of<Something>(context).count}',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (_) {
return SecondPage();
}));
},
child: Icon(Icons.add),
),
);
}
initData() {
Future.delayed(Duration(seconds: 1), () {
mockData = 'mock 123';
setState(() {});
});
}
}
SecondPage
class SecondPage extends StatefulWidget {
#override
_SecondPageState createState() => _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Center(
child: GestureDetector(
onTap: () {
Provider.of<Something>(context, listen: false).doSomething();
},
child: Text('click'),
),
),
),
);
}
}
Something
class Something extends ChangeNotifier {
var count =0;
void doSomething() {
print('doSomething');
count++;
notifyListeners();
}
}
when we open this app, MyHomePage request data in initState,
when we push secondPage,we click ‘click’ btn,We want the first page to retrieve the data(iniData()).
when we click ,notifiyListeners() and _MyHomePageState build()is called, but initState()is not,so
how to do?we can invoke initData again.
Similar situation:
1.We have changed the language on other pages. The data on the home page needs to re-request the language interface of the response.
2.After the user logs in successfully, refresh the user inventory, the inventory page already exists
Try this :
setState(() {
mockData = 'mock 123';
});
But here you are not initializing data to use it with Provider, if you are looking to get data ( i mean mockData var ) with Provider , you can do that :
in Something class you add this:
String mockData="123";
String get mockdata => mockData;
and then in the HomePage you access this data using the Provider :
Provider.of<Something>(context, listen:false).mockdata;
i hope i could help you.. good luck !
sorry,Maybe I didn't describe the problem clearly enough, but I have found a solution now.
use
ChangeNotifierProxyProvider<Foo, MyChangeNotifier>(
create: (_) => MyChangeNotifier(),
update: (_, foo, myNotifier) => myNotifier
..foo = foo,
child: ...
);
/// A [ChangeNotifierProvider] that builds and synchronizes a [ChangeNotifier]
/// from values obtained from other providers.
Thanks

How to create user history page similar to 'my activity' on google - flutter

I am trying to make a history page in flutter. When I press 'a','b' or 'c' in my homepage, I want it to show what I pressed and the date I pressed the text on my history page similar to 'my activity' on google. This is what I came up with so far, and I don't even know if it is the best way to make it. It also has an error
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Tile(text: Text("a")),
Tile(text: Text("b")),
Tile(text: Text("c")),
],
));
}
}
int count = 0;
class Tile extends StatefulWidget {
final Text text;
Tile({this.text});
#override
TileState createState() => TileState();
}
class TileState extends State<Tile> {
#override
Widget build(BuildContext context) {
return ListTile(
title: widget.text,
onTap: () {
count++;
print(count);
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HistoryPage()),
);
},
);
}
}
class HistoryPage extends StatefulWidget {
#override
HistoryPageState createState() => HistoryPageState();
}
class HistoryPageState extends State<HistoryPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
})),
body: ListView.builder(
itemCount: count,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(text),
);
},
),
);
}
}
How should I make my user history page?
You can copy paste run full code below
You can put your click event in a History List and use ListView to show this History List
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Tile(text: Text("a")),
Tile(text: Text("b")),
Tile(text: Text("c")),
],
));
}
}
int count = 0;
List<History> historyList = [];
class History {
String data;
DateTime dateTime;
History({this.data, this.dateTime});
}
class Tile extends StatefulWidget {
final Text text;
Tile({this.text});
#override
TileState createState() => TileState();
}
class TileState extends State<Tile> {
#override
Widget build(BuildContext context) {
return ListTile(
title: widget.text,
onTap: () {
count++;
print(count);
historyList
.add(History(data: widget.text.data, dateTime: DateTime.now()));
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HistoryPage(),
));
},
);
}
}
class HistoryPage extends StatefulWidget {
#override
HistoryPageState createState() => HistoryPageState();
}
class HistoryPageState extends State<HistoryPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
})),
body: ListView.builder(
itemCount: historyList.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(
' ${historyList[index].data} ${historyList[index].dateTime.toString()}'),
);
},
),
);
}
}

Flutter -How to Pass variable from one dart class to another dart class

I just want to pass my int and bool values into another class in another dart file.
I am trying to pass values the method.
Try this.
import 'package:flutter/material.dart';
void main() => runApp(new MaterialApp(
home: new MainPage(),
));
class MainPage extends StatefulWidget {
#override
_MainPageState createState() => new _MainPageState();
}
class _MainPageState extends State<MainPage> {
int count = 0;
bool isMultiSelectStarted = false;
void onMultiSelectStarted(int count, bool isMultiSelect) {
print('Count: $count isMultiSelectStarted: $isMultiSelect');
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
backgroundColor: Colors.blue,
title: new Text('Home'),
),
body: new Center(
child: new RaisedButton(
child: new Text('Go to SecondPage'),
onPressed: () {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
return new SecondPage(onMultiSelectStarted);
},
),
);
},
),
),
);
}
}
class SecondPage extends StatefulWidget {
int count = 1;
bool isMultiSelectStarted = true;
final Function multiSelect;
SecondPage(this.multiSelect);
#override
_SecondPageState createState() => new _SecondPageState();
}
class _SecondPageState extends State<SecondPage> {
#override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(
child: new Text('Pass data to MainPage'),
onPressed: () {
widget.multiSelect(widget.count, widget.isMultiSelectStarted);
},
),
);
}
}