从 JSON 数据中获取的标题不会显示在 Flutter 移动应用的卡片内

Question

我无法在卡片内的小部件中显示数据。下面是通过小部件显示卡片内内容的代码。下面的代码是应该在第二张图片中显示的仪表板页面上显示项目描述和标题的小部件。 enter image description here

  import 'dart:convert';
    
    import 'package:flutter/material.dart';
    import 'package:saas/models/dummy_model.dart';
    import 'package:saas/network_utils/api.dart';
    
    import 'progress_indicator_widget.dart';
    
    // ignore: must_be_immutable
    class ProjectWidget extends StatelessWidget {
      final List<Project> _projects = <Project>[];
    
      ProjectWidget({
        Key? key,
      }) : super(key: key);
    
      Future<List<Project>> _fetchProjects() async {
        var res = await Network().getData('users/project');
    
        var projects = <Project>[];
    
        if (res.statusCode == 200) {
          var body = json.decode(res.body);
          var tdata = body['data'];
          var projectsJson = tdata;
    
          for (var projectJson in projectsJson) {
            projects.add(Project.fromJson(projectJson));
          }
        }
        return projects;
      }
    
      @override
      Widget build(BuildContext context) {
        _fetchProjects().then((value) {
          _projects.addAll(value);
        });
    
        return Flexible(
            child: Column(children: [
          ListView.builder(
            shrinkWrap: true,
            itemCount: _projects.length,
            itemBuilder: (context, index) {
              return Card(
                  color: Colors.yellow,
                  child: Row(
                    children: [
                      Container(
                          padding: const EdgeInsets.only(left: 10),
                          child: const Icon(Icons.list_alt, size: 12)),
                      Container(
                          padding: const EdgeInsets.only(left: 15),
                          child: Text(_projects[index].title,
                              style: const TextStyle(
                                  fontSize: 16, color: Colors.black))),
                      Container(
                          padding: const EdgeInsets.only(left: 15),
                          child: const ProgressIndicatorWidget()),
                      Container(
                          padding: const EdgeInsets.only(left: 30),
                          child: IconButton(
                            icon:
                                const Icon(Icons.arrow_right, color: Colors.black),
                            onPressed: () {},
                          )),
                    ],
                  ));
            },
          )
        ]));
      }
    }


The code for the dashboard page in which I have put the widget is below: 

    import 'package:flutter/material.dart';
    import 'package:flutter/painting.dart';
    import 'package:saas/models/user_model.dart';
    import 'package:saas/widgets/activities_widget.dart';
    import 'package:saas/widgets/project_widget.dart';
    
    class Dashboard extends StatefulWidget {
      const Dashboard({Key? key, User? user}) : super(key: key);
    
      @override
      _DashboardState createState() => _DashboardState();
    }
    
    class _DashboardState extends State<Dashboard> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            backgroundColor: Colors.white,
            body: SingleChildScrollView(
                child: Column(children: [
              Container(
                height: 40,
                width: double.infinity,
                color: Colors.transparent,
              ),
              SizedBox(
                  width: 390,
                  child: Card(
                    color: const Color.fromRGBO(0, 161, 39, 1),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15)),
                    elevation: 10,
                    child: Container(
                        color: const Color.fromRGBO(0, 161, 39, 1),
                        margin: const EdgeInsets.all(10),
                        padding: const EdgeInsets.only(bottom: 30, top: 10),
                        child: Row(children: [
                          Column(
                            children: [
                              Container(
                                  padding: const EdgeInsets.only(left: (15)),
                                  child: const Text('M & E System',
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 18,
                                          fontWeight: FontWeight.bold)))
                            ],
                          ),
                          Expanded(
                            child: Container(
                                padding: const EdgeInsets.only(left: 180),
                                margin: const EdgeInsets.all(6),
                                child: IconButton(
                                  icon: const Icon(Icons.settings,
                                      color: Colors.white),
                                  onPressed: () {},
                                )),
                          )
                        ])),
                  )),
              SizedBox(
                  width: 390,
                  child: Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15)),
                      elevation: 10,
                      child: Column(children: [
                        Container(
                          margin: const EdgeInsets.all(5),
                          padding: const EdgeInsets.only(left: 5),
                          child: TextButton(
                            child: const Text('My Projects',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold)),
                            onPressed: () {},
                          ),
                        ),
                        SizedBox(height: 150, child: ProjectWidget()),
                      ]))),
              SizedBox(
                  width: 390,
                  child: Card(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15)),
                      elevation: 10,
                      child: Column(children: [
                        Container(
                          margin: const EdgeInsets.all(5),
                          padding: const EdgeInsets.only(left: 5),
                          child: TextButton(
                            child: const Text('Current Activities',
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold)),
                            onPressed: () {},
                          ),
                        ),
                        Container(
                            padding: const EdgeInsets.all(5),
                            height: 200,
                            child: ActivitiesWidget()),
                      ]))),
            ])));
      }
    }
    
    showAlertDialog(BuildContext context) {
      Widget logoutButton = TextButton(
          child: const Text('Log Out',
              style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
          onPressed: () => {});
    
      AlertDialog alert = AlertDialog(
        backgroundColor: Colors.white,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8),
            side: const BorderSide(color: Color.fromRGBO(0, 161, 39, 1))),
        content: const Text('Logout successful!',
            style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
        actions: [
          logoutButton,
        ],
      );
    
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return alert;
        },
      );
    }

