CODEWITHSUNDEEP
flutter
Hoa.Tran
Hoa.Tran

Reputation: 935

State not update when PageView change current position

I'm new member in Flutter. I create a PageView and when page change position I need update text. Here is my code :

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PageViewDemo(),
    );
  }
}

class PageViewDemo extends StatefulWidget {
  @override
  _PageViewDemoState createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo> {
  List<String> _storyList = [];
  double currentPage = 0;
  PageController pageController = PageController(initialPage: 0);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _storyList.add("1");
    _storyList.add("2");
    _storyList.add("3");
    _storyList.add("4");
    _storyList.add("5");
    pageController.addListener(() {
      setState(() {
        currentPage = pageController.page;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 30),
      color: Colors.red.withOpacity(0.4),
      height: 450,
      child: Stack(
        children: <Widget>[
          Cards(
            currentPage: currentPage,
            data: _storyList[0],
          ),
          PageView.builder(
            itemCount: _storyList.length,
            itemBuilder: (context, idx) {
              return Container(
                color: Color(Random().nextInt(0xffffffff)),
                child: Center(
                  child: Text(
                    "pos=$currentPage",
                    style: TextStyle(color: Colors.red),
                  ),
                ),
              );
            },
          )
        ],
      ),
    );
  }
}

class Cards extends StatefulWidget {
  String data;
  double currentPage;

  Cards({Key key, this.currentPage, this.data}) : super(key: key);

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

class _CardsState extends State<Cards> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    double pos = widget.currentPage;
    return Container(
      child: Text(
        "pos= $pos",
        style: TextStyle(
          fontSize: 20,
          color: Colors.white,
          fontWeight: FontWeight.w700,
        ),
      ),
    );
  }
}
When I run app position of code alway is 0.0. What is wrong? and in class Cards I have a waring: This class (or a class that this class inherits from) is marked as '@immutable', but one or more of its instance fields aren't final: Cards.data, Cards.currentPage - line 78. how I can fix it? Please help me. Thank you!

Upvotes: 1

Views: 2505

Answers (1)

Jay Mungara
Jay Mungara

Reputation: 7150

Just assign controller to your pageview and you are good to go.

In your build method, change your PageView.builder like,

PageView.builder(
    controller: pageController
    // your other properties as it is 
)

Because you have added listener to your PageViewController. But, you haven't assigned it to appropriate widget.

So, by giving that controller property you will be able to achieve your functionality.

Upvotes: 3

Related Questions