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"),
),
),
);
}
}
