I’m making an attempt to get this animation on this drive file:
https://drive.google.com/file/d/1xUpzsHXow2DrtA_IYKLJQAAl0pS-Lvsm/view?usp=sharing
However I am unable to work out learn how to fade and transfer the textual content to the highest accurately. It needs to be semi clear to be able to see the graph, after which grow to be not clear in any respect as a set header. How do I do that? That is an instance of my code up to now – It does many of the stuff I need, however the fastened app bar does not grow to be semi-transparent to see the again. It will make extra sense whenever you watch the video of what I need – its very easy I believe… Thanks SO a lot for serving to me with this!
Scaffold(
physique: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
backgroundColor: AppColors("Dark").mainGrey,
pinned: true,
snap: true,
floating: true,
title: Row(children: [
const SizedBox(width: 10),
SizedBox(
width: size.width * .25,
height: size.height * .05,
child: const FittedBox(
child: Text('JustLift',
style: TextStyle(
color: Colors.white,
))),
),
const SizedBox(width: 5),
Image.asset(
'assets/logos/logonotext.png',
width: size.height * .09,
),
const Spacer(),
]),
),
];
},
physique: CustomScrollView(slivers: [
SliverAppBar(
automaticallyImplyLeading: false,
expandedHeight: size.height * .22,
backgroundColor: AppColors("Dark").secondaryGrey,
bottom: PreferredSize(
preferredSize: const Size.fromHeight(0),
child: Container(
width: size.width,
decoration: BoxDecoration(
color: AppColors("Dark").footerGrey,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10))),
padding: const EdgeInsets.all(5))),
flexibleSpace: FlexibleSpaceBar(
background: Container(
width: size.width,
padding: EdgeInsets.only(
top: 10,
left: size.width * .07,
right: size.width * .07,
bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Welcome Back!',
style: TextStyle(
color: Color.fromARGB(255, 234, 234, 234),
fontSize: 21)),
Container(height: 100, width: 100 color: Colors.blue)
])),
)),
SliverToBoxAdapter(
baby: Container(
colour: AppColors("Darkish").footerGrey,
baby: Column(kids: [
Center(
child: Container(
height: size.height * .3,
width: size.width * .95,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 33, 33, 33),
borderRadius: BorderRadius.circular(10)),
child: Column(children: const [
Text('Your Ranking',
style: TextStyle(
fontSize: 23,
color: Color.fromARGB(
255, 182, 182, 182))),
]))),
