我如何使用 Flutter StreamBuilder 和 Card 和 Listtile

Question

我正在处理我在 Flutter 上的第一个任务，这是一个小型工作门户。
我遇到了我无法处理的问题 我想将此静态代码转换为 Stream Builder Query 快照以显示所有 Jobs 表单数据库 谁能帮忙

这是作业的布局，我想在其中添加流

 class _HotJobsState extends State<HotJobs> {
  List jobs;
  @override
  void initState() {
    jobs = getHotJobs();
    super.initState();
  }
  Widget build(BuildContext context) {

    ListTile makeListTile(JobsHot job) => ListTile(
      isThreeLine: true,
      title: Text(
        job.title,
        style: TextStyle(fontSize: 18.0,fontWeight: FontWeight.bold),
      ),
      subtitle: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            job.companyName,
            style: TextStyle(fontSize: 15.0),
          ),
          SizedBox(height: 15.0,),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Text(
                    '???? Deadline:',
                    style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w700),
                  ),
                  Text(
                    job.deadline,
                    style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w700),
                  ),
                ],
              ),
              Column(
                children: <Widget>[
                  Text(
                    '???? Experience:',
                    style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w700),
                  ),
                  Text(
                    job.experience,
                    style: TextStyle(fontSize: 15.0),
                  ),
                ],
              ),
            ],
          ),
          SizedBox(height: 15.0,),
          Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      '???? Education:',
                      style: TextStyle(fontSize: 15.0,fontWeight: FontWeight.w700),
                    ),
                    Text(
                      job.education,
                      style: TextStyle(fontSize: 15.0),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
      trailing: Image(
        width: 40.0,
        height: 40.0,
        image: AssetImage(job.image),
      ),
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => JobDetailsPage(jobsHot: job)));
      },
    );

    Card makeCard(JobsHot job) => Card(
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        height: 200.0,
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(15.0),
        ),
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: makeListTile(job),
        ),
      ),
    );

    return Scaffold(
      appBar: header(context, titleText: 'Hot Jobs'),
      body: Column(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.3),
                  spreadRadius: 10,
                  blurRadius: 20,
                  offset: Offset(0, 7), // changes position of shadow
                ),
              ],
            ),
            child: Column(
              children: <Widget>[
                Card(
                  margin:
                      EdgeInsets.symmetric(horizontal: 0.0, vertical: 0.0),
                  color: Colors.white,
                  elevation: 5.0,
                  child: ListTile(
                    title: Row(
                      children: <Widget>[
                        Text(
                          '175',
                          style: TextStyle(
                              color: Colors.red,
                              fontSize: 20.0,
                              fontWeight: FontWeight.bold),
                        ),
                        Text(
                          ' Hot Jobs',
                          style: TextStyle(
                            color: Theme.of(context).accentColor,
                            fontSize: 20.0,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
          Expanded(
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              shrinkWrap: true,
              itemCount: jobs.length,
              itemBuilder: (BuildContext context, int index) {
                return makeCard(jobs[index]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

如果他点击任何工作，它应该打开它的信息？

UI 应该是这样的 Jobs Layout Photo

这是工作模块和一些静态工作，但现在我在 Fire 商店有很多工作，我想在这个布局上检索所有工作

 class JobsHot {
  String title;
  String companyName;
  String deadline;
  String experience;
  String education;
  String vacancies;
  String salary;
  String location;
  String image;
  String responsibility;
  String requirement;
  String salaryBreakdown;

  JobsHot({
    this.title,
    this.companyName,
    this.deadline,
    this.experience,
    this.education,
    this.image,
    this.vacancies,
    this.salary,
    this.location,
    this.responsibility,
    this.requirement,
    this.salaryBreakdown,
  });
}

List getHotJobs() {
  return [
    JobsHot(
      title: "Android and iOS Developer",
      companyName: "Quality Feeds Limited",
      deadline: "Feb 29, 2020",
      experience: "1-2 years",
      education: "Bachelor of Science(BSc) in CSE",
      image: 'assets/images/letters/q9.png',
      vacancies: '02',
      salary: '12000-15000(monthly)',
      location: 'Cairo, Maady',
      responsibility:
          "• Develop high-quality android applications, ensuring proper software design and architecture.\n\n"
          "• Identify, prioritize and execute tasks in the software development life cycle.\n\n"
          "• Debug existing source code and polish feature sets.\n\n"
          "• Have understanding of software development methodologies. \n\n"
          "• Work on bug fixing and improving application performance.\n\n"
          "• Work independently when required.\n\n"
          "• Continuously learn and improve skills.\n\n"
          "• Attention to detail is essential and all tasks must be carried out to the highest standard.\n\n",
      requirement: "• Age 23 to 30 years.\n\n"
          "• Sound knowledge in Object Oriented Programming(i.e. OOPs) concepts.\n\n"
          "• Must have a strong knowledge of Android SDK, different versions of Android, how to deal with different screen sizes and applications with complex UI and Work robustly with Android UI design principles, patterns, and best practices.\n\n"
          "• Must have experience with OOP, Kotlin, Android Studio, Gradle, ProGuard and GIT/SVN, Unit testing.\n\n"
          "• Must have experience for development and integration of API to Mobile Applications.\n\n"
          "• Experience with offline storage, threading, and performance tuning. \n\n"
          "• Familiarity with RESTful APIs to connect Android applications to back-end services.\n\n",
      salaryBreakdown: "• 12000-15000(monthly).\n\n"
          "• Mobile bill, Provident fund, Weekly 2 holidays, Insurance.\n\n"
          "• Lunch Facilities: Full Subsidize.\n\n"
          "• Salary Review: Yearly.\n\n"
          "• Festival Bonus: 2.\n\n",
    ), ```

有人对这个代码，我尝试修改它，所以我不知道卡片和列表上指的是什么（Jobshot 工作） 我尝试获取快照，如果它有数据，我将其保存在列表中，但我无法使用此列表获取薪水和姓名以及其他内容在 ListTile 上 makeListTile(JobsHot job) => ListTile 因为它超出范围

please if any one help me to turn this code to reade from firestore and present it on this UI  its my graduation project and im stuck with this 

Answer 1

使用 FutureBuilder Widget 进行流请求，例如

final builder = FutureBuilder(
    future: _future,
    builder: (context, snapshot) {
      if (snapshot.connectionState != ConnectionState.done) {
        return _buildLoader();
      }
      if (snapshot.hasError) {
        return _buildError();
      }
      if (snapshot.hasData) {
        return _buildDataView();
      }     
      return _buildNoData();
});

此链接中有一个完整的示例Future Builder with list view example