How to run a Provider method at app start?

Question

I'm building an application to stream anime from a popular anime site. However, I would like to run a certain Provider method at app start. Once the app is loaded, I would like to fetch some anime from an api, before a user clicks on "Search" tab.

I would like to point out that this solution didn't work for me: How to call method at App start if I am using provider?

Here's how my app looks like:

My code:

main.dart

import 'package:anime_go/pages/home.dart';
import 'package:anime_go/providers/anime.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US')],
      path: 'lib/assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: AnimeGO(),
    ),
  );
}

class AnimeGO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Anime()..addAnimeList(),
      child: MaterialApp(
        theme: ThemeData(
          primaryColor: Colors.blueGrey[800],
        ),
        title: 'title'.tr(),
        localizationsDelegates: context.localizationDelegates,
        supportedLocales: context.supportedLocales,
        locale: context.locale,
        home: HomeScreen(),
      ),
    );
  }
}

providers/anime.dart

import 'package:anime_go/services/anime_twist.dart';
import 'package:flutter/cupertino.dart';

class Anime extends ChangeNotifier {
  var allAnimeList;
  final AnimeTwistApiService api = AnimeTwistApiService();

  void addAnimeList() async {
    allAnimeList = await api.getAllAnime();
    notifyListeners();
  }
}

pages/tabs/search.dart

import 'package:anime_go/providers/anime.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class SearchTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final allAnimeList = context.watch<Anime>().allAnimeList;
    return Center(
      child: Column(
        children: <Widget>[
          for (var i = 0; i < allAnimeList.length; i++)
            Text(allAnimeList[i].title.toString())
        ],
      ),
    );
  }
}

pages/home.dart

import 'package:anime_go/pages/tabs/home.dart';
import 'package:anime_go/pages/tabs/search.dart';
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  final List<Widget> _children = <Widget>[
    HomeTab(),
    SearchTab(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey[700],
      appBar: AppBar(
        title: Text('title').tr(),
      ),
      body: _children[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
          backgroundColor: Colors.blueGrey[800],
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('home').tr(),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              title: Text('search').tr(),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('settings').tr(),
            )
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.white,
          unselectedItemColor: Colors.grey,
          onTap: _onItemTapped),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

@jitsm555 Yes, you’re correct, but I would like to get that data BEFORE a user clicks on Search tab. It fetches the anime list from the api once the user clicks on Search tab. That’s not how O want it to be. — szakes1, Sep 14 '20 at 10:11
call final allAnimeList = context.watch().allAnimeList; on the main app code after initialization of provider — Jitesh Mohite, Sep 14 '20 at 10:12
show me how you have added below tabs, I can give you hint after that — Jitesh Mohite, Sep 14 '20 at 10:17

score 0 · Answer 1 · answered Jun 29 '22 at 08:22

In your ChangeNotifier class, add an init() method that will run when the provider is instantiated:

 class Anime extends ChangeNotifier {
    Anime() {
        init();
    }
    var allAnimeList;
    final AnimeTwistApiService api = AnimeTwistApiService();

    void init() async {
        allAnimeList = await api.getAllAnime();
        notifyListeners();
    }
}

Then, in your main build method set the provider's lazy property to false:

    return ChangeNotifierProvider(
          create: (_) => Anime(), 
          lazy: false,
          child: MaterialApp(

This way, your provider's init method will run when first encountered, when the app starts up, and not when first needed.

score -1 · Answer 2 · answered Sep 14 '20 at 10:22

-1

Call Provider inside HomeScreen

var allAnimeList

  final List<Widget> _children = <Widget>[
    HomeTab(),
    SearchTab(allAnimeList),
  ];

 @override
  Widget build(BuildContext context) {
   allAnimeList = context.watch<Anime>().allAnimeList;
    return Scaffold(
      backgroundColor: Colors.blueGrey[700],
      appBar: AppBar(
        title: Text('title').tr(),
      ),
      // Rest code

answered Sep 14 '20 at 10:22

Jitesh Mohite

31,138
12
157
147

Nope, this doesn't work. I want to run a provider method inside InitState. Is that possible? – szakes1 Sep 14 '20 at 16:47
@szakes1: have you fixed the issue? If my answer is helpful then accept it. thanks – Jitesh Mohite Sep 23 '20 at 15:32