ListView Builder is not returning any text when calling list

Issue

I’ve found that if I change my itemCount to a number it still doesn’t work but if I change the itemCount & comment out the teamServices call there and in the column, it will display the text Hello.

So I’m thinking my problem is with this line of code here final teamServices = Provider.of<TeamServices>(context); because it does print in the console from the services page. Any help would be appreciated!

main.dart

import 'package:firebase_api/pages/home_page.dart';
import 'package:firebase_api/services/team_services.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() => runApp(const AppState());

class AppState extends StatelessWidget {
  const AppState({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(providers: [
      ChangeNotifierProvider(create: (_)=> TeamServices())
      ],
      child: const MyApp(),
      );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo'
      ),
      home: const HomePage(),
    );
  }
}

HomePage

import 'package:firebase_api/services/team_services.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final teamServices = Provider.of<TeamServices>(context);

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Firebase'),
        backgroundColor: Colors.blue[400],
        titleTextStyle: TextStyle(color: Colors.white),
      ),
      body: ListView.builder(
        itemCount: 3, //teamServices.listTeams.length,
        shrinkWrap: true,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              Text('Hello'),
          //  Text(teamServices.listTeams.length.toString()),
          //  Text(teamServices.listTeams[index].customer)
            ],
          );
        },
      ),
    );
  }
}

team_services

import 'dart:convert';
import 'package:firebase_api/models/teams_model.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class TeamServices extends ChangeNotifier {
  final String _urlBase =
      'test-ab11a-default-rtdb.firebaseio.com';

  final List<Team> listTeams = [];

  TeamServices() {
    getTeams();
  }

  Future <List<Team>> getTeams() async {
    final teamUrl = Uri.https(_urlBase, 'orders.json');
    final response = await http.get(teamUrl);

   // print(response.body);
    final Map<String, dynamic> obj = json.decode(response.body);

    obj.forEach((key, value) {

      final team = Team.fromMap(value);
      team.id  = key; //.toString(); // as int?;
      listTeams.add(team);

     });


   // print(listTeams[5].price);
    print(listTeams.length);
     return listTeams;
     
  }
}

Solution

You are calling an async function (getTeams) it the constructor of your service. Consequently it is very likely that the variable listTeams is empty when the widget is built.

In addition, you are not using correctly ChangeNotifier since:

• You are not notifying listeners to changes. You should add notifyListeners() after the loop on the json map.
• You are not listening to changes. The provider is just doing what its name indicates, providing the service instance, that’s it. You should then wrap your ListBuilder in a widget that listens to changes, for example ListenableBuilder

Take a look at the example on ChangeNotifier.

Answered By – pcba-dev

Answer Checked By – Willingham (FlutterFixes Volunteer)