如何将 CSV 文件加载到 flutter 应用程序中？

Question

我正在尝试将 csv 文件加载到我的 flutter 应用程序中，作为我可以在该应用程序上滚动浏览的列表。 这将是我的应用程序的第三页，所以请在代码的早期注意导航器。

import 'package:flutter/material.dart';
import 'package:demo_2/signin.dart';
import 'dart:async' show Future;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter/widgets.dart';
import 'package:demo_2/therapist.dart';
import 'package:csv/csv.dart';

class ThirdScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Resources"),
      ),
      body: Center(
        child: FlatButton(
          color: Colors.blueAccent,
          hoverColor: Colors.green,
          onPressed: () {
            // Navigate back to first screen when tapped.
            Navigator.pop(context);
          },
          child: Text(
            'Go back!',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    );
  }
}

class TableLayout extends StatefulWidget {
  @override
  _TableLayoutState createState() => _TableLayoutState();
}

class _TableLayoutState extends State<TableLayout> {
  List<List<dynamic>> data = [];
  loadAsset() async {
    final myData = await rootBundle.loadString("assets/Austin.csv");
    List<List<dynamic>> csvTable = const CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: () async {
            await loadAsset();
            //print(data);
          }),
      appBar: AppBar(
        title: Text("Table Layout and CSV"),
      ),
      body: SingleChildScrollView(
        child: Table(
          columnWidths: {
            0: FixedColumnWidth(100.0),
            1: FixedColumnWidth(200.0),
          },
          border: TableBorder.all(width: 1.0),
          children: data.map((item) {
            return TableRow(
                children: item.map((row) {
              return Container(
                color:
                    row.toString().contains("NA") ? Colors.red : Colors.green,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    row.toString(),
                    style: TextStyle(fontSize: 20.0),
                  ),
                ),
              );
            }).toList());
          }).toList(),
        ),
      ),
    );
  }
}

在我的 pubspec.yaml 文件中，我有以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  csv: ^4.1.0

对于我在 pubspec.yaml 中的资产，我有以下内容：

assets:
    - assets/Austin.csv

这是 CSV 的前几行，我想显示标题为“Austin.csv”并位于我的 /assets 文件夹中：

