我如何使用Flutter StreamBuilder以及卡片和Listtile

问题描述 投票:0回答:1

我正在Flutter上完成我的第一个任务,这是小型Job门户。 我遇到了我无法应付的问题 我想将此静态代码转换为Stream Builder查询快照以显示所有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]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

并且如果他单击任何作业,则应打开其信息?

这应该是用户界面Jobs Layout Photo

这是Jobs模块和一些静态Jobs,但是现在我在Fire store上有很多工作,我想在此布局上检索全部]]

 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作业),指的是卡片和列表上的内容 我尝试获取快照,如果有数据,我将其保存在List上,但是我不能使用此列表来获取薪水和姓名以及其他东西,放在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 
    

我正在Flutter上完成我的第一个任务,这是小型Job门户。我遇到了无法解决的问题,我想将此静态代码转换为Stream Builder查询快照以显示所有Jobs表单...

flutter dart google-cloud-firestore flutter-layout stream-builder
1个回答
0
投票

使用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();
});
© www.soinside.com 2019 - 2024. All rights reserved.