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?

CodePudding user response：

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

CodePudding user response：

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