استخراج بيانات list في ملف csv وحفظه في الهاتف باستخدام تقنية flutter

استخراج بيانات list في ملف csv وحفظه في الهاتف باستخدام تقنية flutter

في هذا المقال سوف نشرح لكم كيف تقوم بعمل list وتستخرج منها البيانات في شكل csv في Flutter بشكل بسيط وعن طريق ضغطة زر كما هو موضحبالصورة الخاصه بالمقاله الموجوده بالاعلى يمكنك تنفيذ هذا من خلال مكتبة بسيطة جدا نقدمها لكم في هذه المقاله الامر بسيط جدا وكل ما سوف يتم انه من خلال نقرة زر سوف يتم تنفيذ استخراج للملف المراد بكل سهوله حيث ان الكود سهل التعامل وسهل الاستخدام كما سوف نلاحظ بعد قليل في الجزء التالي .

add package:

to_csv: ^1.1.1

How to save file csv in your device by Flutter

بعد تثبيت المكتبة بشكل صحيح سوف تلاحظ وجود list قمنا بعملها لتوضيح الفكرة المراده وبعدها قمنا بعمل header في الاعلى لتوضيح بيانات ال list وبعدها تصميم خط للعرض وكل هذا لعرض البيانات وعند الاستخراج تم استخدام المكتبة كما هو موضح لتنفيذ عملية الاستخراج بدون مشاكل .

save.dart

import 'package:flutter/material.dart';
import 'package:to_csv/to_csv.dart' as exportCSV;

class MyMobileBody extends StatefulWidget {
  const MyMobileBody({Key? key}) : super(key: key);

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  List<String> topHeader = [];
  List<List<String>> listOfLists = [];
  List<String> data1 = [
    '1',
    'Bilal Saeed',
    '1374934',
    '912839812'
  ]; //Inner list which contains Data i.e Row
  List<String> data2 = [
    '2',
    'Ahmar',
    '21341234',
    '192834821'
  ];

  List<String> data3 = [
    '3',
    'geecoders',
    '+2010000000',
    '42018033'
  ];//Inner list which contains Data i.e Row

  @override
  void initState() {
    getTopHeader();
    super.initState();
  }

  void getTopHeader() {
    topHeader.add('No.');
    topHeader.add('User Name');
    topHeader.add('Mobile');
    topHeader.add('ID Number');

    listOfLists.add(data1);
    listOfLists.add(data2);
    listOfLists.add(data3);
  }


  Widget HeaderRow() {
    return Padding(
      padding: const EdgeInsets.only(left:17,top:12.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text(topHeader[0], style: const TextStyle(
            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
          Text(topHeader[1], style: const TextStyle(
            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
          Text(topHeader[2], style: const TextStyle(
            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
          Text(topHeader[3], style: const TextStyle(
            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),

        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              HeaderRow(),
              Divider(),
              Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                child: ListView(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top:12.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(data1[0], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data1[1], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data1[2], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data1[3], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),

                        ],
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top:12.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(data2[0], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data2[1], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data2[2], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data2[3], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),

                        ],
                      ),
                    ),

                    Padding(
                      padding: const EdgeInsets.only(top:12.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          Text(data3[0], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data3[1], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data3[2], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),
                          Text(data3[3], style: const TextStyle(
                            fontSize: 14, color: Colors.black87, fontWeight: FontWeight.bold,),),

                        ],
                      ),
                    ),


                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Container(
            width: 130,
            decoration: BoxDecoration(
                color: Colors.blue, borderRadius: BorderRadius.circular(12)),
            child: TextButton(
              child: const Text(
                'Export CV',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
              ),
              onPressed: () {
                exportCSV.myCSV(topHeader, listOfLists);
              },
            ),
          )), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}