mongoose db flutter

서버가 nodejs이고, mongoose를 이용해서 데이터를 저장할 때, flutter에서 table 형태로 db를 보고싶다면 어떻게 해야할까?

 

서버에서 json형태로 db를 전송하고, flutter에서 json형태로 받은 db를 테이블로 보여주면 된다!

 

json형태로 전송하는 부분 - node js 서버 :

app.get('/api/uploaded_data', function (req, res) {
    try {
        attractionModel.find({ complete: 'O' }, function (err, data) {
            res.send({ 'data': data });
        })
    } catch (err) {
        res.status(500).send(err);

    }
});

 

flutter 프론트엔드 :

json을 table로 바꿔 줄 때는 Jsontable을 사용했다.

 

class UploadListScreen extends StatelessWidget {
  const UploadListScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 20),
            UploadedListTable(),
          ]),
    ));
  }
}

class UploadedListTable extends StatelessWidget {
  UploadedListTable({Key? key}) : super(key: key);
  late UploadedlistModel uploadlistModel;
  late AttractionModel attmodel;

  @override
  Widget build(BuildContext context) {
    uploadlistModel = Provider.of<UploadedlistModel>(context);
    attmodel = Provider.of<AttractionModel>(context);

    return Container(
        child: JsonTable(
      uploadlistModel.json,
      showColumnToggle: true,
      paginationRowCount: uploadlistModel.pagenum,
      onRowSelect: (index, map) {
        attmodel.setKey(map['key']);
        attmodel.setName(map['name']);
        attmodel.setUploadDate(map['upload_date']);
        Navigator.of(context).pushNamed('/modify');
      },
      columns: [
        JsonTableColumn("complete", label: "완료여부"),
        JsonTableColumn("key", label: "키번호"),
        JsonTableColumn("name", label: "명칭"),
        JsonTableColumn("road", label: "주소"),
      ],
      tableHeaderBuilder: (header) {
        return Container(
          padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
          decoration: BoxDecoration(
              border: Border.all(width: 0.5), color: Colors.grey[300]),
          child: Text(
            header!,
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 13,
              fontWeight: FontWeight.w500,
            ),
          ),
        );
      },
      tableCellBuilder: (value) {
        return Container(
            height: 25,
            padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0),
            decoration: BoxDecoration(
                border: Border.all(
                    width: 0.5, color: Colors.grey.withOpacity(0.5))),
            child: Text(
              value.toString(),
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 13,
              ),
            ));
      },
    ));
  }
}