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 {
  Employee({
    this.employeeName,
    this.employeeNumber,
  });

  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) {
      _employees.add(Employee(
          employeeName: value["employeName"],
          employeeNumber: value["employeeNumber"].toString()));
      notifyListeners();
    });
  }

  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);

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends ConsumerState<HomePage> {
  @override
  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);

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

Post a Comment

Previous Post Next Post