I found an way to achieve that:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController animController;
Animation<double> animation;
bool monhani = true;
int _counter = 0;
ScrollController _scrollController;
@override
void initState() {
animController = AnimationController(
duration: Duration(microseconds: 300000),
vsync: this,
);
animation = Tween<double>(begin: 150.0, end: 0.0).animate(animController)
..addListener(() {
setState(() {});
});
// TODO: implement initState
super.initState();
_scrollController = ScrollController()
..addListener(() {
if (_scrollController.offset.toInt() >= 283 && monhani == true) {
setState(() {
animController.forward();
monhani=false;
});
} else if(_scrollController.offset.toInt() <= 283) {
animController.reverse();
monhani=true;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightBlue[100],
body: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
SliverAppBar(
bottom: PreferredSize(
child: Container(
color: Colors.orange,
),
preferredSize: Size(0, 60),
),
pinned: true,
expandedHeight: 400,
automaticallyImplyLeading: true,
primary: false,
flexibleSpace: Stack(
children: <Widget>[
Center(
child: Container(
height: 400,
width: 450,
decoration: BoxDecoration(
// color: Colors.green,
image: DecorationImage(
image: NetworkImage(
"https://images.pexels.com/photos/62389/pexels-photo-
62389.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"),
fit: BoxFit.cover)),
),
),
Positioned(
child: Container(
height: 100,
decoration: BoxDecoration(
color: Colors.lightBlue[100],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(animation.value)),
),
),
bottom: -1,
left: 0,
right: 0,
),
],
),
),
SliverList(
delegate: SliverChildListDelegate([
Column(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height - 100,
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(animation.value)),
),
),
Container(
height: MediaQuery.of(context).size.height - 100,
width: double.infinity,
alignment: Alignment.center,
color: Colors.green,
),
Container(
height: MediaQuery.of(context).size.height - 100,
width: double.infinity,
alignment: Alignment.center,
color: Colors.amber,
),
],
)
]),
),
],
),
);
}
}
this image is result