How to pass data between Widgets

Question

I've the below code where I fetch correctly data from url, display it in DataTable, and get the idext of the tapped row.

I need to use this index and display the related information on the back of the widget, I cam across TweenAnimationBuilder but not sure how to send data between the 2 faces, or if there is another way to do what I'm looking for:

import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'dart:async';
import 'package:csv/csv.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);
  final String title;

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

Future<List<List<dynamic>>> fetchUserData() async {
  final request = await HttpClient().getUrl(Uri.parse(
      'https://docs.google.com/spreadsheets/d/e/2PACX-1vQvf9tp4-fETDJbC-HRmRKvVFAXEAGO4lrYPpVeiYkB6nqqXdSs3CjX0eBMvjIoEeX9_qU6K2RWmzVk/pub?gid=0&single=true&output=csv'));
  final response = await request.close();
  List<List<dynamic>> rowsAsListOfValues;
  await for (final csvString in response.transform(const Utf8Decoder())) {
    rowsAsListOfValues = const CsvToListConverter().convert(csvString);
  }
  return rowsAsListOfValues;
}

class _AppState extends State<HomePage> {
  List<List<dynamic>> rowsAsListOfValues;
  // ScrollController _controller;

  @override
  void didChangeDependencies() async {
    super.didChangeDependencies();
    rowsAsListOfValues = await fetchUserData();
    super.setState(() {}); // to update widget data
  }

  @override
  void initState() {
    super.initState();
   // _controller = ScrollController();
   // _controller = new ScrollController()..addListener(_scrollListener);
  }
/*
  void _scrollListener() {
    if (_controller.position.extentAfter <= 0.0 &&
        _controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
      print("call fetch method again");
    }
  } */

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            rowsAsListOfValues == null
                ? Text("Loading data...")
                : Text(
              '', // $rowsAsListOfValues
            ),
            rowsAsListOfValues == null
                ? CircularProgressIndicator()
                : DataTable(
                showCheckboxColumn: false, // <-- this is important
                columns: const <DataColumn>[
                  DataColumn(
                    label: Text(
                      'City',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                  DataColumn(
                    label: Text(
                      'Branches',
                      style: TextStyle(fontStyle: FontStyle.italic),
                    ),
                  ),
                ],
                rows: List.generate(rowsAsListOfValues.length - 1, (index) {
                  return DataRow(
                    onSelectChanged: (bool selected) {
                      if (selected) {
                        print('index-selected: ${rowsAsListOfValues[index + 1][0]}');
                      }
                    },
                    cells: <DataCell>[
                      // DataCell(Text('${rowsAsListOfValues[index + 1][0]}')), // Index
                      DataCell(Text('${rowsAsListOfValues[index + 1][1]}')),  // city
                      DataCell(Text('${rowsAsListOfValues[index + 1][2]}')),  // branch
                    ],
                  );
                }),
            ),
          ],
        ),
      ),
    );
  }
}

Zakir · Accepted Answer · 2020-10-17 08:32:01Z

1

May be you can use this https://pub.dev/packages/flippable_box flutter plugin which gives you options to define different view for front and back. You can use _isFlipped variable to maintain which side you want to display.

FlippableBox(
    front: Data table for front view,
    back: Display selected row,
    isFlipped: _isFlipped,
)

answered Oct 17, 2020 at 8:32

Zakir

1,6051 gold badge13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to pass data between Widgets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related