The function to fetch the data works as it is displaying the data in a list.
[enter image description here][2]

    body: ListView.builder(
          itemCount: _projects.length,
          itemBuilder: (context, index) {
            return Card(
                child: Padding(
              padding: const EdgeInsets.only(
                  top: 32.0, bottom: 32.0, left: 16.0, right: 16.0),
              child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    RichText(
                        text: TextSpan(children: [
                      const TextSpan(
                          text: 'Project Name: ',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)),
                      TextSpan(
                          text: _projects[index].title,
                          style: const TextStyle(color: Colors.black))
                    ])),
                    RichText(
                        text: TextSpan(children: [
                      const TextSpan(
                          text: 'Project Location: ',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)),
                      TextSpan(
                          text: _projects[index].location,
                          style: const TextStyle(color: Colors.black))
                    ])),
                    RichText(
                        text: TextSpan(children: [
                      const TextSpan(
                          text: 'Project Description: ',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)),
                      TextSpan(
                          text: _projects[index].description,
                          style: const TextStyle(color: Colors.black))
                    ])),
                    RichText(
                        text: TextSpan(children: [
                      const TextSpan(
                          text: 'Project Completion Date: ',
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)),
                      TextSpan(
                          text: _projects[index].endDate,
                          style: const TextStyle(color: Colors.black))
                    ])),
                  ]),
            ));

关于为什么它不显示小部件内的内容有什么想法吗？到目前为止没有语法错误。

Answer 1

这是完整的代码，它可以正常工作

只需复制并粘贴我在我的设备中为运行命名（项目 class => 设置屏幕和破折号屏幕有项目代码）

导入 'package:flutter/material.dart';

// ignore: must_be_immutable
class SettingScreen extends StatelessWidget {
  final List _projects = [];

  SettingScreen({
    Key? key,
  }) : super(key: key);

