Skip to content

Instantly share code, notes, and snippets.

@sergiocasero
Created July 31, 2020 11:36
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Custom Sliver with Toolbar Ellipsis behind
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: CustomSliver(),
),
),
);
}
}
class CustomSliver extends StatefulWidget {
@override
_CustomSliverState createState() => _CustomSliverState();
}
class _CustomSliverState extends State<CustomSliver> {
final double _max = 200;
final double _min = 96;
ScrollController _controller;
double _ellipsisTop;
bool _isLoading = false;
@override
void initState() {
_ellipsisTop = _max;
super.initState();
_controller = ScrollController();
_controller.addListener(() {
print(_controller.offset);
setState(() {
if (_controller.offset < _min) {
_ellipsisTop = _max - _controller.offset;
} else if (_controller.offset == 0) {
_ellipsisTop = _max;
}
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
height: _ellipsisTop,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.vertical(
top: Radius.zero,
bottom: Radius.elliptical(100, 40),
),
),
),
CustomScrollView(
controller: _controller,
physics: ClampingScrollPhysics(),
slivers: [
SliverAppBar(
elevation: 0,
pinned: true,
centerTitle: true,
expandedHeight: 150,
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.yellow, Colors.red],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: FlexibleSpaceBar(
title:Text(
"This is the app title",
textAlign: TextAlign.center,
maxLines: 2,
),
),
),
),
SliverList(
delegate: SliverChildListDelegate(
List.generate(100, (int index) => Text("Item $index"),),),
),
],
),
if (_isLoading)
Center(
child: CircularProgressIndicator(),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment