我正在尝试从 newsapi.org 获取数据但遇到问题

Question

here's my code

Error: NoSuchMethodError: Class 'Future' has no instance getter 'length'

void main() => runApp(MyApp());


class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key : key ) ;

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

class _MyAppState extends State<MyApp> {
  String urlToImage;
  // Future<Article> newslist;
  var newslist;

  @override
  void initState() {
    super.initState();
    newslist = fetchArticle();
  }

  @override
  Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Api calls',
          home: Scaffold(
            appBar: AppBar(title: Text('Api Calls'),),
            body: ListView.builder(
              shrinkWrap: true,
              itemCount: newslist.length,
          itemBuilder: (context, index) {
            return Image.network(newslist[index]['urlToImage']);
          })
      ),
      
    );
  }
}

class Article {
  final String author;
  final String title;
  final String description;
  final String publishedAt;
  final String urlToImage;
  final String url;

  Article({this.author, this.description, this.title, this.publishedAt, this.urlToImage, this.url});


  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
      author : json['author'],
      title: json['title'],
      description: json['description'],
      publishedAt: json['publishedAt'],
      url: json['url'],
      urlToImage: json['urlToImage']
    );
  
    
  }
  
}

  Future<Article> fetchArticle() async {

  var url = 
  'http://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=2e8e3846c42a4f64a6b1d98370bdeeea';
  
  final response = await http.get(url);

  if (response.statusCode == 200) {
    return Article.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load Article');
  }

}