  // Future<List> _fetchProjects() async {
  //   var res = await Network().getData('users/project');
  //
  //   var projects = <Project>[];
  //
  //   if (res.statusCode == 200) {
  //     var body = json.decode(res.body);
  //     var tdata = body['data'];
  //     var projectsJson = tdata;
  //
  //     for (var projectJson in projectsJson) {
  //       projects.add(Project.fromJson(projectJson));
  //     }
  //   }
  //   return projects;
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
            child: Column(children: [
          Container(
            height: 40,
            width: double.infinity,
            color: Colors.transparent,
          ),
          SizedBox(
              width: 390,
              child: Card(
                color: const Color.fromRGBO(0, 161, 39, 1),
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                elevation: 10,
                child: Container(
                    color: const Color.fromRGBO(0, 161, 39, 1),
                    margin: const EdgeInsets.all(10),
                    padding: const EdgeInsets.only(bottom: 30, top: 10),
                    child: Row(children: [
                      Column(
                        children: [
                          Container(
                              padding: const EdgeInsets.only(left: (15)),
                              child: const Text('M & E System',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.bold)))
                        ],
                      ),
                      Expanded(
                        child: Container(
                            padding: const EdgeInsets.only(left: 180),
                            margin: const EdgeInsets.all(6),
                            child: IconButton(
                              icon: const Icon(Icons.settings, color: Colors.white),
                              onPressed: () {},
                            )),
                      )
                    ])),
              )),
          SizedBox(
              width: 390,
              child: Card(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  elevation: 10,
                  child: Column(children: [
                    Container(
                      margin: const EdgeInsets.all(5),
                      padding: const EdgeInsets.only(left: 5),
                      child: TextButton(
                        child: const Text('My Projects',
                            style: TextStyle(
                                color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                        onPressed: () {},
                      ),
                    ),
                    SizedBox(height: 250, child: Dashboard()),
                  ]))),
          SizedBox(
              width: 390,
              child: Card(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  elevation: 10,
                  child: Column(children: [
                    Container(
                      margin: const EdgeInsets.all(5),
                      padding: const EdgeInsets.only(left: 5),
                      child: TextButton(
                        child: const Text('Current Activities',
                            style: TextStyle(
                                color: Colors.black, fontSize: 14, fontWeight: FontWeight.bold)),
                        onPressed: () {},
                      ),
                    ),
                    Container(
                        padding: const EdgeInsets.all(5),
                        height: 200,
                        child: Text("Activity widet()")),
                    // child: ActivitiesWidget()),
                  ]))),
        ])));
  }
}

showAlertDialog(BuildContext context) {
  Widget logoutButton = TextButton(
      child:
          const Text('Log Out', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
      onPressed: () => {});

  AlertDialog alert = AlertDialog(
    backgroundColor: Colors.white,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
        side: const BorderSide(color: Color.fromRGBO(0, 161, 39, 1))),
    content: const Text('Logout successful!',
        style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
    actions: [
      logoutButton,
    ],
  );

  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

class Dashboard extends StatefulWidget {
  const Dashboard({Key? key}) : super(key: key);

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

class _DashboardState extends State<Dashboard> {
  @override
  Widget build(BuildContext context) {
    // _fetchProjects().then((value) {
    //   _projects.addAll(value);
    // });

    return SingleChildScrollView(
      child: Column(children: [
        ListView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          itemCount: 12,
          itemBuilder: (context, index) {
            return Card(
                color: Colors.yellow,
                child: Row(
                  children: [
                    Container(
                        padding: const EdgeInsets.only(left: 10),
                        child: const Icon(Icons.list_alt, size: 12)),
                    Container(
                        padding: const EdgeInsets.only(left: 15),
                        child: Text("_projects[index].title",
                            style: const TextStyle(fontSize: 16, color: Colors.black))),
                    Container(
                      padding: const EdgeInsets.only(left: 15),
                      child: Text("Loader"),
                    ),
                    Container(
                        padding: const EdgeInsets.only(left: 30),
                        child: IconButton(
                          icon: const Icon(Icons.arrow_right, color: Colors.black),
                          onPressed: () {},
                        )),
                  ],
                ));
          },
        )
      ]),
    );
  }
}

滚动完美： steps1：删除灵活 2：用单个子滚动视图包裹 3: 给 physics: NeverScrollableScrollPhysics(), to listview builder

完成......！

从 JSON 数据中获取的标题不会显示在 Flutter 移动应用的卡片内

Title fetched from JSON data won't display inside card in Flutter mobile app

flutter

flutter-layout

flutter-dependencies

flutter-web