Flutter SDK Tutorial - Listview with JSON or List data (App Development)

By: Bram Vanbilsen

203   1   11862

Uploaded on 07/27/2017

In this tutorial, I guide you through making an application which has a listview with data from a JSON file or a List variable.

Video about making the HTTP Request and using REST APIs: https://youtu.be/-PRrdG163to

Github repo (for this project): https://github.com/bramvbilsen/Flutter-Listview-Tutorial

Github repo (for the function): https://github.com/bramvbilsen/Flutter-HTTP-Requests-REST-api

Hello World Tutorial: https://youtu.be/CEPCGXQ7IQg

NOTE: I'm using the android simulator, but you can simply open an iPhone simulator to run the same code!

Be sure to ask for help in the comments if you need any help. Suggestions for future Flutter tutorials are also very welcome! :D

Flutter is an SDK owned by Google to create applications for Android and iOS using a single codebase. Flutter uses the Dart programming language (also owned by Google). Flutter was in alpha when I released this video, so things might still change a bit. But the SDK is already mature enough to write some cool apps!

Comments (1):

By anonymous    2018-07-19

I am trying to get my data to show on my flutter app from a api (formatted in json) created by connecting mysql on node.js with express.

i am running this error in android studio console

[VERBOSE-2:dart_error.cc(16)] Unhandled exception:
type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 
'List<dynamic>'

the api currently looks like this

{
    "error": false,
        "data": [
           {
              "name": "conner",
              "age": 24
            },
            {
              "name": "andrew",
              "age": 20
            }
         ],
         "message": "Todos list."
         }

I am using this tutorial and just replaced his value "title" with mine "name", https://www.youtube.com/watch?v=-PRrdG163to

here is the code I'm running

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {

  Map<String,dynamic> data;

  Future<String> getData() async {
    var response = await http.get(
        Uri.encodeFull("http://10.1.0.109:8080/names"),
        headers: {
          "Accept": "application/json"
        }
    );

    this.setState(() {
      data = JSON.decode(response.body);
    });
    print (data[1]["data"]);

    return "Success!";
  }

  @override
  void initState() {
    super.initState();
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Listviews"),
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data["data"].length,
        itemBuilder: (BuildContext context, int index) {
          return new Card(
            child: new Text(data[index]["data"]),
          );
        },
      ),
    );
  }
}

Original Thread

Submit Your Video

If you have some great dev videos to share, please fill out this form.