如何使用 Flutter(Dart) 在 ListView 中显示通话记录

Question

I have added call_log: ^2.0.2 dependency in my flutter app. But cannot get call log and insert into a List View. How can I get call log and add those into a List View?

Here is my code. I want to insert all call log to this list view. I have created three tab and each tab is containing list view. I want to insert call log to the first tab and message to the second tab.

    import 'package:call_log/call_log.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Iterable<CallLogEntry> _callLogEntries = [];
  @override
  Widget build(BuildContext context) {
    var mono = TextStyle(fontFamily: 'monospace');
    var children = <Widget>[];
    _callLogEntries.forEach((entry) {
      children.add(
        Column(
          children: <Widget>[
            Divider(),
            Text('F. NUMBER: ${entry.formattedNumber}', style: mono),
            Text('NUMBER   : ${entry.number}', style: mono),
            Text('NAME     : ${entry.name}', style: mono),
            Text('TYPE     : ${entry.callType}', style: mono),
            Text(
                'DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
                style: mono),
            Text('DURATION :  ${entry.duration}', style: mono),
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
        ),
      );
    });
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            elevation: 5,
            backgroundColor: Colors.black,
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.call)),
                Tab(icon: Icon(Icons.message)),
                Tab(icon: Icon(Icons.location_on)),
              ],
            ),
            title: Text('Device Monitor'),
          ),
          body: TabBarView(
            children: [
              Scrollbar(
                child: ListView(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  children: [
                    Icon(Icons.call),
                    for (int index = 1; index < 21; index++)
                      ListTile(
                        leading: ExcludeSemantics(
                          child: CircleAvatar(child: Text('$index')),
                        ),
                        title: Text('item $index'),
                      ),
                  ],
                ),
              ),
              Scrollbar(
                child: ListView(
                  padding: const EdgeInsets.symmetric(vertical: 8),
                  children: <Widget>[Icon(Icons.message), Text('test')],
                ),
              ),
              Icon(Icons.location_on),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

You didn't get the call log. Instead, you assigned your _callLogEntries to [] (an empty array).

A good way of loading the call log in a ListView is using FutureBuilder.

FutureBuilder(
  future: CallLog.get(),
  builder: (context, snapshot){
    if(!snapshot.hasData) return Center(child: CirculaProgressIndicator());

    List<CallLogEntry> entries = snapshot.data;
    return ScrollBar(
       child: ListView.builder(
          itemBuilder: (contex, index){
             var entry = entries[index];
             return Column(
                  children: <Widget>[
                     Divider(),
                     Text('F. NUMBER: ${entry.formattedNumber}', style: mono),
                     Text('NUMBER   : ${entry.number}', style: mono),
                     Text('NAME     : ${entry.name}', style: mono),
                     Text('TYPE     : ${entry.callType}', style: mono),
                     Text('DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}', style: mono),
                     Text('DURATION :  ${entry.duration}', style: mono),
                  ],
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
            );
        },
        itemCount: entries.length,
       ),
     );
)

Answer 2

Use FutureBuilder will be easy way and you should add.toList() after snapshot.data

FutureBuilder(
  future: CallLog.get(),
  builder: (context, snapshot) {
    if (!snapshot.hasData)
      return Center(child: CircularProgressIndicator());

    List<CallLogEntry> entries = snapshot.data.toList();
    return Scrollbar(
      child: ListView.builder(
        itemBuilder: (context, index) {
          var entry = entries[index];
          var mono = TextStyle(fontFamily: 'monospace');
          return Column(
            children: <Widget>[
              Divider(),
              Text('F. NUMBER: ${entry.formattedNumber}',
                  style: mono),
              Text('NUMBER   : ${entry.number}', style: mono),
              Text('NAME     : ${entry.name}', style: mono),
              Text('TYPE     : ${entry.callType}', style: mono),
              Text(
                  'DATE     : ${DateTime.fromMillisecondsSinceEpoch(entry.timestamp)}',
                  style: mono),
              Text('DURATION :  ${entry.duration}',
                  style: mono),
            ],
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
          );
        },
        itemCount: entries.length,
      ),
    );
  }),