Flutter Animation for AppBar text in PageView - flutter

Question

I want to make the title fade and the title should disappear when the previous screen reaches the mid Screen. The next title should fade till midway and the and a new title for the next screen should fade in. How can I add this animation I am using AnimatedOpacity and AnimatedSwitcher but it doesn't work. The code files are:
The Data Class
import 'package:flutter/material.dart';
class DataModel {
List<String> titles = ['Red1', 'Blue2', 'Green3'];
List<String> content = ['Red1', 'Blue2', 'Green3'];
}
The Main Screen
import 'package:flutter/material.dart';
import 'package:ui_design/model/data.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
AnimationController controller;
Animation<double> animation;
initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 100));
animation = CurvedAnimation(parent: parent, curve: curve)
}
//
DataModel dataModel = DataModel();
int currentPageIndex = 0;
bool isPageChanged = true;
//
#override
Widget build(BuildContext context) {
var appBarTitle = dataModel.titles[currentPageIndex];
return Scaffold(
appBar: AppBar(
leading: const Icon(Icons.menu),
title: Text(
appBarTitle,
),
),
body: PageView.builder(
scrollDirection: Axis.horizontal,
itemCount: dataModel.content.length,
onPageChanged: (value) => setState(() {
appBarTitle = dataModel.titles[currentPageIndex];
}),
itemBuilder: (BuildContext context, int index) {
currentPageIndex = index;
print('Current page index $currentPageIndex');
return Container(
alignment: Alignment.center,
child: Text(
dataModel.content[index],
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
);
},
),
);
}
}
// AnimatedSwitcher(
// duration: const Duration(milliseconds: 500),
// transitionBuilder: (Widget child, Animation<double> animation) {
// return FadeTransition(child: child, opacity: animation);
// },
// child: Image.asset(
// imageList[currentIndex.toInt()],
// key: ValueKey<int>(currentIndex),
// ),

Answer 1

You can try widget, I am using PageController and Opcaity on title.
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
DataModel dataModel = DataModel();
int currentPageIndex = 0;
double opacity = 1;
late final PageController pageController = PageController(
initialPage: 0,
)..addListener(() {
debugPrint(pageController.page.toString());
opacity =
double.tryParse(pageController.page.toString().substring(1)) ?? 1;
if (opacity < .5) {
opacity = 1 - opacity * 2;
}
setState(() {});
});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const Icon(Icons.menu),
title: Opacity(
opacity: opacity,
child: Text(
dataModel.titles[currentPageIndex],
),
),
),
body: PageView.builder(
controller: pageController,
scrollDirection: Axis.horizontal,
itemCount: dataModel.content.length,
onPageChanged: (value) {
debugPrint("on page changed: $value");
currentPageIndex = value;
setState(() {});
},
itemBuilder: (BuildContext context, int index) {
return Container(
alignment: Alignment.center,
child: Text(
dataModel.content[index],
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
),
),
);
},
),
);
}
}