Names,Provider Type,Location,Phone Number,Financial,Accepted Insurance Plans,Issues,Specialties,Mental Health Areas,Sexualities,Faiths,Ages Treated,Communities,Treatments
Donna Rich,"Clinical Social Work/Therapist , LCSW","1007 Mopac Circle Suite 201 Austin, TX 78746",(512) 649-0079,"['Cost per Session:$150', 'Sliding Scale:Yes', 'Out of Network']",['Out of Network'],"['Chronic Pain', 'Codependency', 'Coping Skills', 'Divorce', 'Grief', 'Hoarding', 'Parenting', 'Peer Relationships', 'School Issues', 'Self Esteem', 'Sleep or Insomnia', 'Substance Use']","['Depression', 'Anxiety', 'Relationship Issues']",[],"['Bisexual', 'Lesbian', 'Gay']",[],"['Adults', 'Adolescents / Teenagers (14 to 19)', 'Children (6 to 10)']",[],"['Family / Marital', 'Play Therapy', 'Psychodynamic']"
Greg Keilin,"Psychologist , PhD","3355 Bee Caves Road Suite 104 Austin, TX 78746",(512) 201-2569,"['Cost per Session:$175', 'Sliding Scale:Yes', 'Out of Network']","['Out of Network', 'Out of Network']","['Anxiety', 'Bipolar Disorder', 'Codependency', 'Coping Skills', 'Divorce', 'Emotional Disturbance', 'Family Conflict', 'Grief', 'Infidelity', 'Internet Addiction', 'Life Coaching', 'Life Transitions', 'Marital and Premarital', ""Men's Issues"", 'Peer Relationships', 'Sex Therapy', 'Sexual Abuse', 'Sexuality, diversity, prof. training', 'Sleep or Insomnia', 'Stress', 'Suicidal Ideation', 'Trauma and PTSD', ""Women's Issues""]","['Depression', 'Self Esteem', 'Relationship Issues']","['Mood Disorders', 'Personality Disorders', 'Thinking Disorders']","['Bisexual', 'Lesbian', 'Gay']",[],"['Elders (65+)', 'Adults']","['Bisexual Allied', 'Gay Allied', 'Lesbian Allied']","['Clinical Supervision and Licensed Supervisors -', 'Cognitive Behavioral (CBT)', 'Culturally Sensitive', 'EMDR', 'Eclectic', 'Family / Marital', 'Family Systems', 'Feminist', 'Integrative', 'Interpersonal', 'Mindfulness-Based (MBCT)', 'Multicultural', 'Positive Psychology', 'Psychodynamic', 'Relational', 'Strength-Based', 'Therapeutic Use of Self', 'Trauma Focused']"
Spectrum Services,"Psychologist , PhD , LPC , LCSW , LMFT","Spectrum Services 8105 Shoal Creek Blvd, Ste B Austin, TX 78757 Call Spectrum Services",(512) 271-4877,"['Cost per Session:$60 - $150', 'Sliding Scale:Yes']",[],"['Anger Management', 'Autism', 'Behavioral Issues', 'Bipolar Disorder', 'Career Counseling', 'Child or Adolescent', 'Chronic Impulsivity', 'Coping Skills', 'Depression', 'Developmental Disorders', 'Divorce', 'Emotional Disturbance', 'Family Conflict', 'Intellectual Disability', 'Learning Disabilities', 'Life Coaching', 'Obsessive-Compulsive (OCD)', 'Parenting', 'Peer Relationships', 'Relationship Issues', 'School Issues', 'Self Esteem', 'Self-Harming', 'Sleep or Insomnia', 'Transgender']","[""Asperger's Syndrome"", 'Anxiety', 'ADHD']","['Impulse Control Disorders', 'Mood Disorders', 'Thinking Disorders']","['Bisexual', 'Lesbian', 'Gay']",[],"['Elders (65+)', 'Adults', 'Adolescents / Teenagers (14 to 19)', 'Preteens / Tweens (11 to 13)', 'Children (6 to 10)', 'Toddlers / Preschoolers (0 to 6)']","['Bisexual Allied', 'Cancer', 'Gay Allied', 'Lesbian Allied', 'Transgender Allied']","['Coaching', 'Cognitive Behavioral (CBT)', 'Family / Marital', 'Family Systems', 'Mindfulness-Based (MBCT)', 'Psychological Testing and Evaluation', 'Solution Focused Brief (SFBT)']"
Topaz ABA,"MA , BCBA , LBA","Topaz ABA Austin, TX 78746 Call Katie Worrell",(512) 488-3767,"['Aetna', 'Anthem', 'BlueCross and BlueShield', 'Cigna', 'Magellan', 'Out of Network']","['Aetna', 'Anthem', 'BlueCross and BlueShield', 'Cigna', 'Magellan', 'Out of Network']","['ADHD', 'Child or Adolescent', 'Coping Skills', 'Developmental Disorders', 'Dual Diagnosis', 'Intellectual Disability', 'Learning Disabilities', 'Oppositional Defiance', 'Peer Relationships']","['Autism', 'Behavioral Issues', ""Asperger's Syndrome""]",[],[],[],"['Adolescents / Teenagers (14 to 19)', 'Preteens / Tweens (11 to 13)', 'Children (6 to 10)', 'Toddlers / Preschoolers (0 to 6)']",[],"['Applied Behavioral Analysis', 'Intervention', 'Play Therapy']"
Kim Wolfgang,"Licensed Professional Counselor , MS , LPC","K Wolfgang Counseling 4422 Packsaddle Pass Suite 103 Austin, TX 78745",(512) 649-1224,"['Cost per Session:$140+', 'Out of Network']","['Out of Network', 'Out of Network']","['Family Conflict', 'HAES (Health at Every Size) and body image concern', 'Relationship Issues']","['Eating Disorders', ""Women's Issues"", 'Anxiety']",[],[],[],['Adults'],"['Cancer', 'Queer Allied']","['Eclectic', 'Family Systems', 'Mindfulness-Based (MBCT)', 'Relational']"

理想的列表应包含姓名、电话号码、财务信息和列表中可以滚动浏览的问题。 如果您需要我的 main.dart 文件，我可以编辑帖子并将其包含在内。

Answer 1

使用“ DataTable ”小部件显示数据的行和列。 请参阅 Flutter 文档和“本周小部件”视频https://api.flutter.dev/flutter/material/DataTable-class.html

如果您有大量数据， Flutter文档还建议使用 PaginatedDataTable。

Answer 2

这就是我所做的。 我无法立即使用 DataTable 小部件，尽管我可能会尝试重新格式化演示，所以我不得不使用 csv package。我更新的代码

import 'package:flutter/material.dart';
import 'package:demo_2/opening_page.dart';
import 'dart:async' show Future;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flutter/widgets.dart';
import 'package:demo_2/virtual_therapist.dart';
import 'package:csv/csv.dart';

class ThirdScreen extends StatefulWidget {
  @override
  _ThirdScreenState createState() => _ThirdScreenState();
}

class _ThirdScreenState extends State<ThirdScreen> {
  List<List<dynamic>> data = [];
  Future<List<String>> loadAsset() async {
    final myData = await rootBundle.loadString("assets/test_austin.csv");
    List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);
    print(csvTable);
    data = csvTable;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          onPressed: () async {
            await loadAsset();
            //print(data);
          }),
      appBar: AppBar(
        title: Text("Resources"),
      ),
      body: SingleChildScrollView(
        child: Table(
          columnWidths: {
            0: FixedColumnWidth(110.0),
            1: FixedColumnWidth(125.0),
            2: FixedColumnWidth(165.0)
          },
          border: TableBorder.all(width: 1.0),
          children: data.map((item) {
            return TableRow(
                children: item.map((row) {
              return Container(
                  child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  row.toString(),
                  style: TextStyle(fontSize: 20.0, fontFamily: 'Netflix'),
                ),
              ));
            }).toList());
          }).toList(),
        ),
      ),
    );
  }
}

我仍然不了解有状态与无状态的东西，因为我是新手，但这对我有用。 我的家属只是 csv：^4.1.0