How do I use variables in a list? - flutter - list

im pretty new to flutter, tried for a while on my own now, but didnt find a solution online or within my own skills.
The problem:
list<Widget>sport = [sport1(name: name1)];
name is the variable I use in the child widget ( a callback if I remember right).
name1is the variable in the parent.
Now I want name to be changed, when I change name1
The problem is, I cant use name1 in list. I cant use any variable in list.
Error: Can't access 'this' in a field initializer to read 'name1'
I dont have any other acces to my child widget sport1 than in the list.
Code:
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
List<Widget> sport = [sport1(name: name1),];
String name1 = 'Max';
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Container(
child: Scaffold(
body: Center(child: sport[0]),),
),
);
}
}
class sport1 extends StatelessWidget {
String name;
sport1({Key key, this.name}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
child: Text('$name does x pushups!'),
);
}
}```

Related

How to use a created list in another class?

When i create a list, i can only use it in the class where i created the list. But in another class i get an error 'undefined name' when i want to use the list. How can i get access to the list?
For example in my code i created a list 'plans' with strings.
class _PlanOverviewState extends State<PlanOverview> {
List<String> plans = ['Plan A', 'Plan B'];
void addPlan(String neuerPlan) {
setState(() {
plans.add(neuerPlan);
});
Navigator.of(context).pop();
}
Now I want to output a single string from the list plans in another Widget in the Appbar as title, so the User know where he is.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(plans[i]))
How can i get access to the list plans?
One option is to create & use an InheritedWidget-style accessor for your State class and then you can access it from any descendant context.
import 'package:flutter/material.dart';
class InheritedWidgetPage extends StatefulWidget {
#override
_InheritedWidgetPageState createState() => _InheritedWidgetPageState();
static _InheritedWidgetPageState of(BuildContext context) =>
context.findAncestorStateOfType<_InheritedWidgetPageState>();
}
class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
List<String> plans = ['Plan A', 'Plan B'];
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
_InheritedWidgetPageState _state = InheritedWidgetPage.of(context);
return Scaffold(
appBar: AppBar(
title: Text(_state.plans[0]),
),
body: Center(
child: ElevatedButton(
child: Text('Goto ${_state.plans[1]}'),
onPressed: () => Navigator.of(context).push(
MaterialPageRoute(builder: (context) => PlanPage(1))),
),
),
);
}
}
class PlanPage extends StatelessWidget {
final int index;
PlanPage(this.index);
#override
Widget build(BuildContext context) {
_InheritedWidgetPageState _state = InheritedWidgetPage.of(context);
return Scaffold(
appBar: AppBar(
title: Text(_state.plans[index]),
),
body: Center(
child: Text('You are here: ${_state.plans[index]}'),
),
);
}
}
This can be pretty confusing to understand at first, but will make more sense as you get more familiar with Flutter's declarative framework.
For the above example to work, you need to have a MaterialApp ancestor widget, and your State class (where you're holding your plans state object) needs to be its parent. I explain why on a similar question here.
Your other option is to use a State Management package of which there are lots, which can help you simplify access to state objects.

How can I check value in dropdown for register form

I have a registration form in my application and I want to check if the DropDown value is empty or not. So I will give a warning to the screen. But I couldn't use DropDown value on checkFieldStatus function. How can I get this?
These are my codes that i used for my app:
class Register extends StatefulWidget {
#override
_RegisterState createState() => _RegisterState();
}
class _RegisterState extends State<Register> {
List listGender = ["Erkek", "Kız"];
List listTeacher = ["Oğulcan Baybars", "Kübra Yeşilkazak"];
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String genderHolder;
String teacherHolder;
var _imageFile = null;
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
children: [
CustomDropDownField(
list: listGender,
hintText: "Cinsiyet",
value: genderHolder,
),
CustomDropDownField(
list: listTeacher,
hintText: "Öğretmeniniz",
value: teacherHolder,
),
ElevatedButton(
onPressed: () {
checkFieldStatus();
},
child: Text("Kayıt Ol")),
],
),
),
);
}
Future<void> checkFieldStatus() async {
if (_imageFile != null) {
showDialog(
context: context,
builder: (context) {
return ErrorAlertDialog(
message: "Resim yüklendi",
);
});
} else {
**Where I want to do the checks**
? registerUser()
: displayDialog("Lütfen formdaki bütün alanları doldurun.";
}
}
}
My CustomDropDownField like this:
import 'package:flutter/material.dart';
class CustomDropDownField extends StatefulWidget {
final List list;
final String hintText;
String value;
CustomDropDownField({
Key key,
this.list,
this.hintText,
this.value,
}) : super(key: key);
#override
_CustomDropDownFieldState createState() => _CustomDropDownFieldState();
}
class _CustomDropDownFieldState extends State<CustomDropDownField> {
#override
Widget build(BuildContext context) {
return Container(
child: DropdownButton(
isExpanded: true,
hint: Text(widget.hintText),
items: widget.list.map((valueItem) {
return DropdownMenuItem(value: valueItem, child: Text(valueItem));
}).toList(),
value: widget.value,
onChanged: (newValue) {
setState(() {
widget.value = newValue;
});}),);}
CustomDropDownField only changes the String value in its own state it does not reflect to the _RegisterState screen you can do a few different things:
Pass a callback function that updates the value in the _RegisterState screen
or even better
Use a state management like Provider or Bloc to update the value.

MaterialPage not found inside a list of pages inside a Navigator

I am trying to achieve a course in AWS to connect Amplify in Flutter. But inside 'Create Authentication Flow', when it adds MaterialPage inside a pages, inside Navigator it doesn't found.
I have this error in the MaterialPage:
The method 'MaterialPage' isn't defined for the type '_MyAuthStateState'. Try correcting the name to the name of an existing method, or defining a method named 'MaterialPage'.
My current code (main.dart):
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final _authService = AuthService();
#override
void initState() {
super.initState();
_authService.showLogin();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Photo Gallery App',
theme: ThemeData(visualDensity: VisualDensity.adaptivePlatformDensity),
home: StreamBuilder<AuthState>(
// 2
stream: _authService.authStateController.stream,
builder: (context, snapshot) {
// 3
if (snapshot.hasData) {
return Navigator(
pages: [
// 4
// Show Login Page
if (snapshot.data.authFlowStatus == AuthFlowStatus.login)
MaterialPage(
child: LoginPage(
shouldShowSignUp: _authService.showSignUp,
didProvideCredentials:
_authService.loginWithCredentials,
),
),
// 5
// Show Sign Up Page
if (snapshot.data.authFlowStatus == AuthFlowStatus.signUp)
MaterialPage(
child: SignUpPage(
shouldShowLogin: _authService.showLogin,
didProvideCredentials: _authService.signUpWithCredentials,
)),
if (snapshot.data.authFlowStatus ==
AuthFlowStatus.verification)
MaterialPage(
child: VerificationPage(
didProvideVerificationCode:
_authService.verifyCode))
],
onPopPage: (route, result) => route.didPop(result),
);
} else {
// 6
return Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
);
}
}),
);
}
}
I'm guessing your _authService.showLogin() inside initState is trying to perform some navigation, i.e. showing a Widget. Since MyApp doesn't connect itself to the top level Navigator automatically, you can't access/use Navigator functionality.
A MaterialApp will hook you up the top-level Navigator for you automatically.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// ↓ Make MaterialApp your root widget
return MaterialApp(
title: 'Photo Gallery App',
theme: ThemeData(visualDensity: VisualDensity.adaptivePlatformDensity),
home: MyAuthStatePage(),
)
}
}
class MyAuthStatePage extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAuthState();
}
class MyAuthState extends State<MyAuthStatePage> {
final _authService = AuthService();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
_authService.showLogin();
}
}
Also, initState prob. isn't the right place to be navigating/showing widgets, rather it's there for preparing state that'll be used by widgets inside the build method.

Error: Could not find the correct Provider <List<Auftrag>> above this Widget

I'm trying to make a buttomtabbar, where there is a List (Stack) on the first Tap page. Somehow there is this error and I just can't figure out why...
This is my Home file:
class Home extends StatelessWidget {
final AuthService _auth = AuthService();
#override
Widget build(BuildContext context) {
return TabContainerIndexedStack();
}}
This is TabContainerIndexStack():
class TabContainerIndexedStack extends StatefulWidget {
TabContainerIndexedStack({Key key}) : super(key: key);
#override
_TabContainerIndexedStackState createState() =>
_TabContainerIndexedStackState();
}
class _TabContainerIndexedStackState extends State<TabContainerIndexedStack> {
int tabIndex = 0;
List<Widget> listScreens;
#override
void initState() {
super.initState();
listScreens = [
Tab1(),
Tab2(),
Tab3(),
];
}
// #override
// bool get wantKeepAlive =>
// true; //by default it will be null, change it to true.
#override
Widget build(BuildContext context) {
return MaterialApp(
color: Colors.yellow,
home: Scaffold(
body: IndexedStack(index: tabIndex, children: listScreens),
bottomNavigationBar: BottomNavigationBar(
currentIndex: tabIndex,
onTap: (int index) {
setState(() {
tabIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Tab1'),
),
BottomNavigationBarItem(
icon: Icon(Icons.report_problem),
title: Text('Tab2'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Tab3'),
),
]),
backgroundColor: Theme.of(context).primaryColor,
),
);
}
}
This is my first Tab (other ones work!!!)
class Tab1 extends StatefulWidget {
#override
_Tab1State createState() => _Tab1State();
}
class _Tab1State extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
#override
void initState() {
super.initState();
print('initState Tab1');
}
#override
Widget build(BuildContext context) {
print('build Tab1');
return Scaffold(
appBar: AppBar(
title: Text('Tab1'),
),
body: AuftraegeList()
);
}
#override
bool get wantKeepAlive => true;
}
I think the problem is right there in the "body: AuftraegeList()..." above..
Here is the file AuftraegeList():
class AuftraegeList extends StatefulWidget {
#override
_AuftraegeListState createState() => _AuftraegeListState();
}
class _AuftraegeListState extends State<AuftraegeList> {
#override
Widget build(BuildContext context) {
final auftraege = Provider.of<List<Auftrag>>(context);
return ListView.builder(
itemCount: auftraege.length,
itemBuilder: (context, index){
return AuftragTile(auftrag: auftraege[index]);
},
);
}
}
I hope this is enough to solve my problem. I'm very new to Flutter, so it would be nice, if you can say where EXACTLY I have to change WHAT. Thank you so much!!!
EDIT: Here is the Code of my home.dart, which is the code, which represents the list in my main view.
class Home extends StatelessWidget {
final AuthService _auth = AuthService();
#override
Widget build(BuildContext context) {
return TabContainerIndexedStack();
/*
return StreamProvider<List<Auftrag>>.value(
value: DatabaseService().auftraege,
child: Scaffold(
bottomNavigationBar: btmBar(),
backgroundColor: Colors.blue[50],
appBar: AppBar(
title: Text('Home title'),
backgroundColor: Colors.blue,
elevation: 0.0,
actions: <Widget>[
FlatButton.icon(
icon: Icon(Icons.person),
label: Text('logout'),
onPressed: () async{
await _auth.signOut();
},
)
],
),
body: AuftraegeList(),
),
);
*/
}
}
(Its the part I commented out)
Thanks!!
EDIT (2) !!!
Latest edit:
So my first tap class now looks like this (I changed in the Widget build body [] to databaseService.auftraege after declaring databaseService at first).
class Tab1 extends StatefulWidget {
#override
_Tab1State createState() => _Tab1State();
}
class _Tab1State extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
// Where should I put this line? Whereever I put this, it gives me errors (already imported services/database.dart)
final DatabaseService databaseService = Provider.of<DatabaseService()>(context);
#override
void initState() {
super.initState();
print('initState Tab1');
}
#override
Widget build(BuildContext context) {
print('build Tab1');
return Scaffold(
appBar: AppBar(
title: Text('Tab1'),
),
body: Provider(
create: (context) => databaseService.auftraege,
child: AuftraegeList(),
)
);
}
#override
bool get wantKeepAlive => true;
}
Maybe its also helpful to show you my services/database
class DatabaseService{
final String uid;
DatabaseService({ this.uid });
// collection reference
final CollectionReference auftraegeCollection = Firestore.instance.collection('auftraege');
Future updateUserData(String title, String info, int price, String user) async{
return await auftraegeCollection.document(uid).setData({
'title' : title,
'info': info,
'price': price,
'user': user,
});
}
List<Auftrag> _auftragListFromSnapshot(QuerySnapshot snapshot){
return snapshot.documents.map((doc){
return Auftrag(
title: doc.data['title']?? '',
info: doc.data['info']?? '',
price: doc.data['price']?? 0,
user: doc.data['user']?? '',
);
}).toList();
}
// get auftraege stream
Stream <List<Auftrag>> get auftraege {
return auftraegeCollection.snapshots()
.map(_auftragListFromSnapshot);
}
}
When leave the code like that, it gives me an error at this line:
final DatabaseService databaseService = Provider.of<DatabaseService()>(context);
in my tab1.dart class. It says "Only static members can be accessed in initializers" under "context" and "error: A comparison expression can't be an operand of another comparison expression" as well as "error: The operator '<' isn't defined for the class 'T Function(BuildContext, {listen: bool})'."
Maybe you know what to do. I think I just put this line at the wrong place.
### EDIT (3) ###
(Exception)
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown building _BodyBuilder:
dependOnInheritedWidgetOfExactType>() or dependOnInheritedElement() was called before _Tab1State.initState() completed.
When an inherited widget changes, for example if the value of Theme.of() changes, its dependent widgets are rebuilt. If the dependent widget's reference to the inherited widget is in a constructor or an initState() method, then the rebuilt dependent widget will not reflect the changes in the inherited widget.
Typically references to inherited widgets should occur in widget build() methods. Alternatively, initialization based on inherited widgets can be placed in the didChangeDependencies method, which is called after initState and whenever the dependencies change thereafter.
The relevant error-causing widget was:
Scaffold file:///Users/xxxxxxxxxxxxxxx/AndroidStudioProjects/promi_prototype/lib/screens/home/tab_containter_indexedstack.dart:36:13
When the exception was thrown, this was the stack:
0 StatefulElement.dependOnInheritedElement. (package:flutter/src/widgets/framework.dart:4467:9)
1 StatefulElement.dependOnInheritedElement (package:flutter/src/widgets/framework.dart:4510:6)
2 StatefulElement.inheritFromElement (package:flutter/src/widgets/framework.dart:4458:12)
3 Element.inheritFromWidgetOfExactType (package:flutter/src/widgets/framework.dart:3556:14)
4 Provider.of (package:provider/src/provider.dart:259:19)
It says, the relevant error-causing widget was: tab_containter_indexedstack.dart, I already posted this code at the very beginning of my post. The simulator now only shows the blue background with the tabbar at the bottom. No text at the other tabs (worked before) and no error warning at tab1. Even no headings.
Greetings!! :)
.
.
.
### EDIT (4) ###
Oh my god xD Sorry for not working.. and THANK YOU for still helping!
Lets start my the error message:
The following assertion was thrown building Provider>>(dirty, state:
flutter: _DelegateWidgetState#eb784):
flutter: Tried to use Provider with a subtype of Listenable/Stream (Stream>).
flutter:
flutter: This is likely a mistake, as Provider will not automatically update dependents
flutter: when Stream> is updated. Instead, consider changing Provider for more specific
flutter: implementation that handles the update mechanism, such as:
flutter:
flutter: - ListenableProvider
flutter: - ChangeNotifierProvider
flutter: - ValueListenableProvider
flutter: - StreamProvider
The relevant error-causing widget was:
flutter: Provider>>
flutter: file:///Users/xxxxxxxxxxxx/AndroidStudioProjects/promi_prototype/lib/screens/my_tabs/tab1.dart:33:13
So there still is an issue with the Provider in tab1.dart. My guess was to change the Provider thing in AuftragList() because there I was using it the "old" way like Provider.of>(context), just like you mentioned in the edit 18 hours ago.
This is what I did (Out-commented was before):
class AuftraegeList extends StatefulWidget {
#override
_AuftraegeListState createState() => _AuftraegeListState();
}
class _AuftraegeListState extends State<AuftraegeList> {
DatabaseService databaseService ;
#override
Widget build(BuildContext context) {
databaseService = Provider.of<DatabaseService>(context);
// final auftraege = Provider.of<List<Auftrag>>(context);
return ListView.builder(
// itemCount: auftraege.length,
// itemBuilder: (context, index){
itemCount: databaseService.length, //RED MARK HERE
itemBuilder: (context, index){
return AuftragTile(auftrag: databaseService[index]); //RED MARK HERE
},
);
}
}
I thought this is ok now, but I get red marks under ".lenght" and under "[index]". Compiler sais, that I should create a getter in helpers/database.dart which was what I tried then. But no success. I deleted the getters there then.
Do you have an idea? Is it right to change the Provider thing in the AuftraegeList() even though the Compiler said issue is in tap1.dart?
.
EDIT Since you are not imediately using the value for the Stream provider in the Home class, you can use a Provider instead as follows;
class Home extends StatelessWidget {
final AuthService _auth = AuthService();
#override
Widget build(BuildContext context) {
return Provider(
create: (context) => DatabaseServices(),
child: TabContainerIndexedStack()
);
},
}
Then when you need the list, you have to call a provider of the Service class and not the list
final DatabaseService databaseService = Provider.of<DatabaseService>(context);
Then you can access an instance of the list like
databaseService.auftraege
Edit 1
Assuming you have the provider in the home class, don't need to wrap the provider around AuftraegeList() again. This is what you should do.
class _Tab1State extends State<Tab1> with AutomaticKeepAliveClientMixin<Tab1> {
final DatabaseService databaseService;
#override
void initState() {
databaseService = Provider.of<DatabaseService>(context);
super.initState();
print('initState Tab1');
}
#override
Widget build(BuildContext context) {
print('build Tab1');
return Scaffold(
appBar: AppBar(
title: Text('Tab1'),
),
body:
// The use the list directly in this class where needed like `databaseService.auftraege`
child: AuftraegeList(),
)
);
}
#override
bool get wantKeepAlive => true;
}
Note
In a stateful widget, the BuildContext is available in the initState method and the build method. So you can use BuildContext out of those methods unless you implicitly pass it.
If you need the list in AuftragList() class then get an instance
of the list using Provider.of<DatabaseService>(context)
If you need the list to automatically update when a need item is available you can use a StreamSubscription to listen to need stream and add to the list.
When calling the provider of pass the dataType and not the class. That is Provider.of<DatabaseService>(context) and not Provider.of<DatabaseService()>(context).
Edit 2
Since you are getting a stream for you List, use a steamBuilder to builder your Ui
class AuftraegeList extends StatefulWidget {
#override
_AuftraegeListState createState() => _AuftraegeListState();
}
class _AuftraegeListState extends State<AuftraegeList> {
DatabaseService databaseService ;
#override
Widget build(BuildContext context) {
databaseService = Provider.of<DatabaseService>(context);
// final auftraege = Provider.of<List<Auftrag>>(context);
return StreamBuilder<List<Auftrag>>(
stream: databaseService.auftraege,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return AuftragTile(auftrag: snapshot.data[index]);
}
);
}else if(snapshot.hasError){
return Center(child: Text("An error Errored");
}
return Center(child: CircularProgessIndicator();
},
);
}
}
Hope this works.

Only one item is appearing at a time on list view

I cant seem to figure out how to get all of my items in my list to display in the list view
Currently, when I click my button to display the list, only one items shows up. If I click back, and click main button again, it shows 2 items from the list. Rinse and repeat, 3 items. I can't seem to debug with print statements to see where my error lies. When I try print(trails) or other variations, it says Instance of trail model (not very helpful). Any ideas?
Here's my code:
class HomeScreen extends State<MyApp> {
int counter = 0;
Future<List<TrailModel>> fetchData() async {
counter++;
var response = await get(
'https://www.hikingproject.com/data/get-trails?lat=39.733694&lon=-121.854771&maxDistance=10&key=200419778-6a46042e219d019001dd83b13d58aa59');
final trailModel = TrailModel.fromJson(json.decode(response.body));
//trails.add(trailModel);
setState(() {
trails.add(trailModel);
});
return trails;
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("HikeLocator")),
body: new RaisedButton(
child: Text("click me"),
onPressed: () async {
final trails = await fetchData();
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new ListScreen(trails)),
);
},
),
));
}
}
class ListScreen extends StatelessWidget {
final List<TrailModel> trails;
ListScreen(this.trails);
#override
Widget build(BuildContext ctxt) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Here are your trails"),
),
body: TrailList(trails),
);
}
}
class TrailList extends StatelessWidget {
final List<TrailModel> trails;
TrailList(this.trails);
Widget build(context) {
return ListView.builder(
itemCount: trails.length,
itemBuilder: (context, int index) {
Object myText = json.encode(trails[index].trails);
List<dynamic> myText2 = json.decode(myText);
return Text(myText2[index]['name']);
},
);
}
}
class TrailModel {
Object trails;
TrailModel(this.trails);
TrailModel.fromJson(Map<String, dynamic> parsedJson) {
trails = parsedJson['trails'];
}
}
I think my problem might lie in the fetchData(), but I'm not entirely sure. Trying to at least print out the values to limit where my problem might be. (Is it only adding 1 to the list each time I press the button? Is it only rendering one when I click it? Is it fetching all the data each click or only one json object? etc.)
Thank you kindly for any assistance. Sorry, I'm kind of new to dart, so this is a huge learning curve for
There are a couple problems in your code. The main reason this doesn't work as you expect is because you're parsing all elements of the json into one TrailModel object, but then your code assumes that you'll have multiple TrailModel objects.
The easiest way to fix it up and get it working is to use the list from TrailModel.trails instead of the one in the widget.
First, in ListScreen, pass just the first element in the list.
class ListScreen extends StatelessWidget {
final List<TrailModel> trails;
...
#override
Widget build(BuildContext ctxt) {
return new Scaffold(
...
body: TrailList(trails.first),
);
}
}
Then, in TrailList, use the trails list you have from TrailModel:
class TrailList extends StatelessWidget {
final TrailModel model;
TrailList(this.model);
Widget build(context) {
return ListView.builder(
itemCount: model.trails.length,
itemBuilder: (context, int index) {
final trail = model.trails[index];
...
},
);
}
}
When I try print(trails) or other variations, it says Instance of trail model (not very helpful)
print uses the output of the toString method in your classes. You're seeing Instance of trail model because that's the default implementation you get from the super class Object. You can override it to get something more useful:
class TrailModel {
#override
String toString() => 'trails=$trails';
}