create complex scrolling view in flutter [closed] - flutter

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
there!
Can anyone achieve something like this in flutter?
screen recorded video (file size too big to attach it here!)

Answer 1

You can change the AppBar's color by using ScrollController#addListener.
It's a simple implementation with RiverPod.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CustomScrollViewSample extends ConsumerWidget {
const CustomScrollViewSample({Key? key}) : super(key: key);
#override
Widget build(BuildContext context, WidgetRef ref) {
return CustomScrollView(
controller: ref.read(controller),
slivers: [
SliverAppBar(
backgroundColor: ref.watch(backgroundColor),
foregroundColor: ref.watch(foregroundColor),
pinned: true,
elevation: 0,
title: const Text('We did it!'),
),
SliverList(
delegate: SliverChildListDelegate(
const [
SizedBox(height: 400),
SizedBox(
height: 400,
child: Card(margin: EdgeInsets.all(16), color: Colors.blue),
),
SizedBox(height: 400),
],
),
),
],
);
}
}
final controller = Provider((ref) {
final scrollController = ScrollController();
void listener() {
ref.read(backgroundOpacity.notifier).state = min(
1,
scrollController.position.pixels / 200,
);
}
scrollController.addListener(listener);
ref.onDispose(() {
scrollController.removeListener(listener);
});
return scrollController;
});
final backgroundColor = Provider(
(ref) => Colors.black.withOpacity(
ref.watch(backgroundOpacity),
),
);
final foregroundColor = Provider(
(ref) => Color.fromRGBO(
(ref.watch(backgroundOpacity) * 255).toInt(),
(ref.watch(backgroundOpacity) * 255).toInt(),
(ref.watch(backgroundOpacity) * 255).toInt(),
1,
),
);
final backgroundOpacity = StateProvider((_) => 0.0);
I also wrote the sample that works on DartPad.
If you like please try this.
https://dartpad.dev/?id=336910211bb02227e4c0b11e939aa116