I'm calling a API and saving its response using providers so that i can access from anywhere in my flutter app. The model used for storing response is
class Album with ChangeNotifier {
final String id;
final List<String> categoriesId;
final String title;
final String imageUrl;
Album({this.id, this.categoriesId, this.title, this.imageUrl});
factory Album.fromJson(Map<String, dynamic> json) {
List<dynamic> res = json['category_list'];
List<String> cats = [];
res.forEach((tx) {
cats.add(tx.toString());
});
return Album(
id: json['id'].toString(),
categoriesId: cats,
title: json['name'],
imageUrl: json["image"],
);
}
}
While the function calling endpoint is,
String albumUrl = "http://192.168.227.102:9000/static/album.json";
Future<List<Album>> fetchAnime(BuildContext context) async {
List<Album> resAlbum = [];
try {
final response = await http.get(Uri.parse(albumUrl));
if (response.statusCode == 200) {
List<dynamic> result = jsonDecode(response.body)['album'];
result.forEach((tx) {
Album test = Anime.fromJson(tx as Map<String, dynamic>);
resAlbum.add(test);
});
}
} catch (e) {
print(e);
}
return resAlbum;
}
The provider for model Album is,
class AlbumProvider with ChangeNotifier {
List<Album> _items = [];
void getPostData(context) async {
bool loading = true;
if (this._items.isNotEmpty) {
this._items = await fetchAlbum(context);
}
loading = false;
notifyListeners();
}
}
The view using this provider is,
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
void initState() {
Provider.of<AlbumProvider>(context, listen: false).getPostData(context);
super.initState();
}
#override
Widget build(BuildContext context) {
List<Album> albumData = Provider.of<AlbumProvider>(context).allitems;
return Scaffold(
appBar: AppBar(
title: Text(
'Home Screen',
),
),
body:albumData.isEmpty
?Text("we are fetching data")
:Text("fetching complete")
)
}
}
When i run the app i got following error,
The following assertion was thrown while dispatching notifications for AlbumProvider:
setState() or markNeedsBuild() called during build.
This _InheritedProviderScope widget cannot be marked as needing to build because the framework is already in the process of building widgets. A widget can be marked as needing to be built during the build phase only if one of its ancestors is currently building. This exception is allowed because the framework builds parent widgets before children, which means a dirty descendant will always be built. Otherwise, the framework might not visit this widget during this build phase.
The widget on which setState() or markNeedsBuild() was called was: _InheritedProviderScope
What are the reasons for getting the error and How can i remove this error?
This is because, when you are calling
Provider.of<AlbumProvider>(context, listen: false).getPostData(context);
from initState method of HomePage, which in turn invokes following method
void getPostData(context) async {
bool loading = true;
if (this._items.isNotEmpty) {
this._items = await fetchAlbum(context);
}
loading = false;
notifyListeners();
}
This function is calling notifiyListeners();
The issue is that you are listening for changes to AlbumProvider in build method of HomePage.
List<Album> albumData = Provider.of<AlbumProvider>(context).allitems;
So ultimately, initState is calling getPostData which is calling notifyListeners() which will try to rebuild the widget tree before it has finished building.
You should FutureBuilder instead of calling getPostData() in the initState method.
Related
Here is my stateful widget and url is a property pass it to the widget from parent widget. I don't know where did I go wrong?? I created a future builder widget that has getData() as a future. But the print statement inside was not executed ever. Why is that and it returns me always null value, and this results me a red container appearing on screen and not the table widget.
class TimeTable extends StatefulWidget {
final url;
const TimeTable({Key? key,required this.url}) : super(key: key);
#override
_TimeTableState createState() => _TimeTableState();
}
class _TimeTableState extends State<TimeTable> {
Future<List<Train>> getData() async{
final list = await TrainClient(url: widget.url).getName();
print("this line not executed");
return list;
}
#override
Widget build(BuildContext context) {
return Scaffold(body: FutureBuilder(
future: getData(),
builder: (context,projectSnap){
if(projectSnap.connectionState == ConnectionState.none ||
projectSnap.data == null) {
return Container(color: Colors.red,);
}
return buildDataTable(trains: projectSnap.data);
}));
}
}
getData is a future method and it returns a list, The list gets printed when I call that object Train Client. I had my print statement inside TrainClient class to check whether the list is created successfully.
Here is the code of TrainClient
class TrainClient {
final String url;
TrainClient({required this.url});
Future<List<Train>> getName() async {
final uri = Uri.parse(url);
final response = await get(uri);
if (response.statusCode == 200) {
print("ulla");
final data = json.decode(response.body);
final result = data["RESULTS"]["directTrains"]["trainsList"];
final list = result.map((json) => Train.fromJson(json));
print(list);
return list;
}else{
throw Exception();
}
}
}
The TrainClient class has no error since it printed the list successfully as shown below
(Instance of 'Train', Instance of 'Train', Instance of 'Train', ..., Instance of 'Train', Instance of 'Train')
You should always obtain future earlier (in initState/didChangeDependencies).
Each time your build is executed, new future is created. So it never finishes, if your widget rebuilds often.
late final _dataFuture = getData();
...
FutureBuilder(
future: _dataFuture,
builder: (context,projectSnap){
...
}
);
I have a flutter widget which retrieves Json information from an API and displays a widget of that information. My initState is as follows:
class _BuildCardsWidgetState extends State<BuildCardsWidget> {
bool display = false;
late Resource _resource;
Future<Resource> fetchResource(Build build) async {
var url = Uri.parse(APIURL); <-actual url link hidden
final response = await http.get(url);
var resourceReturn = json.decode(response.body);
var resourceJson = resourceReturn[0]['resource'];
return Resource.fromJson(resourceJson, build);
}
#override
void initState() {
fetchResource(widget.build).then((value) =>
this.setState(() {
_resource = value;
display = true;
}));
super.initState();
}
#override
Widget build(BuildContext context) {
return ... <- _resource is used within build
However, whenever the program gets to the line
final response = await http.get(url);
This error is thrown:
The following LateError was thrown building BuildCardsWidget(dirty, state: _BuildCardsWidgetState#b3c7a):
LateInitializationError: Field '_resource' has not been initialized.
The thing that confuses me is this error flashes, but then right after the widget is correctly built and it runs smoothly. Any suggestions on how to fix this or on how to ignore this error since it does appear to work after the initial error?
Try to avoid using asynchronous functions inside initState, if it's not properly handled with await in a separate function, the widget won't load your data before build your widgets. A quick and simple way to solve this is to use a FutureBuilder().
class _BuildCardsWidgetState extends State<BuildCardsWidget> {
Future<Resource> fetchResource(Build build) async {
var url = Uri.parse(APIURL); <-actual url link hidden
var resourceReturn = json.decode(response.body);
var resourceJson = resourceReturn[0]['resource'];
return Resource.fromJson(resourceJson, build);
}
#override
Widget build(BuildContext context) {
return FutureBuilder<Resource>(
future: fetchResource(build),
builder: (context, snapshot) {
return SizedBox();
}
if(snapshot.hasError) {
/// Handle error
}
}
);
}
}
I am using a future provider to display a login page on load and then a loading indicator on loading. Here is my future provider
final loginProvider = FutureProvider.family((ref, UserInput input) =>
ref.read(authRepositoryProvider).doLogin(input.email, input.password));
In my UI I have this....
class LoginScreen extends HookWidget {
final TextEditingController emailEditingController = TextEditingController();
final TextEditingController passwordEditingController =
TextEditingController();
#override
Widget build(BuildContext context) {
var userInput =
UserInput(emailEditingController.text, passwordEditingController.text);
final login = useProvider(loginProvider(userInput));
return login.when(
data: (user) => Login(emailEditingController, passwordEditingController),
loading: () => const ProgressIndication(),
error: (error, stack) {
if (error is DioError) {
return Login(emailEditingController, passwordEditingController);
} else {
return Login(emailEditingController, passwordEditingController);
}
},
);
}
}
here is my doLogin function.
#override
Future<dynamic> doLogin(String email, String password) async {
try {
final response = await _read(dioProvider)
.post('$baseUrl/login', data: {'email': email, 'password': password});
final data = Map<String, dynamic>.from(response.data);
return data;
} on DioError catch (e) {
return BadRequestException(e.error);
} on SocketException {
return 'No Internet Connection';
}
}
I would like to know why it's stuck in the loading state. Any help will be appreciated.
First off, family creates a new instance of the provider when given input. So in your implementation, any time your text fields change, you're generating a new provider and watching that new provider. This is bad.
In your case, keeping the UserInput around for the sake of accessing the login state doesn't make a lot of sense. That is to say, in this instance, a FamilyProvider isn't ideal.
The following is an example of how you could choose to write it. This is not the only way you could write it. It is probably easier to grasp than streaming without an API like Firebase that handles most of that for you.
First, a StateNotifierProvider:
enum LoginState { loggedOut, loading, loggedIn, error }
class LoginStateNotifier extends StateNotifier<LoginState> {
LoginStateNotifier(this._read) : super(LoginState.loggedOut);
final Reader _read;
late final Map<String, dynamic> _user;
static final provider =
StateNotifierProvider<LoginStateNotifier, LoginState>((ref) => LoginStateNotifier(ref.read));
Future<void> login(String email, String password) async {
state = LoginState.loading;
try {
_user = await _read(authRepositoryProvider).doLogin(email, password);
state = LoginState.loggedIn;
} catch (e) {
state = LoginState.error;
}
}
Map<String, dynamic> get user => _user;
}
This allows us to have manual control over the state of the login process. It's not the most elegant, but practically, it works.
Next, a login screen. This is as barebones as they get. Ignore the error parameter for now - it will be cleared up in a moment.
class LoginScreen extends HookWidget {
const LoginScreen({Key? key, this.error = false}) : super(key: key);
final bool error;
#override
Widget build(BuildContext context) {
final emailController = useTextEditingController();
final passwordController = useTextEditingController();
return Column(
children: [
TextField(
controller: emailController,
),
TextField(
controller: passwordController,
),
ElevatedButton(
onPressed: () async {
await context.read(LoginStateNotifier.provider.notifier).login(
emailController.text,
passwordController.text,
);
},
child: Text('Login'),
),
if (error) Text('Error signing in'),
],
);
}
}
You'll notice we can use the useTextEditingController hook which will handle disposing of those, as well. You can also see the call to login through the StateNotifier.
Last but not least, we need to do something with our fancy new state.
class AuthPage extends HookWidget {
const AuthPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
final loginState = useProvider(LoginStateNotifier.provider);
switch (loginState) {
case LoginState.loggedOut:
return LoginScreen();
case LoginState.loading:
return LoadingPage();
case LoginState.loggedIn:
return HomePage();
case LoginState.error:
return LoginScreen(error: true);
}
}
}
In practice, you're going to want to wrap this in another widget with a Scaffold.
I know this isn't exactly what you asked, but thought it might be helpful to see another approach to the problem.
I have 3 classes: Users, Posts and Comments. User has many Posts and
Posts has many Comments.
I want that all data to be fetched before the widget's build method is called.
I tryed to use initState() to do this:
class FetchDataExample extends StatefulWidget {
final User _user;
FetchDataExample(this._user);
#override
_State createState() => _State(_user);
}
class _State extends State<FetchDataExample> {
final User _user;
_State(this._user);
#override
void initState() {
_user.setPosts();
super.initState();
}
#override
Widget build(BuildContext context) {
print(this._user.posts[0]);
return Container(
);
}
}
In User class I have:
void setPosts() async {
String url = 'https://jsonplaceholder.typicode.com/posts?userId=' + this.id.toString();
var request = Requester.get(url); // Returns a Future<Response>
await request.then((value) => this.posts = Post.jsonToPosts(json.decode(value.body)));
this.posts.forEach((post) => post.setComments());
print(this.posts[0]);
}
The 'setComments()' has the same logic.
I have two prints:
Inside build that returns null;
Inside setPosts the returns Instance of 'Post';
So, by the time that Build method is called in the widget, the initState has not finished yet.
I need it be finished, does anyone know how can I do that?
You can use a FutureBuilder to build a widget by using latest result from a future.
And also you can combile multiple futures into a single one using Future.wait method.
Here is a sample code:
_getPageData() async {
var _combinedFutures = await Future.wait([setPosts, setComments]);
//do stuff with data
}
...
#override
Widget build(BuildContext context) {
return FutureBuilder(
future:_getPageData(),
builder: (context, snapshot) {
return Container();
}),
);
});
I'm having trouble accessing a services object when initializing a stateful widget. The problem comes from the context object not being available in initState.
I'm using InheritedWidget to inject a services object in my main.dart file like so
void main() async {
final sqflite.Database database = await _openDatabase('db.sqlite3');
runApp(
Services(
database: database,
child: MyApp(),
),
);
}
The Services object is quite straightforward. It will have more than just the database as a member. The idea is that the widgets don't need to know if a local database, local cache, or remote server is being accessed.
class Services extends InheritedWidget {
final Database database;
const Services({
Key key,
#required Widget child,
#required this.database,
}) : assert(child != null),
assert(database != null),
super(key: key, child: child);
Future<List<models.Animal>> readAnimals() async {
return db.readAnimals(database: this.database);
}
#override
bool updateShouldNotify(InheritedWidget oldWidget) {
return false;
}
static Services of(BuildContext context) {
return context.inheritFromWidgetOfExactType(Services) as Services;
}
}
The trouble comes in my _HomePageState state when I want to load all the animals from the database. I need to access the Services object. I cannot access the Services object in initState so I am using didChangeDependencies. A problem comes when the home page is removed from the stack. It seems didChangeDependences is called and the access to the context object is illegal. So I created an _initialized flag that I can use in didChangeDependencies to ensure I only load the animals the first time. This seems very inelegant. Is there a better way?
class _HomePageState extends State<HomePage> {
bool _initialized = false;
bool _loading = false;
List<Animal> _animals;
#override
Widget build(final BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(Strings.of(this.context).appName),
),
body: _HomeBody(
loading: this._loading,
animals: this._animals,
),
);
}
#override
void didChangeDependencies() {
super.didChangeDependencies();
if (!this._initialized) {
this._initialized = true;
this._loadAnimals();
}
}
void _loadAnimals() async {
this.setState(() {
this._loading = true;
this._animals = null;
});
final List<Animal> animals = await Services.of(this.context).readAnimals();
this.setState(() {
this._loading = false;
this._animals = animals;
});
}
}
For that case you could use addPostFrameCallback of your WidgetsBinding instance to execute some code after your widget was built.
_onLayoutDone(_) {
this._loadAnimals();
}
#override
void initState() {
WidgetsBinding.instance.addPostFrameCallback(_onLayoutDone);
super.initState();
}