Copy values from a spreadsheet to multiple textFields in flutter

user_2765900 0
Viewed 157

EDIT: Let me clarify more the point I am struggling to achieve as it seems not to be clear. I already built a table with TextFields as you see in my code, and I tried the excel package and I tried several other packages, however nothing allows me to COPY the input from an external spreadsheet to my web app directly. The user will eventually have to manually type all the digital sample values one by one or they have to upload an external excel sheet to the site. These samples can be as big as several thousand samples in some cases, the only option is to copy them from their original spreadsheet or text source to the web app.

In my flutter web app, I want to get input from the users: they input time samples of any digital signal into a series of TextFields then the site will plot these samples and do some processing on them etc.. The problem is that digital signals are usually long and users will want to copy them from other text files or spreadsheets rather than manually typing them one by one in the browser. Below is part of the code I used so far

class InputData extends StatefulWidget {

  @override
  State<InputData> createState() => _InputDataState();
}

class _InputDataState extends State<InputData> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child:Scaffold(
        body: Column(
          children: <Widget>[
            TitleBanner(),
            Expanded(
              child: Row(
                children: [
                  Container(
                      height: 40,
                      width: 100,
                      child: Text('Sample Interval')),
                  Container(
                      height: 40,
                      width: 100,
                      child: TextField())
                ],
              ),
            ),
            SizedBox(height: 100,),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.fromLTRB(8.0,0,0,0),
                child: Row(
                  children: <Widget>[
                    Column(
                        children: <Widget>[
                          Container(
                              decoration: BoxDecoration(border: Border.all() ),
                              height: 20,
                              width: 100,
                              child: Text('Samples')),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),

                        ]

                    ),
                    Column(
                        children: <Widget>[
                          Container(
                              decoration: BoxDecoration(border: Border.all() ),
                              height: 20,
                              width: 100,
                              child: Text('Amplitudes')),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                          buildTextField(),
                        ]
                    )


                  ],
                ),
              ),
            )

          ],
        ),
      )

    );
  }

  Container buildTextField() {
    return Container(
                          decoration: BoxDecoration(border: Border.all() ),
                          height: 20,
                          width: 100,
                          child: TextField(keyboardType: TextInputType.number,
                            decoration: kTextFieldDecoration
                          ),);
  }
}

This way the user can input the samples and amplitudes manually but they cannot copy them from another source. I tried using the excel package in flutter, but it seems to allow us to use a full excel spreadsheet and export it rather than integrating the cells inside the browser. I tried also some other packages like sticky_headers but they seem to do good formatting only, without allowing a copy from external spreadsheet.

Is there a way to directly paste the values using this implementation?

data-science flutter-web flutter signal-processing excel
3 Answers

If you don't need the pasted values to be editable the simplest solution would be to parse the input from a single TextField. Probably with a package like csv.

If you need a grid of input fields the solution gets more tricky. You need to listen to changes to each TextField, parse the data, and spread multicell input to the rest of the grid.

Each TextField will need a controller to set the text programmatically. They will also need an inputFormatter to make sure the receiving field only contains the content from one cell. You can use the formatter or a separate onChanged listener to parse the input and update the text for other cells in the grid.

I took the time to create a PoC of the grid solution here.

user_46007060

If I understood you correctly, then you want to insert a default value into the TextField, you can do this with the following code:

Widget buildTextField(String initText) {
    return Container(
      decoration: BoxDecoration(border: Border.all()),
      height: 20,
      width: 100,
      child: TextField(
          controller: TextEditingController(text: initText),
          keyboardType: TextInputType.number,
          decoration: kTextFieldDecoration
          ),
    );
  }
user_181957870

You need to use the Table widget, and inside its children use a TextField. I will give you the links I found and below I will paste the code from one of them:

import 'package:flutter/material.dart';
     
    void main() {
      runApp(MyApp());
    }
 
class MyApp extends StatelessWidget {
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Table',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
      ),
      body: Column(
        children:<Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("Table",textScaleFactor: 2,style: TextStyle(fontWeight:FontWeight.bold),),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Table(
               
            // textDirection: TextDirection.rtl,
            // defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
            // border:TableBorder.all(width: 2.0,color: Colors.red),
            children: [
              TableRow(
                children: [
                  Text("Education",textScaleFactor: 1.5,),
                  Text("Institution name",textScaleFactor: 1.5),
                  Text("University",textScaleFactor: 1.5),
                ]
              ),
               TableRow(
                children: [
                  Text("B.Tech",textScaleFactor: 1.5),
                  Text("ABESEC",textScaleFactor: 1.5),
                  Text("AKTU",textScaleFactor: 1.5),
                ]
              ),
              TableRow(
                children: [
                  Text("12th",textScaleFactor: 1.5),
                  Text("Delhi Public School",textScaleFactor: 1.5),
                  Text("CBSE",textScaleFactor: 1.5),
                ]
              ),
              TableRow(
                children: [
                  Text("High School",textScaleFactor: 1.5),
                  Text("SFS",textScaleFactor: 1.5),
                  Text("ICSE",textScaleFactor: 1.5),
                ]
              ),
            ],
        ),
          ),
        ]
      ),
    );
  }
}

Table Widget in Flutter

How to manage textField controller for multiple dataRow in dataTable Flutter

It is also possible to use Excel:

Excel Pub Dev Package

Create an Excel Document in Flutter Youtube Guide

If I helped you, please don't forget to mark my answer as correct (tick).

user_181957870
Related