Flutter - How to pass data between pages in PageView Widget?

Question

I have a PageView widget like below:

Widget buildPageView() {
    return PageView(
      controller: pageController,

      onPageChanged: (index) {
        pageChanged(index);
      },

      children: <Widget>[
        AddPropertyDescription(pageController: pageController,),
        AddPropertyMedia(pageController: pageController),
        AddPropertyLocation(pageController: pageController),
        AddPropertyDetails(pageController: pageController),
        AddPropertyAmenities(pageController: pageController)
      ],
    );
  }

I have five pages as a Widget in my PageView, now I want to pass data from one page to another till the last page when page changed.....

I have taken the Next button in each Page, In the Next button onTap() I simply increase the page number to slide to next page like below

 onTap: () async{
                  pageController.animateToPage(
                    1,
                    duration: Duration(milliseconds: 300),
                    curve: Curves.linear,
                  );
              },

When pressing the next button and go to the next screen I want to carry data and pass it to the next page.

Is there anyone here who could have faced the same problem in flutter.....

Please guide me on how can I achieve this.......

score 9 · Accepted Answer · edited May 25 '23 at 05:48

The Page widget can get data, and a callback for passing data, I'll explain what I mean.

The buildPageView should pass to the widgets the extra parameters:


int data = 0;

void onDataChange(int newData) {
  setState(() => data = newData);
}

Widget buildPageView() {
    return PageView(
      controller: pageController,

      onPageChanged: (index) {
        pageChanged(index);
      },

      children: <Widget>[
        AddPropertyDescription(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyMedia(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyLocation(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyDetails(pageController: pageController, data: data, onDataChange: onDataChange),
        AddPropertyAmenities(pageController: pageController, data: data, onDataChange: onDataChange)
      ],
    );
  }

And the widget itself should accept the parameters:

class MyWidget extends StatelessWidget {
  const MyWidget({
    @required this.data,
    @required this.onDataChange,
    Key key,
  }) : super(key: key);

  final int data;
  final Function(int) onDataChange;
  
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: () => onDataChange(data + 1),
      child: Text(data.toString()),
    );
  }
}

final Function(var) onDataChange; This statement give me this error => Function type paramter can't specify 'const', 'final' or 'var' in place of return type. — Himanshu, Jan 07 '20 at 08:46
Could you please explain what MyWidget is? Is it the Widget from the PageVIew oder the Widget within the Pageview? I'm a little confused since it doesn't have the pagecontroller. Do you have a complete example? — desmeit, May 27 '21 at 07:43
@ZviKarp Answers are not useful when they leave readers guessing where classes belong — Ojonugwa Jude Ochalifu, May 25 '23 at 05:51

score 0 · Answer 2 · answered May 25 '23 at 10:13

I want to say your case is really fit for Provider.

Below is a simple demo with PageView and Provider, you can copy and test:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ProviderPageViewDemoPage extends StatefulWidget {
  const ProviderPageViewDemoPage({Key? key}) : super(key: key);

  @override
  State<ProviderPageViewDemoPage> createState() =>
      _ProviderPageViewDemoPageState();
}

class _ProviderPageViewDemoPageState extends State<ProviderPageViewDemoPage> {
  final _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageView with Provider')),
      body: ChangeNotifierProvider(
        create: (BuildContext context) => _DataModel(),
        child: PageView(
          controller: _pageController,
          children: const [
            _MyWidget(backgroundColor: Colors.red),
            _MyWidget(backgroundColor: Colors.green),
          ],
        ),
      ),
    );
  }
}

class _DataModel with ChangeNotifier {
  int _count = 0;
  int get counter => _count;
  void increment() {
    _count++;
    notifyListeners();
  }
}

class _MyWidget extends StatefulWidget {
  const _MyWidget({Key? key, required this.backgroundColor}) : super(key: key);

  final Color backgroundColor;

  @override
  State<_MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<_MyWidget>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    // get the dataModel
    final _dataModel = Provider.of<_DataModel>(context);
    return Container(
      color: widget.backgroundColor,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(_dataModel.counter.toString()),
          ElevatedButton(
            child: const Text('add'),
            onPressed: () {
              // change data
              _dataModel.increment();
            },
          ),
        ],
      ),
    );
  }
}

Flutter - How to pass data between pages in PageView Widget?

2 Answers2