RangeError（索引）：无效值：有效值范围为空：0 - Flutter Contacts_services

Question

我对 Flutter 非常陌生，需要帮助来构建我的应用程序。

当我运行项目时，它会报错：RangeError (index): Invalid value: Valid value range is empty: 0，我无法显示除一个以外的任何联系人，并且这甚至不是第一次接触。

请帮忙。谢谢。

我的代码：

import 'dart:io';
import 'package:contacts_service/contacts_service.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    FlutterError.dumpErrorToConsole(details);
    if (kReleaseMode)
      exit(1);
  };
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter contacts',
      theme: ThemeData(),
      home: MyHomePage(title: 'Contacts Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Contact> contacts = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getAllContacts();
  }

  getAllContacts() async{
    List<Contact> _contacts = (await ContactsService.getContacts()).toList();
    setState(() {
      contacts = _contacts;
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            Text(
              'Phone Book',
            ),
            Expanded(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: contacts.length,
                  itemBuilder: (context, index){
                    Contact contact = contacts[index];
                    return ListTile(
                      title: Text(contact.displayName),
                      subtitle: Text(
                          contact.phones.elementAt(0).value
                      ),
                      leading: (contact.avatar != null && contact.avatar.length > 0) ?
                      CircleAvatar(backgroundImage: MemoryImage(contact.avatar),
                      ):
                      CircleAvatar(child: Text(contact.initials()),),
                    );
                  },
                )
            )
          ],
        ),
      ),
    );
  }
}

我拥有所有适当的依赖项，并且还指定了用户权限来读取和写入。

谢谢！！

Answer 1

通常，当您想让您的 UI 依赖于 Flutter 中来自互联网的数据时，如果您知道数据永远不会改变，您通常会使用 FutureBuilder。您还可以使用StreamBuilder，它会在来自 Internet 的数据发生变化时自动更新，例如当新联系人添加到列表中时。尝试在您的代码中使用其中之一。

目前您的代码并不安全。如果 async 函数 getAllContacts() 在整个小部件构建之前完成，则应用程序将崩溃，因为您最终会在构建小部件的状态之前调用 setState() 函数。

你可以这样做：

class _MyWidgetState extends State<MyWidget> {
  Future<List<Contact>> contacts;

  @override
  void initState() {
    super.initState();
    contacts = getAllContacts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Contact>>(
        future: contacts,
        builder: (BuildContext context, AsyncSnapshot<List<Contact>> snapshot) {
          if (!snapshot.hasData) {
            //Return a loadingscreen or placeholder widget
          }

          //Access the list of contacts:
          List<Contact> myContacts = snapshot.data; 

          //Return the widget
          return Container(
            padding: EdgeInsets.all(20),
            child: Column(
              children: <Widget>[
                Text(
                  'Phone Book',
                ),
                Expanded(
                    child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: myContacts.length,
                      itemBuilder: (context, index){
                        Contact contact = myContacts[index];
                        return ListTile(
                          title: Text(contact.displayName),
                          subtitle: Text(
                              contact.phones.elementAt(0).value
                          ),
                          leading: (contact.avatar != null && contact.avatar.length > 0) ?
                          CircleAvatar(backgroundImage: MemoryImage(contact.avatar),
                          ):
                          CircleAvatar(child: Text(contact.initials()),),
                        );
                      },
                    )
                )
              ],
            ),
          );
        },
      ),
    );
  }
}

但是当您调用getAllContacts() 方法时，似乎也有问题。在线：List<Contact> _contacts = (await ContactsService.getContacts()).toList(); 在这里调用toList() 方法似乎很奇怪。 ContactService.getContact() 应该已经返回了一个联系人列表