How to load data for ListView.builder to build from provider's data

@override
   void initState() {
     super.initState();

    use api here
  }

You shouldn't call the API inside build as you will have a new call each time the framework rebuilds the screen, instead call it inside initState().

If you need to wait for the API data, then use a FutureBuilder in your build function so it will rebuild automatically once the data has been retrieved.

Instead of calling your fetch function at the start of the build function or in the initState function, you can simply use the FutureBuilder widget. This way you can specify exactly what to show when it is still loading and what when finished, without adding more and more member variables.

Your modified code could then look like this:

class _StaffViewState extends State<StaffView> {
  
  bool _searchaMode = false;

  @override
  Widget build(BuildContext context) {
    return Consumer<UserProvider>(
      builder: (context, providerData, _) => FutureBuilder(
        future: providerData.fetchUsersList(),
        builder: (context, snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return Text("Loading...");
          }

          List<User> userList = snapshot.data;

          return Scaffold(
            appBar: AppBar(
              title: _searchaMode == false
                  ? Text('Staff\s List')
                  : TextField(
                      autofocus: true,
                      cursorColor: Colors.white,
                      onSubmitted: (String value) async {
                        await showDialog<void>(
                          context: context,
                          builder: (BuildContext context) {
                            return AlertDialog(
                              title: const Text('Thanks!'),
                              content: Text('You typed "$value".'),
                              actions: <Widget>[
                                FlatButton(
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  child: const Text('OK'),
                                ),
                              ],
                            );
                          },
                        );
                      },
                      style: TextStyle(
                        color: Colors.white,
                      ),
                      decoration: InputDecoration(
                        hintText: 'Search . . .',
                        hintStyle: TextStyle(color: Colors.white),
                        border: InputBorder.none,
                      ),
                    ),
              actions: [
                _searchaMode == false
                    ? IconButton(
                        onPressed: () {
                          setState(() {
                            _searchaMode = true;
                          });
                        },
                        icon: Icon(Icons.search),
                      )
                    : IconButton(
                        onPressed: () {
                          setState(() {
                            _searchaMode = false;
                          });
                        },
                        icon: Icon(
                          Icons.cancel,
                          color: Colors.tealAccent,
                        ),
                      ),
                RaisedButton.icon(
                  onPressed: () async {},
                  color: Colors.yellow.shade900,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(100.0),
                      topLeft: Radius.circular(100.0),
                    ),
                  ),
                  icon: Icon(
                    Icons.add,
                    size: 25.0,
                    color: Colors.white,
                  ),
                  label: Text(
                    'Add User',
                    style: TextStyle(
                      fontSize: 15.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
            drawer: AppSideNav(),
            body: ListView.builder(
                    itemCount: userList.length,
                    itemBuilder: (context, index) {
                      return Container(
                        decoration: BoxDecoration(
                          border: Border(
                            bottom: BorderSide(
                              width: .9,
                              color: Colors.yellow.shade700,
                            ),
                          ),
                        ),
                        child: ListTile(
                          leading: Image.network(
                              providerData.getUsersList()[index].image != null
                                  ? providerData.getUsersList()[index].image
                                  : 'https://via.placeholder.com/150'),
                          title: Center(
                              child: Text(
                                  providerData.getUsersList()[index].email)),
                          subtitle: Center(
                              child:
                                  Text(providerData.getUsersList()[index].nid)),
                          trailing: providerData
                                      .getUsersList()[index]
                                      .isAuthority ==
                                  true
                              ? Text('Authority')
                              : providerData.getUsersList()[index].isStaff ==
                                      true
                                  ? Text('Staff')
                                  : Text('General User'),
                          contentPadding:
                              EdgeInsets.symmetric(horizontal: 20.0),
                          visualDensity: VisualDensity.adaptivePlatformDensity,
                          isThreeLine: false,
                          onTap: () {},
                        ),
                      );
                    },
                  ),
          );
        },
      ),
    );
  }
}