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 methods to fade and transfer the textual content to the highest accurately. It ought to be semi clear in an effort to see the graph, after which develop into not clear in any respect as a hard and fast header. How do I do that? That is an instance of my code to date – It does many of the stuff I need, however the mounted app bar does not develop into semi-transparent to see the again. It will make extra sense if you watch the video of what I need – its very easy I feel… 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(
little one: Container(
shade: AppColors("Darkish").footerGrey,
little one: Column(youngsters: [
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))),
]))),
