Flutter - 在同一屏幕上的小部件之间传递数据

Question

I have one screen split into 2 halves. Top half has a listview and the bottom will display the details based on the onTap: from the listTile within the listview above.

My code looks something like this, after removing all irrelevant pieces:

return Scaffold(
  appBar: AppBar(
    ...
    // app bar details
      ...
    ), // AppBar

body: SingleChildScrollView (
        child: Column(
            children: <Widget>[ 
             ...
             Container(
                ...
                child: populatelistview();
                ), 

             SizedBox(height: ...),
              ...
              ...
             Container(
                ...
                child: detailsView();
                ),
             ... 
            ],
          ), // Column
     ) // SingleChildScrollView

So, in order to get the detailsView populated with data based on onTap() from listview, I will have to pass some variable (or some id), from the listview to detailsView.

I have used Navigator.push before (refer: https://flutter.dev/docs/cookbook/navigation/passing-data ), but that would work only when moving from one screen to another. I am having trouble sending data from listview to detailsView, on the same screen.

Maybe I am looking at it differently or just unable to search properly.

Would appreciate if someone could point me in the right direction.

If this question is already answered before, then I apologize for the same - please do mark it as duplicate and point me to the correct discussion.

Thanks in advance.

Stay Safe!!

Answer 1

I would suggest you to use provider state management this will be easy to implement, your both view will have the some ChangeNotifier,Here some snippest that may helps you:

---

populatelistview:

 GestureDetector( onTap: (){ notifier.setId(id); }, child:// your child

---

detailsView:

class Notifier extends ChangeNotifier {

int id;

void setId(int id){
  this.id = id;
  notifyListeners();// Here the magic happens
}

---

Change notifier

class Notifier extends ChangeNotifier { int id; void setId(int id){ this.id = id; notifyListeners();// Here the magic happens }

Answer 2

You can pass information like this. Use a variable within your class to store the information of the clicked item.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _item;

  @override
  void initState() {
    super.initState();
    _item = null;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text('Item $i'),
                    onTap: () => setState(() => _item = i),
                  );
                }),
          ),
          Container(height: 2, color: Colors.grey),
          Expanded(
            child: Container(
              color: Colors.grey[100],
              child: Center(
                child: Text(_item == null
                    ? 'Select an item'
                    : 'Item $_item was selected',),
              ),
            ),
          ),
        ]);
  }
}

Hope this helps!

Answer 3

If this is a stateful widget, then try using setState()

See sample code below:

class Test extends State<StatusPage> {
String text = 'Hello';

  @override
  Widget build(BuildContext context) {

    Widget details = Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Text(text),
      ],
    );

    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListView.builder(
              itemCount: 4,
              shrinkWrap: true,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item #$index'),
                  onTap: () {
                    setState(() {
                      text == 'Hello' ? text = 'Test' : text = 'Hello';
                    });
                  },
                );
              },
            ),
            SizedBox(height: 54),
            details,
          ],
        ), // Column
      ),
    );
  }


}

Answer 4

Thanks to everyone who tried helping me out. However, I have now resolved this issue by using Inherited Widget.

Inherited Widget was more suitable for my situation where I needed data to flow from one widget to another without change of screen.