lutter: The following NoSuchMethodError was thrown building MyApp(dirty, state: _MyAppState#c93f4): flutter: Class 'Future' has no instance getter 'length'. flutter: Receiver: Instance of 'Future' flutter: Tried calling: length flutter: flutter: The relevant error-causing widget was:

flutter: When the exception was thrown, this was the stack: flutter: #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:53:5) flutter: #1 _MyAppState.build (package:api/main.dart:35:35) flutter: #2 StatefulElement.build (package:flutter/src/widgets/framework.dart:4619:28) flutter: #3 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4502:15) flutter: #4 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4675:11) flutter: #5 Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5) flutter: #6 ComponentEl ement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5) flutter: #7 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4666:11) flutter: #8 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4476:5) flutter: #9 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3446:14) flutter: #10 Element.updateChild (package:flutter/src/widgets/framework.dart:3214:18) flutter: #11 RenderObjectToWidgetElement._rebuild (package:flutter/src/widgets/binding.dart:1148:16) flutter: #12 RenderObjectToWidgetElement.mount (package:flutter/src/widgets/binding.dart:1119:5) Z5ACEBC 4CB70DDBB074B0AC76AAB176AEZ: #13 RenderObjectToWidgetAdapter.attachToRenderTree. (package:flutter/src/widgets/binding.dart:1061:17) flutter: #14 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2607:19) flutter: #15 RenderObjectToWidgetAdapter.attachToRenderTree (package:flutter/src/widgets/binding.dart:1060:13) flutter: #16 WidgetsBinding.attachRootWidget (package:flutter/src/widgets/binding.dart:941:7) flutter: #17 WidgetsBinding.scheduleAttachRootWidget. (package:flutter/src/widgets/binding.dart:922:7) flutter: (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch) flutter: flutter:

Answer 1

You can copy paste run full code below
Step 1: You can use bool _isLoading to control loading status
Step 2: fetchArticle() return Future<List<Article>> not Future<Article>
Step 3: Use payloadFromJson(response.body) , you can see Payload class definition in full code
Step 4: When data is ready set _isLoading to false

void getData() async {
    newslist = await fetchArticle();
    setState(() {
      _isLoading = false;
    });
  }

working demo

full code

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

Payload payloadFromJson(String str) => Payload.fromJson(json.decode(str));

String payloadToJson(Payload data) => json.encode(data.toJson());

class Payload {
  Payload({
    this.status,
    this.totalResults,
    this.articles,
  });

  String status;
  int totalResults;
  List<Article> articles;

  factory Payload.fromJson(Map<String, dynamic> json) => Payload(
        status: json["status"],
        totalResults: json["totalResults"],
        articles: List<Article>.from(
            json["articles"].map((x) => Article.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "status": status,
        "totalResults": totalResults,
        "articles": List<dynamic>.from(articles.map((x) => x.toJson())),
      };
}

class Article {
  Article({
    this.source,
    this.author,
    this.title,
    this.description,
    this.url,
    this.urlToImage,
    this.publishedAt,
    this.content,
  });

  Source source;
  String author;
  String title;
  String description;
  String url;
  String urlToImage;
  DateTime publishedAt;
  String content;

  factory Article.fromJson(Map<String, dynamic> json) => Article(
        source: Source.fromJson(json["source"]),
        author: json["author"],
        title: json["title"],
        description: json["description"],
        url: json["url"],
        urlToImage: json["urlToImage"],
        publishedAt: DateTime.parse(json["publishedAt"]),
        content: json["content"] == null ? null : json["content"],
      );

  Map<String, dynamic> toJson() => {
        "source": source.toJson(),
        "author": author,
        "title": title,
        "description": description,
        "url": url,
        "urlToImage": urlToImage,
        "publishedAt": publishedAt.toIso8601String(),
        "content": content == null ? null : content,
      };
}

class Source {
  Source({
    this.id,
    this.name,
  });

  String id;
  String name;

  factory Source.fromJson(Map<String, dynamic> json) => Source(
        id: json["id"] == null ? null : json["id"],
        name: json["name"],
      );

  Map<String, dynamic> toJson() => {
        "id": id == null ? null : id,
        "name": name,
      };
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String urlToImage;
  // Future<Article> newslist;
  List<Article> newslist;
  bool _isLoading = true;

  Future<List<Article>> fetchArticle() async {
    var url =
        'http://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=2e8e3846c42a4f64a6b1d98370bdeeea';

    final response = await http.get(url);

    if (response.statusCode == 200) {
      Payload payload = payloadFromJson(response.body);

      return payload.articles;
    } else {
      throw Exception('Failed to load Article');
    }
  }

  void getData() async {
    newslist = await fetchArticle();
    setState(() {
      _isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      getData();
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Api calls',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Api Calls'),
          ),
          body: _isLoading
              ? Center(child: CircularProgressIndicator())
              : ListView.builder(
                  shrinkWrap: true,
                  itemCount: newslist.length,
                  itemBuilder: (context, index) {
                    return Image.network(newslist[index].urlToImage);
                  })),
    );
  }
}

Answer 2

Already done by other people. But I tried and upload code.

there is some problem.

• fetchAricle method gets a one article only.

So I changed to get articles from url. And using 'FutureBuilder' just build a list view with articles.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home 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> {
  String urlToImage;
  Future<List<Article>> newslist;

  Future<List<Article>> fetchArticle() async {
    var url =
        'http://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=2e8e3846c42a4f64a6b1d98370bdeeea';

    final response = await http.get(url);

    if (response.statusCode == 200) {
      var data = json.decode(response.body);
      List<Article> listArticle = data["articles"].map<Article>((article) {
        return Article.fromJson(article);
      }).toList();
      return listArticle;
    } else {
      throw Exception('Failed to load Article');
    }
  }

  @override
  void initState() {
    super.initState();
    newslist = fetchArticle();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Api calls',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Api Calls'),
        ),
        body: FutureBuilder<List<Article>>(
          future: newslist,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              // return Container();
              return ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  return Image.network(snapshot.data[index].urlToImage);
                },
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            return Container();
          },
        ),
      ),
    );
  }

  Widget _buildBody() {
    return Container();
  }
}

class Article {
  final String author;
  final String title;
  final String description;
  final String publishedAt;
  final String urlToImage;
  final String url;

  Article(
      {this.author,
      this.description,
      this.title,
      this.publishedAt,
      this.urlToImage,
      this.url});

  factory Article.fromJson(Map<String, dynamic> json) {
    return Article(
        author: json['author'],
        title: json['title'],
        description: json['description'],
        publishedAt: json['publishedAt'],
        url: json['url'],
        urlToImage: json['urlToImage']);
  }
}