ListView json flutter
Flutter HTTP JSON ListView MasterDetail Images Text Tutorial How to download JSON with images and Text via HTTP and bind to a custom listview with images and text. Then open a detail view of the listview when a listview item is clicked. DemoHere are demo for this project: Flutter HTTP JSON Images text JSON dataHere's the json data view. It's available in this url https://raw.githubusercontent.com/Oclemy/SampleJSON/338d9585/spacecrafts.json. JSON Data Video Tutorial.Here's the corresponding video tutorial. Video TutorialHere we have a video tutorial for this example. ListViewOne of the most commonly used widgets in any mobile app development framework is the ListView. It normally renders items in a linear manner and is always very flexible. A good way of getting a feel of a framework is to render items in a listview. Especially images and text. That's exactly what we do here. Then listen to listview itemClick events. Thus we show pass the clicked data to a new detail page/screen. Here are several things you do here with a ListView (a). How to Create a CustomListView This ListView will be capable of rendering both images and text. It will render them in beautiful cardviews. We will make the custom listview extend the StatelessWidget class: class CustomListView extends StatelessWidget {..}Inside the class we will have a method called createViewItem(). This method will define for us a single listview view item. Thata is a ListTile and its contents. Widget createViewItem(Spacecraft spacecraft, BuildContext context) { return new ListTile( title: new Card( ...Our ListTiles will have CardViews. Those CardViews will have both image and texts. (b). How to Listen to ListView itemClicks Well you just use the onTap() callback. onTap: () { //..Open Second Page here. });MaterialPageRouteA MaterialPageRoute is a modal route that replaces the entire screen with a platform-adaptive transition. (a). How to Create a MaterialPageRoute (b). How to Open a Second Page httphttp is the package in flutter that allows us perform our HTTP Requests. In this case we want to perform a HTTP GET request. This means we want to download some data. First we need to import http package: import 'package:http/http.dart' show get;Then we need a jsonEndpoint, basically our url string. Then we invoke the get which is equivalent to http.get: final jsonEndpoint = "https://raw.githubusercontent.com/Oclemy/SampleJSON/338d9585/spacecrafts.json"; final response = await get(jsonEndpoint);We will check if our response is HTTP.OK which universally equals 200 response code. We are making this operation asynchronous. We will be returning a Future
(a). main.dartHere's the complete code. import 'dart:async'; import 'package:flutter/material.dart'; import 'package:http/http.dart' show get; import 'dart:convert'; class Spacecraft { final String id; final String name, imageUrl, propellant; Spacecraft({ this.id, this.name, this.imageUrl, this.propellant, }); factory Spacecraft.fromJson(Map
(b). pubspec.yamlWe are not using any third party library. name: json_images description: A new Flutter project. dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: trueHow to Download and Run.We are not using any third party library hence all you need to do is copy the main.dart file into your project. The JSON is luckily available online so you just run the app and it will work. |