How to show PhotoViewGallery class index value in appBar - flutter

Question

I'm using photo_view_gallery class and I would like to show dynamically the value of current image index of PhotoViewGallery.builder into the appBar.
I'm new in Flutter, I googled a lot but I can't found any solution for this
body: PhotoViewGallery.builder(
itemCount: listaPagine.length,
builder: (context, index) {
saveIndex(index);
String myImg =
'http://www.attilofficina.altervista.org/phpbackend/JOB/000004/fullsize/' +
listaPagine[index].nomefile.toString() +
'.jpg';
return PhotoViewGalleryPageOptions(
imageProvider: AdvancedNetworkImage(myImg,
retryLimit: 1, timeoutDuration: Duration(seconds: 30)),
);
},
),
I also try a function that save index to another variable, but the value is still unavailable in appBar
Here the code and position of this function (in appBar is shown null)
class GalleryPageState extends State<GalleryPage> {
int curr;
...
#override
Widget build(BuildContext context) {
...
saveIndex(int index) {
int curr = index;
print('*** curr = ' + curr.toString()); /// PRINTS CORRECT VALUE
return curr;
}
...
return Scaffold(
appBar: AppBar(
title: Text(curr.toString(), /// BUT IT SHOWS NULL
),
),
body: PhotoViewGallery.builder(
itemCount: listaPagine.length,
builder: (context, index) {
salvaIndex(index);
String myImg =
'http://www.attilofficina.altervista.org/phpbackend/JOB/000004/fullsize/' +
listaPagine[index].nomefile.toString() +
'.jpg';
return PhotoViewGalleryPageOptions(
imageProvider: AdvancedNetworkImage(myImg,
retryLimit: 1, timeoutDuration: Duration(seconds: 30)),
);
},
),
);
}
}
Can someone help me?
special thanks mario

Answer 1

I think you can use onPageChanged
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
final List<String> listaPagine = [
'https://picsum.photos/id/451/200/300',
'https://picsum.photos/id/200/200/300'
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('# $_currentIndex'),
),
body: PhotoViewGallery.builder(
itemCount: listaPagine.length,
builder: (BuildContext context, int index) {
String myImg = listaPagine[index];
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(myImg),
);
},
onPageChanged: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}

Answer 2

There's three things wrong in your following code:
saveIndex(int index) {
int curr = index;
print('*** curr = ' + curr.toString()); /// PRINTS CORRECT VALUE
return curr;
}
Here you are creating new int curr variable which should be curr to use the existing global scope variable.
You should create the saveIndex method outside of build function.
Also you should update the variable in setState like
setState((){
curr=index;
});
This will update the variable and recreate the widget tree with AppBar with updated values.
Also you don't need the return statement in saveIndex
Editing for #attila's help
The basic about the state is, it just keep the current state or values in memory. You can always change any value & it will be updated in the state but it will not reflected on the UI. Because your application or view still don't know that some value is updated & it needs to re-render the UI.
That's where the setState come in picture. What it does is while updating the value it also call the build function so new UI with updated values could be re-rendered on screen.
To test it, you can just update the values & call setState((){}); after that. It will still work as same.
Hope this helps you.