Created
June 11, 2024 10:38
-
-
Save BorisKest/c0b2af806a2875f1d5ae65fcfabbe938 to your computer and use it in GitHub Desktop.
SliverAppBar with expandable bottom.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() { | |
runApp(const MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
const MyApp({super.key}); | |
// This widget is the root of your application. | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
theme: ThemeData( | |
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), | |
useMaterial3: true, | |
), | |
home: const MyHomePage(title: 'Flutter Demo Home Page'), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
const MyHomePage({super.key, required this.title}); | |
// This widget is the home page of your application. It is stateful, meaning | |
// that it has a State object (defined below) that contains fields that affect | |
// how it looks. | |
// This class is the configuration for the state. It holds the values (in this | |
// case the title) provided by the parent (in this case the App widget) and | |
// used by the build method of the State. Fields in a Widget subclass are | |
// always marked "final". | |
final String title; | |
@override | |
State<MyHomePage> createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
int _counter = 0; | |
void _incrementCounter() { | |
setState(() { | |
// This call to setState tells the Flutter framework that something has | |
// changed in this State, which causes it to rerun the build method below | |
// so that the display can reflect the updated values. If we changed | |
// _counter without calling setState(), then the build method would not be | |
// called again, and so nothing would appear to happen. | |
_counter++; | |
}); | |
} | |
@override | |
Widget build(BuildContext context) { | |
// This method is rerun every time setState is called, for instance as done | |
// by the _incrementCounter method above. | |
// | |
// The Flutter framework has been optimized to make rerunning build methods | |
// fast, so that you can just rebuild anything that needs updating rather | |
// than having to individually change instances of widgets. | |
return Scaffold( | |
appBar: AppBar( | |
leading: IconButton( | |
onPressed: () {}, | |
icon: const Icon(Icons.arrow_back_ios), | |
), | |
title: const Center(child: Text('Productions')), | |
), | |
body: CustomScrollView(slivers: [ | |
const _CustomSliverAppBar(), | |
SliverList( | |
delegate: SliverChildBuilderDelegate( | |
(context, index) { | |
return ListTile( | |
title: Text('Item $index'), | |
); | |
}, | |
childCount: 100, | |
), | |
), | |
]), | |
); | |
} | |
} | |
class _CustomSliverAppBar extends StatefulWidget { | |
const _CustomSliverAppBar(); | |
@override | |
State<_CustomSliverAppBar> createState() => __CustomSliverAppBarState(); | |
} | |
class __CustomSliverAppBarState extends State<_CustomSliverAppBar> | |
with SingleTickerProviderStateMixin { | |
late AnimationController _controller; | |
late Animation<double> _animation; | |
bool isExpanded = false; | |
Widget _buildSliverAppBar(Size size, double i) { | |
return SliverAppBar( | |
title: Row( | |
children: [ | |
const _SearchField(), | |
IconButton( | |
onPressed: () { | |
setState(() { | |
isExpanded = !isExpanded; | |
if (isExpanded) { | |
_controller.forward(); | |
} else { | |
_controller.reverse(); | |
} | |
}); | |
}, | |
icon: Icon(isExpanded | |
? Icons.arrow_circle_up | |
: Icons.arrow_circle_down_rounded), | |
iconSize: 30, | |
), | |
], | |
), | |
bottom: PreferredSize( | |
preferredSize: Size(size.width, i), | |
child: SizedBox( | |
height: i, | |
child: ListView.builder( | |
padding: const EdgeInsets.only(top: 10), | |
itemExtent: 100, | |
shrinkWrap: true, | |
scrollDirection: Axis.horizontal, | |
itemCount: 40, | |
itemBuilder: (context, index) { | |
var margin = const EdgeInsets.symmetric(horizontal: 5); | |
if (index == 0) { | |
margin = margin.copyWith(left: 16); | |
} else if (index == 39) { | |
margin = margin.copyWith(right: 16); | |
} | |
return Container( | |
margin: margin, | |
decoration: BoxDecoration( | |
border: Border.all(color: Colors.black), | |
borderRadius: BorderRadius.circular(10), | |
), | |
child: Center(child: Text('Item $index')), | |
); | |
}), | |
))); | |
} | |
@override | |
void initState() { | |
super.initState(); | |
_controller = AnimationController( | |
vsync: this, | |
duration: const Duration(milliseconds: 300), | |
); | |
_animation = CurvedAnimation( | |
parent: _controller, | |
curve: Curves.easeInOut, | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
final size = MediaQuery.of(context).size; | |
return AnimatedBuilder( | |
animation: _animation, | |
builder: (context, child) => | |
_buildSliverAppBar(size, _animation.value * 50), | |
); | |
} | |
} | |
class _SearchField extends StatefulWidget { | |
const _SearchField(); | |
@override | |
State<_SearchField> createState() => __SearchFieldState(); | |
} | |
class __SearchFieldState extends State<_SearchField> { | |
@override | |
Widget build(BuildContext context) { | |
return Expanded( | |
child: Container( | |
decoration: BoxDecoration( | |
color: const Color.fromARGB(137, 238, 238, 238), | |
borderRadius: BorderRadius.circular(10), | |
), | |
child: const TextField( | |
decoration: InputDecoration( | |
border: InputBorder.none, | |
hintText: 'Search', | |
prefixIcon: Icon(Icons.search), | |
), | |
), | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment