How to convert data from uploaded csv to list of model and store it in Firebase Firestore using Flutter Riverpod


Step1: Create Model class like emplyeeModel.dart

import 'dart:convert';

List<Employee> employeeFromJson(String str) =>
    List<Employee>.from(json.decode(str).map((x) => Employee.fromJson(x)));

String employeeToJson(List<Employee> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Employee {

  final String? employeeName;
  final String? employeeNumber;

  factory Employee.fromJson(Map<String, dynamic> json) => Employee(
        employeeName: json["employeeName"],
        employeeNumber: json["employeeNumber"],

  Map<String, dynamic> toJson() => {
        "employeeName": employeeName,
        "employeeNumber": employeeNumber,

  static Map<String, dynamic> employeeToMap(List<dynamic> row) {
    return {
      if (row[0] != null) 'employeName': row[0],
      if (row[1] != null) 'employeeNumber': row[1],

  static Map<int, Map<String, dynamic>> userListToMap(
      List<List<dynamic>> userList) {
    // userList.removeAt(0);
    return userList.map((user) => employeeToMap(user)).toList().asMap();

In this we have to create two Map methods for map ‘Map<int, Map<String, dynamic>>’ type of data.

Step 3: now we have to add two packages in pubspec.yaml file

1. file_picker:<newer version> = this use for pick the csv file.

2. csv:<newer version> = for convert csv file to Map<int, Map<String, dynamic>> list.

and then run “flutter pub get” command in your terminal.

Step 4: now in riverpod ChangeNotifier Provider, we have to add two methods. one for get csv or pick csv file and second method for convert that csv to list.

your codelook something like:

import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:food_demo/models/employee.dart';

class HomeProvider with ChangeNotifier {
  List<Employee> _employees = [];
  List<Employee> get employees => _employees;

  getEmployees(Map<int, Map<String, dynamic>> employeeData) {
    employeeData.forEach((key, value) {
          employeeName: value["employeName"],
          employeeNumber: value["employeeNumber"].toString()));

  Future<FilePickerResult?> uploadCsv() async {
    final result = await FilePicker.platform.pickFiles(
      allowedExtensions: ['csv'],
      allowMultiple: false,
      withData: true,
      type: FileType.custom,
    return result;

Step 5: finally look at UI code…

import 'dart:convert';

import 'package:csv/csv.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:food_demo/models/employee.dart';

import '../providers/provider_register.dart';

class HomePage extends ConsumerStatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  ConsumerState<ConsumerStatefulWidget> createState() => _HomePageState();

class _HomePageState extends ConsumerState<HomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          onPressed: () async {
            final inputFile = await ref.read(homeProvider).uploadCsv();
            final bytes = utf8.decode((inputFile!.files.first.bytes)!.toList());
            final tmp = CsvToListConverter().convert(bytes);

                "i m provider call ${ref.watch(homeProvider).employees[0].employeeName}");
          child: const Text("Upload Bulk Employee"),


Are you looking to learn a programming language but feeling overwhelmed by the complexity? Our programming language guide provides an easy-to-understand, step-by-step approach to mastering programming.

Leave a Reply

Your email address will not be published. Required fields are marked *