How to fetch one of doc data from collection firestore using flutter?-CodePudding

I passed the ID from view all articles page. And also in this page Id print perfectly but I don't know how to fetch in doc in the collection. In this page should display article image,topic,description.

error

error 2

In there shows this error "Undefined name 'OneArticle'. (Documentation) Try correcting the name to one that is defined, or defining the name"

code

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import '../articlesModel.dart';

class ViewOneArticleScreen extends StatefulWidget {
  const ViewOneArticleScreen({Key? key, required this.id}) : super(key: key);
  final String id;

  @override
  State<ViewOneArticleScreen> createState() => _ViewOneArticleScreenState();
}

class _ViewOneArticleScreenState extends State<ViewOneArticleScreen> {
  Articles? oneArticle;
  bool loading = false;

  @override
  initState() {
    super.initState();
    loading = true;
    getArticle();
  }

  Future<void> getArticle() async {
    final id = widget.id;
    final reference = FirebaseFirestore.instance.doc('articles/$id');
    final snapshot = reference.get();
    final result =
        await snapshot.then((snap) => Articles.fromJson(snap.data()));
    print('result is ====> $result');
    setState(() {
      oneArticle = result;
      loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    // print(widget.id);
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Column(
        children: [
          Image.network(
            OneArticle.url,
            height: 30,
            fit: BoxFit.cover,
          ),
          Text(OneArticle.topic,
              style: const TextStyle(
                  fontSize: 20,
                  color: Colors.black54,
                  fontWeight: FontWeight.w500)),
          Text(OneArticle.description,
              style: const TextStyle(
                  fontSize: 20,
                  color: Colors.black54,
                  fontWeight: FontWeight.w500)),
        ],
      ),
    );
  }
}

model

import 'dart:convert';

Articles articlesFromJson(String str) => Articles.fromJson(json.decode(str));

String articlesToJson(Articles data) => json.encode(data.toJson());

class Articles {
  Articles({
    required this.id,
    required this.url,
    required this.topic,
    required this.description,
  });
  String id;
  String topic;
  String description;
  String url;

  factory Articles.fromJson(Map<String, dynamic> json) => Articles(
        id: json["id"] ?? "",
        topic: json["topic"] ?? "",
        description: json["description"] ?? "",
        url: json["url"] ?? "",
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "topic": topic,
        "description": description,
        "url": url,
      };
}

how to fetch view one article?

CodePudding user response：

I had revised your code. this is how it should look like.

Articles? oneArticle;
bool loading = false;

  @override
  initState() {
    super.initState();
    loading = true;
    getArticle();
  }



Future<void> getArticle() async {

  final id = widget.id;
    final reference = FirebaseFirestore.instance.doc('articles/$id');
    final snapshot = reference.get();
    final result = await snapshot.then((snap) => Articles.fromJson(snap.data()));
    print('result is ====> $result');
      setState(() {
     oneArticle = result;
     loading = false;
    });
}

Show loading spinner while fetching is in progress you can now use oneArticle inside your widget.