Working with Spreadsheets in Flutter: Part 2

Deep dive into spreadsheets in flutter

Introduction

Hello friends today we will be Moving foward with our excel tutorial, today we will be learning how to read and display data from an existing excel file.

This is a part 2 to a series of writeup on working with excel in flutter. If you haven’t read the Part 1 I suggest you do, so you dont get lost.

Shall we begin

As we did in the previous session, I believe we have added excel package and Imported it to our main.dart file

loading an existing document from storage

To load an existing file from storage we need the help of file_picker plugin

file_picker: ^2.1.6

You might need to stop and rerun your application so you don’t get methodChannel Exception.

1. declare a field called selectedExcel;

2. Paste the following code into your app dont worry about the getList() we will create it in a minute you can comment it out for now

here we pick an excel document and assign in to the variable “selectedExcel” that we create earlier

3. Create a FlatButton in your app and make onPressed call the pickFile() method

FlatButton(
     color: Colors.blue,
     onPressed: pickFile,
  child: Text(
     "Pick from storage",
      style: TextStyle(color: Colors.white),
))

4. Prepare an excel document. for this tutorial this is the document I’ll be using

It contains First name, Last name and profession. you can format your excel document how ever you please.

5. click on the flat button you created earlier, grant permission and select your desired excel file.

6. If you have no errors then you have successfully picked your excel file from storage.

Reading data from an excel file

This is where we create the getList() method we talked about earlier.

Remember in our last session we said excel files can have many sheets and by default the first sheet is called “Sheet1”.

Here we loop through the first sheet inside the excel that we selected and print out its values to console.

If you did everything right then your console should display your data like this

Congratulations you have successfully read data from your excel file. As you can see each row is a List.

Passing the rows into a List

All we have to do now is to create a list of rows, don’t forget that each row is also a list

1. Create a List variable called “tbleRows”
2. Uncomment the “tbleRows.add(row)” inside the getList() method

If you followed through with the above steps you should have a list containing all the rows on your selectedExcel file

Creating a card to display the data from your list

Column(
  children: [
    Expanded(
      child: ListView.builder(
           padding: EdgeInsets.all(0),
           physics: BouncingScrollPhysics(),
           itemCount: tbleRows.length,
           itemBuilder: (BuildContext context, int index) {
                   return ListTile(
                        title:
                Text("${tbleRows[index][0]} ${tbleRows[index][1]}"),
                       subtitle: Text(tbleRows[index][2]),
                          );
                  }),
          ),
        ],
   ) 

Incase you are confused about “tbleRows[index][0]”: tbleRows is a List of List; where each nested list (Inner List) is a row in the excel file;

I hope I haven't lost you?

And there you go, we have successfully fetch and displayed the content of our Excel file.

We will be stopping here for this session, Next session which is the final part we will be Updating and deleting data in an excel file and finally saving to storage.

Let me know what you think in the comment section and don’t forget to give a clap if you learnt a thing or two.