Stateful widget doesn't change state

Question

In this code, when I change page (I'm using PageView as is it in code below) flutter doesn't trigger rebuild, so condition if(_page == 1) will take effect after I press "hot reload". Any tips for solution? I calling this class in main.dart (HomePage) which is Stateless widget. Could it be the problem? Thanks for any help!

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

int _page = 0;

class Guide extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new GuideState();
  }
}

class GuideState extends State<Guide> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Center(
                child: Column(children: [
      if (_page == 1)
        Padding(
            padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
            child: Image(
                image: AssetImage('graphics/Logo.png'),
                height: MediaQuery.of(context).size.height * 0.1)),
      SizedBox(height: 500, child: Page()),
    ]))));
  }
}

class Page extends StatefulWidget {
  PageState createState() => PageState();
}

class PageState extends State<Page> {
  final controller = PageController(
    initialPage: 0,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appBar: AppBar(title: Text('PageView Widget in Flutter')),
        body: Center(
            child: Container(
      width: MediaQuery.of(context).size.width * 0.95,
      height: MediaQuery.of(context).size.height * 0.6,
      child: PageView(
        controller: controller,
        onPageChanged: (page) {
          setState(() {
            if (page == 1) {
              _page = 1;
            }
          });
        },
        pageSnapping: true,
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
              //color: Colors.pink,
              //child: Center(
              child: Text(
            '1. Tento text bude nahrán z databáze.',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
          Container(
              //color: Colors.green,
              child: Text(
            '2. Tento text bude nahrán z databáze',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
          Container(
              // color: Colors.lightBlue,
              child: Text(
            '3. Tento text bude nahrán z databáze',
            style: TextStyle(fontSize: 25, color: Colors.black),
          )),
        ],
      ),
    )));
  }
}

Answer 1

The variable _page is set as global, it has to be part of as state inorder to trigger changes, but in your case you want to change a widget base on action in another child widget, this can be done in several ways depending on your choice the easies in you case is to have a function as a parameter for your child widget Page :

class Page extends StatefulWidget {
  final Function(int) onChange;

  const Page({Key key, this.onChange}) : super(key: key);

  PageState createState() => PageState();
}

and then call it when the page change

onPageChanged: (page) {
  widget.onChange(page);
},

so with this you can handle the change in you parent widget and trigger state change

class GuideState extends State<Guide> {
  int _page = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            children:[
              if (_page == 1)
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
                  child: Image(
                    image: AssetImage('graphics/Logo.png'),
                    height: MediaQuery.of(context).size.height * 0.1,
                  ),
                ),
              SizedBox(
                height: 500,
                child: Page(
                  onChange: (page) {
                    setState(() => _page = page);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

int _page = 0; is not part of the state of your Guide widget. Place it here:

class GuideState extends State<Guide> {
   int _page = 0;
   ...