CODEWITHSUNDEEP
flutterdartflutter-layout
Deepjyot Singh Kapoor
Deepjyot Singh Kapoor

Reputation: 103

How to place the Widget beside listview builder item in flutter?

I want to paste the filename beside the listview builder?? That is if clicked on upload Licence then the filename of licence should be beside it and the same for adhar card?


class DriverDocumentAvailableListScreen extends StatefulWidget {
  final DriverDocumentAvailableListEntity listEntity;

  DriverDocumentAvailableListScreen({@required this.listEntity});

  @override
  _DriverDocumentAvailableListScreenState createState() =>
      _DriverDocumentAvailableListScreenState();
}

class _DriverDocumentAvailableListScreenState
    extends State<DriverDocumentAvailableListScreen> {
  List<File> files;
  // File file;

  List<Future<FilePickerResult>> filePickerResults;
  // Future<FilePickerResult> filePickerResult;

  List<Widget> list_widget;

  @override
  Widget build(BuildContext context) {
    var arr = widget.listEntity.driverDocumentAvailableList;
    int size = arr.length;
    initAllList(size);

    return ListView.builder(
      itemBuilder: (context, index) {
        return Row(
          children: [
            OutlineButton(
              child: Text('Upload ${arr[index].title}'),
              onPressed: () {
                setState(() {
                  pickDocument(index);
                });
              },
            ),
            SizedBox(
              width: 20,
            ),
            selectDocumentAtIndex(index),
            list_widget[index]
          ],
        );
      },
      itemCount: size,
    );
  }

  void pickDocument(int index) {
    setState(() {
      filePickerResults[index] = FilePicker.platform
          .pickFiles(type: FileType.custom, allowedExtensions: ['pdf']);
    });
  }

  void initAllList(int size) {
    list_widget = List<Widget>(size);
    files = List<File>(size);
    filePickerResults = List<Future<FilePickerResult>>(size);
    for (int i = 0; i < size; i++) {
      list_widget[i] = Container(
        color: Colors.white,
      );
    }
  }

  Widget selectDocumentAtIndex(int index) {
    list_widget[index] = FutureBuilder<FilePickerResult>(
        future: filePickerResults[index],
        builder:
            (BuildContext context, AsyncSnapshot<FilePickerResult> snapshot) {
          if (snapshot.connectionState == ConnectionState.done &&
              null != snapshot.data) {
            files[index] = File(snapshot.data.files.single.path);
            print('In if and index is ${index}-->${files[index]}');
            return Container(
              width: 50,
              height: 50,
              child: Text('${files[index].path}'),
            );
          } else if (null != snapshot.error) {
            return const Text(
              'Error Picking Image',
              textAlign: TextAlign.center,
            );
          } else {
            print('In elsee.nonono');
            return const Text('No Document Selected');
          }
        });
    return Container();
  }
}

The types of documents[Licence, Adhar Card...] comes from Api and with list builder I am able to display it and create a list of buttons[with text as the type of document], I want to place the filename beside the button I clicked. Simply, placing a new widget beside a list view item(after clicking that item).

Sample UI

Upvotes: 0

Views: 195

Answers (1)

RobHG
RobHG

Reputation: 115

You could rebuild the view after the documents are submitted, Which will allow you to show which document's name has been uploaded after tapping in upload a document. Use a variable to store the name of the document and replace "No Document selected" with the proper name of the document.

Upvotes: 1

Related Questions