我如何使用 flutter StreamBuilder 与 Card 和 Listtile

Question

我正在 Flutter 上完成我的第一项任务，这是一个小型工作门户。
我遇到了我无法处理的问题我想将此 static 代码转换为 Stream 生成器查询快照以显示所有作业表单数据库可以任何人帮助

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

 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]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

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

这就是 UI Jobs Layout Photo的样子

这是工作模块和一些 static 工作，但现在我在 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",
    ), ```

有人对这个代码，我尝试对其进行修改，所以我不知道卡和列表上指的是什么（作业拍摄作业）我尝试获取快照，如果它有数据，我将其保存在列表中，但我无法使用此列表拿薪水和姓名和其他东西 在 ListTile makeListTile(JobsHot job) => ListTile 因为它不在 scope 上

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

对 stream 请求使用 FutureBuilder 小部件，例如

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