I building a list view for contacts with a picture and details, but nothing shows up in my page. its just blank.

I have tried two ways of doing this but both renders a blank page.

import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:convert';

import 'package:homenet/pages/search_page.dart';

class PhoneBook extends StatefulWidget {
  @override
  _PhoneBookState createState() => _PhoneBookState();
}

class _PhoneBookState extends State<PhoneBook> {
  List data;
  Future<String> loadJsonData() async {
    var jsonText = await rootBundle.loadString("data/data.json");
    setState(() {
      data = json.decode(jsonText);
    });
    return 'success';
  }

  @override
  void initState() {
    // TODO: implement initState
    this.loadJsonData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      child: ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          return SingleContact(
            name: data[index]['name'],
            company: data[index]['company'],
            cell: data[index]['cell'],
            office: data[index]['office'],
            picture: data[index]['picture'],
            email: data[index]['email'],
          );
        },
      ),
    );
  }
}
class SingleContact extends StatelessWidget {
  final name;
  final company;
  final cell;
  final office;
  final picture;
  final email;

  SingleContact({Key key, this.name, this.company, this.cell, this.office, this.picture, this.email});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: new Color(0xFFFA983A),
        title: Image.asset(
          'assets/images/logo_white.png',
          fit: BoxFit.cover,
        ),
        elevation: 0.0,
        centerTitle: true,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.search),
            onPressed: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => new SearchPage()));
            },
          ),
        ],
      ),
      body: Card(
        elevation: 5,
        margin: EdgeInsets.all(8.0),
        child: Container(
          padding: EdgeInsets.all(12.0),
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    height: 75,
                    width: 75,
                    child: ClipRRect(
                        borderRadius: BorderRadius.circular(50.0),
                        child: Image.asset(picture)),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(name,
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0
                        ),),
                      Text(company,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 18.0
                          )),
                      Text(email,
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 18.0,
                              color: Color(0xFFFA983A)
                          ))
                    ],
                  ),
                  FloatingActionButton(
                    backgroundColor: Color(0xFFFA983A),
                    mini: true,
                    onPressed: (){},
                    child: Icon(Icons.phone, color: Colors.white,),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This is my code, can someone please help to spot the issue because i'm at my wits end. data is from a data.json and all information inside file is correct. some of the information is duplicated like "email", would this have any effect on the blank rendering?

1 Answers

1
Zvi Karp On Best Solutions

You can't put a Scoffold straight in a ListView, you should probably have the Scaffold in the build method of _PhoneBookState. If you really want to have the Scaffold in the list view, wrap it with a Container with a specified height.

It is hard for me to understand your expected UI, maybe explain what you want to see in the list.